HTML Frames
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.
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
* Frames are not expected to be supported in future versions of HTML
* Frames are difficult to use. (Printing the entire page is difficult).
* The web developer must keep track of more HTML documents.
Creating Frames
Two Column Frameset
HTML Code:
Results:
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)
Results:
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:
Results:
Tag Reference
Here's some more info on the above tags.
The frameset Tage
In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.
| Attributes | 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.
| Attributes | Description |
|---|---|
| Name | Assigns a name to a frame. This is useful for loading contents into one frame from another. |
| marginheight | Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins. |
| 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: * auto * yes * no |
| frameborder | Whether the frame should have a border or not. Possible values: * 1 (border) * 0 (no border) |
| marginwidth | Specifies the margin, in pixels, between the frame's contents and it's left and right 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>
Basic Notes - Useful Tips
Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <*frame> tag.
Note: Add the <*noframes> tag for browsers that do not support frames.
Important: You cannot use the <*body><*/body> tags together with the <*frameset><*/frameset> tags! However, if you add a <*noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <*body><*/body> tags! See how it is done in the first example below.
Subscribe to:
Posts (Atom)