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
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.
Alternatvely, you can use CSS to create HTML5 compliant frames.
Two Column Frameset
The frameset (frame_example_frameset_1.html):
The left frame (frame_example_left.html):
The right frame (frame_example_right.html):
Add a Top Frame
You can do this by "nesting" a frame within another frame.
The frameset (frame_example_frameset_2.html):
The top frame (frame_example_top.html):
(The left and right frames don't change)View the result
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
The frameset (frame_example_frameset_3.html):
(The left, right, and top frames don't change)View the result
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
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.
The frameset (frame_example_frameset_4.html):
The left frame (frame_example_left_2.html):
The yellow frame (frame_example_yellow.html):
The lime frame (frame_example_lime.html):
Here's some more info on the above tags.
The frameset Tag
In your frameset tag, you specify either
rows, depending on whether you want frames to go vertically or horizontally.
|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.
|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
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.