To display four separate HTML files on a single page using a "frames" approach, we use the
Your browser does not support frames. Please update your browser.
HTML
The Four Seasons - Master Frame
Your browser does not support frames. Please update your browser.
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.