HTML Frames Overview
Do you really need to use the <FRAMESET> tag? You can use a table to format the information into
areas, complete with borders, on the browser screen. But remember: Although ðr2 and cornbread
are round, tables are static, and frames can be dynamic. For the mathematically challenged, this
means that you can scroll information within frames.
Each frame is similar to a separate browser screen. Depending on the attributes you give it, a frame
can act just like a standard browser screen, or it can be frozen into Elliot Ness untouchability.
Frames are still not part of the public standard DTD for HTML. This means there is not a universal
standard to follow. However, both Netscape and Microsoft have implemented frames support in
their browsers (since version 2.0 of each). As long as you are sure the viewers of your site have a
compatible browser, then frame away. But if your audience uses a wide variety of browsers, you
may want to shy away from frames until they become DTD material.
Frames have numerous uses, such as:
In short, frames are flexible. They enable you to keep constant chunks of information on the
browser display while permitting users to scroll through large amounts of text or dynamic content.
You find out how to set up the structures we've just described a bit later in the chapter. Before you
jump ahead, you need to understand the HTML markup tags that make frames possible.
- A Web page with a fixed logo at the top and a scrolling main bottom section
- A page with a fixed top logo, a bottom navigation bar and copyright notice, and a scrolling
middle section for displaying page content
- A Web page with side-by-side frames having a table of contents on the left and a scrolling
text frame on the right
- A left frame filled with icons linked to different parts of your Web site: the particular part
displayed in the right frame is based on a selection from the left frame
HTML Frame Markup
The HTML tags for frames are listed in the following subsections, along with discussions of their
proper syntax and use. Frames have good uses and better uses, which we know you'll grasp
quickly. After you figure out the uses of frames, you can hang some nice frames around your own
Web site! We begin with a discussion of the structure of a document that includes frames and then
look at the tags that you use to make the frames. Frame-ward ho!
The Frame Document structure
A Frame Document can simply be a normal HTML document in which the <BODY. . .>
container is replaced by a <FRAMESET. . .> container that characterizes the HTML
sub-documents frames that constitute the Web page. (Simply put: You use <FRAMESET>
instead of <BODY> for your content.) The basic Frame Document starts within the following
overall HTML framework. (Don't ya just love/hate puns?)
Your frame information goes here.
If you're a nice person and want to provide something for frame-challenged browsers to display,
you can use the <NOFRAMES> tag to include your existing, nonframed HTML document. When you
use the <NOFRAMES> tag , you must include the <BODY> tag:
The nonframed HTML code for your page goes here.
Frame syntaxFrame syntax is quite similar to the syntax you use within HTML tables. In fact, you
can think of frames as movable and dynamically updateable tables. After you start using
frame-related markup in your own Web pages, you'll find the syntax to be pretty straightforward
<FRAMESET> is the main container for a frame. Because a frame document uses <FRAMESET>
instead of <BODY>, the <FRAMESET> tag immediately follows the </HEAD> tag. If any <BODY> tags
appear before the <FRAMESET> tag pair, the <FRAMESET> tag is ignored. Between the outermost
<FRAMESET> . . . </FRAMESET> tags, you can use only nested <FRAMESET> tags, <FRAME>
tags, or <NOFRAMES> tags.
ROWS="n | % | *, n | % | *, n | % | *, --"
The ROWS attribute determines two things: the number of frames that appear vertically (stacked
on top of each other) in the browser window and the height of each of these frames. The ROWS
attribute uses a comma-separated list of values. The number of elements in the ROWS value list
determines the number of frames that appear vertically up and down the screen. Because the total
height of all the simultaneously displayed frames must equal the height of the browser window, the
browser may adjust the ROWS height values to make them all fit. ROWS values can be any valid
mixture of the following elements:
If you place a value in front of the *, the frame gets that much more relative space. For instance, an
entry like 3*, * allocates three times as much space to the first frame (3/4 of the total) and the
remaining portion (1/4) to the second frame.
- n: A fixed number of pixels. Take care when using this type of value because the size of the
viewer's window can vary substantially. When you use a fixed pixel value, using one or more
of the relative size values (described a little later in the chapter) is a good idea, too.
Otherwise, the user's browser may override your specified pixel value to ensure that the total
height and width of all the frames equals 100 percent of the user's window. Remember, the
browser will display all defined frames, even if it has to squeeze them into small areas.
- value%: This value is a percentage between 1 and 100. If the total for all frames is greater
than 100 percent, all percentages are scaled down to fit the browser window. If the values
total less than 100 percent, extra space is allocated to any relatively sized frames (see
[value]* below) that may be present.
- [value]*: A single asterisk * character designates a relative-sized frame. Browsers give the
* frame all remaining space left over after other allocations are satisfied. If you use multiple
relative-sized frames, the remaining space is divided evenly among them.
You don't have to be a mathematics expert to use these different types of values, but you do need
to test your work carefully to make sure you're getting the results you want. Be especially careful to
test your work when you mix value types. The following are a couple of examples to get you
Example 1: Two Vertically Stacked Frames
This example shows two equivalent value constructs:
Example 2: Three vertical frames
This example shows HTML code for three vertical frames using a fixed pixel, a relative value, and a
COLS="n | % | *, n | % | *, n | % | *, --"
The COLS attribute functions in the same manner as the ROWS attribute, except that it governs
the number of frames that appear horizontally across the browser's screen as well as the horizontal
width of each frame.
A quick example of the HTML code that displays two frames across the screen with the first one
(on the left) getting 20 percent of the available space and the second (on the right) getting the rest,
looks like this:
A separate FRAME tag must define each separate frame in your Web site.. The <FRAME> tag
has no associated end tag. This tag defines the contents, name, and attributes of each frame. If you
create four frames, you need four <FRAME> tags. The first <FRAME> tag defines the top
left-most frame area. The second <FRAME> tag defines the frame immediately to the right of the
first frame, or if the edge of the browser is reached, the frame in the next row. And so on.
In general, you use a standard HTML file, an image file, or a URL for display in each frame. The
following is an example of the syntax for a <FRAME> tag:
<FRAME SRC="yourstuf.htm" NAME="Your Frame">
You can modify the <FRAME> tag by using the following six attributes:
The URL for the SRC (source) attribute points to the source material you want to appear in the
frame. The source material may be a link, an image, an HTML file, or any other legal URL. If you
omit the SRC attribute, the frame will be blank.
The NAME attribute assigns a name to a frame so that you can target the frame as the recipient of
information. The NAME attribute is optional, and all NAME values must begin with an
The MARGINWIDTH attribute accepts a value of one or more pixels to determine the exact width
of the left and right side margins of a frame. Margins must be one or more pixels wide to ensure
that objects do not touch a frame's edges. You cannot specify margins so that no space exists for a
document's contents. The MARGINWIDTH attribute is optional. If you omit this attribute, the
browser sets its own margin widths.
The MARGINHEIGHT attribute works just like MARGINWIDTH, except that it controls the
upper and lower margins of frames instead of the left and right margins.
The SCROLLING attribute forces a frame to display a scroll bar. A value of yes forces the
browser to display the scroll bars on that frame at all times. A no value keeps scroll bars from
being visible at any time. The SCROLLING attribute is optional, and the default value is auto.
The NORESIZE attribute indicates that a user may not resize the frame. By default, users can
resize frames by dragging a frame edge to a new position. If any frame adjacent to the edge of
another frame isn't resizable, that entire edge cannot move. This unmovable edge affects the resizing
of any adjacent frames. The NORESIZE attribute is optional and quite useful for keeping viewers
from removing your logo or advertising space from their view. However, we don't recommend
using the NORESIZE attribute as a general technique for content display frames because the
restriction limits users' abilities to resize your hand-crafted display settings to fit their screens.
<NOFRAMES> . . . </NOFRAMES>
The <NOFRAMES> tag enables you to create alternative content that is viewable by
frame-challenged browsers. Any frame-cognizant browser ignores all tags and data between
starting and ending <NOFRAMES> tags.
The TARGET attribute gives you control over where the linked data appears when a user clicks on
a link in your documents. You can use the TARGET attribute in the <BASE>, <AREA>, and
<FORM> tags, but the attribute is most beneficial when you use it in the <A> (anchor) tag in
conjunction with the frames feature. So, how exactly does targeting work?
Normally, when a user clicks a link, the browser displays the new document in a full browser
window. Targeting enables you to assign names to specific frames and to target certain documents
to always appear in the frame bearing the targeted name. In a prior section of this chapter, we tell
you how to use the NAME attribute to name a frame. Well, using the TARGET attribute to target
the frame is just as easy.
Adding the TARGET attribute to the <A> tag in conjunction with the frames feature is as simple as
inserting the attribute and its value (the frame name) in the <A> tag. In the following example, the
name of the targeted frame is frame name:
<A HREF="url" TARGET="frame name">Targeted Anchor</A>
Allowed and special TARGET names
A valid frame name specified by a TARGET attribute must begin with an alphanumeric character,
with the exception of a few special-purpose target names that begin with the underscore character.
Any targeted frame name (other than a special-purpose name) that begins with an underscore or a
non-alphanumeric character is ignored.
* TARGET="_self": Specifying the _self target always causes the linked document to load in the
frame where the user selects the anchor.
* TARGET="_parent": Specifying the _parent target makes the linked document load in the
immediate FRAMESET parent of the document. If the current document where the _parent target
appears has no parent, this attribute behaves like the _self value. * TARGET="_top": Specifying
the _top target makes the linked document load in the full body of the window. The _top target
name acts like _self if the current document is already at the top of the document hierarchy. Use
this attribute to escape from a deeply nested FRAME.
Next Section | HTML Frames | Extras TOC
E-Mail: HTML for Dummies at firstname.lastname@example.org
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James.
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered
trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]