Frames in HTML

Uploaded by

gevanson967

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

30 views

Frames in HTML

Uploaded by

gevanson967

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

Lecture Notes 4 (Part 2)

Frames in HTML
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.

1. 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">
This is the left frame (frame_example_left.html).
</body>
</html>
The right frame (frame_example_right.html):
<html>
<body style="background-color:yellow">
This is the right frame (frame_example_right.html).
</body>
</html>

2. 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%, *">
1|P a g e
Lecture Notes 4 (Part 2)
Frames in HTML
<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">
This is the Top frame (frame_example_top.html).
</body>
</html>
(The left and right frames don't change)

3. 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)

4. 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.

2|P a g e
Lecture Notes 4 (Part 2)
Frames in HTML
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">
This is the left frame (frame_example_left_2.html).

<a target="content" href="frame_example_yellow.html">Yellow</a> 
<a target="content" href="frame_example_lime.html">Lime</a>

</body>
</html>
The yellow frame (frame_example_yellow.html):
<html>
<body style="background-color:yellow">
This is the yellow frame (frame_example_yellow.html).
</body>
</html>
The lime frame (frame_example_lime.html):
<html>
<body style="background-color:Lime">
This is the lime frame (frame_example_lime.html).
</body>
</html>

5. 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%

3|P a g e
Lecture Notes 4 (Part 2)
Frames in HTML
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:
• 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.
marginheight Specifies the margin, in pixels, between the frame's contents and it's top and bottom
margins.

6. 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>

4|P a g e