In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.
Frames are achieved by creating a
frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.
So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.
Creating Frames
Two Column Frameset
HTML Code:
The frameset (frame_example_frameset_1.html):
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
The left frame (frame_example_left.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>
The right frame (frame_example_right.html):
<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>
Add a Top Frame
You can do this by "nesting" a frame within another frame.
HTML Code:
The frameset (frame_example_frameset_2.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
The top frame (frame_example_top.html):
<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>
(The left and right frames don't change)
Remove the Borders
You can get rid of the borders if you like. Officially, you do this using
frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the
frameborder,
border, and
framespacing attributes.
HTML Code:
The frameset (frame_example_frameset_3.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
(The left, right, and top frames don't change)
Load Another Frame
Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).
This is achieved using the
name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the
target attribute.
Tip: You could use
base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.
HTML Code:
The frameset (frame_example_frameset_4.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left_2.html" />
<frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>
The left frame (frame_example_left_2.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>
The yellow frame (frame_example_yellow.html):
<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>
The lime frame (frame_example_lime.html):
<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>
Tag Reference
Here's some more info on the above tags.
The frameset Tag
In your frameset tag, you specify either
cols or
rows, depending on whether you want frames to go vertically or horizontally.
| Attribute | Description |
|---|
| rows | Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100% |
| cols | Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100% |
The frame Tag
For each frame you want to display, you specify a
frame tag. You nest these within the frameset tag.
| Attribute | Description |
|---|
| name | Assigns a name to a frame. This is useful for loading contents into one frame from another. |
| longdesc | A long description - this can elaborate on a shorter description specified with the title attribute. |
| src | Location of the frame contents (for example, the HTML page to be loaded into the frame). |
| noresize | Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not). |
| scrolling | Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:
|
| frameborder | Whether the frame should have a border or not. Possible values:
|
| marginwidth | Specifies the margin, in pixels, between the frame's contents and it's left and right margins. |
| marginheight | Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins. |
The noframe Tag
The
noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.
HTML Code:
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
