Thursday, 19 February 2026

HTML CODE FOR DISPLAYING 4 DIFFERENT HTML PAGES ON SINGLE HTML PAGE USING FRAMES

To display four separate HTML files on a single page using a "frames" approach, we use the tag. This is the classic way to split a browser window into multiple independent sections. Since replaces the tag, this "Master" file will pull the content from four other files you create. 1. The Master File (index.html) This file defines the layout. It creates two rows and two columns. The Four Seasons - Master Frame <body> Your browser does not support frames. Please update your browser. </body> HTML 

  The Four Seasons - Master Frame <body> Your browser does not support frames. Please update your browser. </body> 2. The Four Content Files You must create these four files and save them in the same folder as your index.html. 
<frameset cols="50%,50%" rows="50%,50%">
    <frame name="springFrame" noresize="" scrolling="yes" src="spring.html">
    <frame name="summerFrame" noresize="" scrolling="yes" src="summer.html">
    <frame name="autumnFrame" noresize="" scrolling="yes" src="autumn.html">
    <frame name="winterFrame" noresize="" scrolling="yes" src="winter.html">
    
    <noframes>
        <body>
            Your browser does not support frames. Please update your browser.
        </body>
    </noframes>
</frame></frame></frame></frame></frameset>

 File 1: spring.html HTML 

Spring Season

Spring is a time of rebirth. Flowers bloom and the weather turns mild.

File 2: summer.html HTML 

Summer Season

Summer is the hottest season. It is perfect for vacations and swimming.

File 3: autumn.html HTML 

Autumn Season

In Autumn, leaves change color to gold and red before falling.

File 4: winter.html HTML 

Winter Season

Winter brings snow and ice. It is the coldest time of the year.

How to run this: Create a folder on your computer. 
 Save the first block of code as index.html.
 Save the four season codes as spring.html, summer.html, autumn.html, and winter.html. 
 Open index.html with your browser. 
 Key Attributes Used: rows="50%,50%":
 Splits the screen horizontally into two equal halves. cols="50%,50%": 
Splits the screen vertically into two equal halves. 
 noresize: Prevents the user from dragging the borders to change frame sizes.
 scrolling="yes": Adds a scrollbar if your content or image is too large for the frame.
at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

CSS and type of CSS

1. Inline CSS (The "Direct Note")This is written directly inside the HTML tag.  It’s like putting a sticker right on an object.B...