16 Frames
HTML frames allow authors to present documents in multiple views, which may
be independent windows or subwindows. Multiple views offer designers a way to
keep certain information visible, while other views are scrolled or replaced.
For example, within the same window, one frame might display a static banner, a
second a navigation menu, and a third the main document that can be scrolled
through or replaced by navigating in the second frame.
Here is a simple frame document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
that might create a frame layout something like this:
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
If the user agent can't display frames or is configured not to, it will
render the contents of the
NOFRAMES element.
16.2 Layout of frames
An HTML document that describes frame layout (called a
frameset document) has a different makeup than an HTML
document without frames. A standard document has one
HEAD section and one BODY. A frameset document has a
HEAD, and a FRAMESET in place of the
BODY.
The
FRAMESET section of a document specifies the layout of views in the
main user agent window. In addition, the FRAMESET section can contain a
NOFRAMES element to provide alternate
content for user agents that do not support frames or are configured not to
display frames.
Elements that might normally be placed in the
BODY element must not appear before the first
FRAMESET element or the FRAMESET will be ignored.
Attribute definitions
- rows = multi-length-list [CN]
- This attribute specifies the layout of horizontal frames. It is a
comma-separated list of pixels, percentages, and relative lengths. The default
value is 100%, meaning one row.
- cols = multi-length-list [CN]
- This attribute specifies the layout of vertical frames. It is a
comma-separated list of pixels, percentages, and relative lengths. The default
value is 100%, meaning one column.
Attributes defined elsewhere
The FRAMESET element specifies the layout of the main user
window in terms of rectangular subspaces.
Rows and columns
Setting the rows attribute defines the number of
horizontal subspaces in a frameset. Setting the
cols attribute defines the number of vertical subspaces. Both
attributes may be set simultaneously to create a grid.
If the rows attribute is not set, each column extends the
entire length of the page. If the cols attribute is not
set, each row extends the entire width of the page. If neither attribute is
set, the frame takes up exactly the size of the page.
Frames are created left-to-right for columns and top-to-bottom for rows.
When both attributes are specified, views are created left-to-right in the top
row, left-to-right in the second row, etc.
The first example divides the screen vertically in two (i.e., creates a top
half and a bottom half).
<FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>
The next example creates three columns: the second has a fixed width of 250
pixels (useful, for example, to hold an image with a known size). The first
receives 25% of the remaining space and the third 75% of the remaining
space.
<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>
The next example creates a 2x3 grid of subspaces.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...the rest of the definition...
</FRAMESET>
For the next example, suppose the browser window is currently 1000 pixels
high. The first view is allotted 30% of the total height (300 pixels). The
second view is specified to be exactly 400 pixels high. This leaves 300 pixels
to be divided between the other two frames. The fourth frame's height is
specified as "2*", so it is twice as high as the third frame, whose height is
only "*" (equivalent to 1*). Therefore the third frame will be 100 pixels high
and the fourth will be 200 pixels high.
<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>
Absolute lengths that do not sum to 100% of the real available space should
be adjusted by the user agent. When underspecified, remaining space should be
allotted proportionally to each view. When overspecified, each view should be
reduced according to its specified proportion of the total space.
Framesets may be nested to any level.
In the following example, the outer FRAMESET divides the available
space into three equal columns. The inner FRAMESET then divides the second
area into two rows of unequal height.
<FRAMESET cols="33%, 33%, 34%">
...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>
Authors may share data among several frames by including this data via an
OBJECT element. Authors should include the
OBJECT element in the HEAD element of a frameset
document and name it with the id attribute. Any document that is the
contents of a frame in the frameset may refer to this identifier.
The following example illustrates how a script might refer to an
OBJECT element defined for an entire frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>This is a frameset with OBJECT in the HEAD</TITLE>
<!-- This OBJECT is not rendered! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>
<!-- In bianca.html -->
<HTML>
<HEAD>
<TITLE>Bianca's page</TITLE>
</HEAD>
<BODY>
...the beginning of the document...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...the rest of the document...
</BODY>
</HTML>
Attribute definitions
- name = cdata [CI]
- This attribute assigns a name to the current frame. This name may be used
as the target of subsequent links.
- longdesc = uri [CT]
- This attribute specifies a link to a long description of the frame. This
description should supplement the short description provided using the
title attribute, and may be particularly useful for non-visual user
agents.
- src = uri [CT]
- This attribute specifies the location of the initial contents to be
contained in the frame.
- noresize [CI]
- When present, this boolean attribute tells the user agent that the frame
window must not be resizeable.
- scrolling =
auto|yes|no [CI]
- This attribute specifies scroll information for the frame window. Possible
values
- auto: This value tells the user agent to provide scrolling
devices for the frame window when necessary. This is the default value.
- yes: This value tells the user agent to always provide
scrolling devices for the frame window.
- no: This value tells the user agent not to provide scrolling
devices for the frame window.
- frameborder =
1|0 [CN]
- This attribute provides the user agent with
information about the frame border. Possible values:
- 1: This value tells the user agent to draw a separator between
this frame and every adjoining frame. This is the default value.
- 0: This value tells the user agent not to draw a separator
between this frame and every adjoining frame. Note that separators may be drawn
next to this frame nonetheless if specified by other frames.
- marginwidth = pixels [CN]
- This attribute specifies the
amount of space to be left between the frame's contents in its left and right
margins. The value must be greater than zero (pixels). The default value
depends on the user agent.
- marginheight = pixels [CN]
- This attribute specifies the amount of space to be left between the frame's
contents in its top and bottom margins. The value must be greater than zero
(pixels). The default value depends on the user agent.
Attributes defined elsewhere
The
FRAME element defines the contents and appearance of a single
frame.
The src attribute specifies the initial document the frame will
contain.
The following example HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>
should create a frame layout something like this:
------------------------------------------
|Frame 1 |Frame 3 |Frame 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-------------| | |
|Frame 2 | | |
| | | |
| | | |
------------------------------------------
and cause the user agent to load each file into a separate view.
The contents of a frame must not be in the same document as the frame's
definition.
ILLEGAL EXAMPLE:
The following frameset definition is not legal HTML since the contents of the
second frame are in the same document as the frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME src="contents_of_frame1.html">
<FRAME src="#anchor_in_same_document">
<NOFRAMES>
...some text...
<H2><A name="anchor_in_same_document">Important section</A></H2>
...some text...
</NOFRAMES>
</FRAMESET>
</HTML>
Visual rendering of a frame
The following example illustrates the usage of the decorative FRAME
attributes. We specify that frame 1 will allow no scroll bars. Frame 2 will
leave white space around its contents (initially, an image file) and the frame
will not be resizeable. No border will be drawn between frames 3 and 4. Borders
will be drawn (by default) between frames 1, 2, and 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html" scrolling="no">
<FRAME src="contents_of_frame2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contents_of_frame3.html" frameborder="0">
<FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>
Note. For information about current practice in
determining the target of a frame, please consult the notes on frames in the
appendix.
Attribute definitions
- target = frame-target [CI]
- This attribute specifies the name of a frame where a document is to be
opened.
By assigning a name to a frame via the name attribute, authors can
refer to it as the "target" of links defined by other elements. The target
attribute may be set for elements that create links (A,
LINK), image maps (AREA), and forms (FORM).
Please consult the section on
target frame names for information about recognized frame names.
This example illustrates how targets allow the dynamic modification of a
frame's contents. First we define a frameset in the document
frameset.html, shown here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="fixed" src="init_fixed.html">
<FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>
Then, in init_dynamic.html, we link to the frame named
"dynamic".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with anchors with specific targets</TITLE>
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to
<A href="slide2.html" target="dynamic">slide 2.</A>
...more document...
<P>You're doing great. Now on to
<A href="slide3.html" target="dynamic">slide 3.</A>
</BODY>
</HTML>
Activating either link opens a new document in the frame named "dynamic"
while the other frame, "fixed", maintains its initial contents.
When many links in the same document designate the same target, it is
possible to specify the target once and dispense with the target
attribute of each element. This is done by setting the target
attribute of the BASE element.
We return to the previous example, this time factoring the target
information by defining it in the BASE element and removing it from
the
A elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with BASE with a specific target</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to <A href="slide2.html">slide 2.</A>
...more document...
<P>You're doing great. Now on to
<A href="slide3.html">slide 3.</A>
</BODY>
</HTML>
User agents should determine the target frame in which to load a linked
resource according to the following precedences (highest priority to
lowest):
- If an element has its
target attribute set to a known frame, when the
element is activated (i.e., a link is followed or a form is processed), the
resource designated by the element should be loaded into the target frame.
- If an element does not have the target attribute set but the
BASE element does, the BASE element's target
attribute determines the frame.
- If neither the element nor the BASE element refers to a target,
the resource designated by the element should be loaded into the frame
containing the element.
- If any target attribute refers to an unknown frame F, the
user agent should create a new window and frame, assign the name F to
the frame, and load the resource designated by the element in the new
frame.
User agents may provide users with a mechanism to override the target
attribute.
Authors should supply alternate content for those user agents that do not
support frames or are configured not to display frames.
Attributes defined elsewhere
-
id, class (document-wide identifiers)
- lang (language information),
dir (text
direction)
- title (element
title)
-
style (inline style
information)
- onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup (intrinsic events)
The
NOFRAMES element specifies content that should be displayed only by
user agents that do not support frames or are configured not to display frames.
User agents that support frames must only display the contents of a
NOFRAMES declaration when configured not to display frames. User
agents that do not support frames must display the contents of
NOFRAMES in any case.
The
NOFRAMES element is part of both the transitional and frameset DTDs. In a
document that uses the frameset DTD, NOFRAMES may be
used at the end of the FRAMESET section of the document.
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<P>Here is the <A href="main-noframes.html">
non-frame based version of the document.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
NOFRAMES may be used, for example, in a document that is the source
of a frame and that uses the transitional DTD. This allows authors to explain
the document's purpose in cases when it is viewed out of the frameset or with a
user agent that doesn't support frames.
The longdesc attribute allows authors to make frame
documents more accessible to people using non-visual user agents. This
attribute designates a resource that provides a long description of the frame.
Authors should note that long descriptions associated with frames are attached
to the frame, not the frame's contents. Since the contents may vary
over time, the initial long description is likely to become inappropriate for
the frame's later contents. In particular, authors should not include an image
as the sole content of a frame.
The following frameset document describes two frames. The left frame
contains a table of contents and the right frame initially contains an image of
an ostrich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A poorly-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_of_contents.html">
<FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>
Note that the image has been included in the frame independently of any HTML
element, so the author has no means of specifying alternate text other than via
the longdesc attribute. If the contents of the right frame
change (e.g., the user selects a rattlesnake from the table of contents), users
will have no textual access to the frame's new content.
Thus, authors should not put an image directly in a frame. Instead, the
image should be specified in a separate HTML document, and therein annotated
with the appropriate alternate text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A well-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_of_contents.html">
<FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>
<!-- In ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>The fast and powerful ostrich</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
These ostriches sure taste good!
</OBJECT>
</HTML>
Attribute definitions
- longdesc = uri [CT]
- This attribute specifies a link to a long description of the frame. This
description should supplement the short description provided using the
title attribute, and is particularly useful for non-visual user
agents.
- name = cdata [CI]
- This attribute assigns a name to the current frame. This name may be used
as the target of subsequent links.
- width = length [CN]
- The width of the inline frame.
- height = length [CN]
- The height of the inline frame.
Attributes defined elsewhere
The
IFRAME element allows authors to insert a frame within a block of
text. Inserting an inline frame within a section of text is much like inserting
an object via the
OBJECT element: they both allow you to insert an
HTML document in the middle of another, they may both be aligned with
surrounding text, etc.
The information to be inserted inline is designated by the
src attribute of this element. The contents of the IFRAME
element, on the other hand, should only be displayed by user agents that do not
support frames or are configured not to display frames.
For user agents that support frames, the following example will place an
inline frame surrounded by a border in the middle of the text.
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<A href="foo.html">the related document.</A>]
</IFRAME>
Inline frames may not be resized (and thus, they do not take the
noresize attribute).
Note. HTML documents may also be embedded in other HTML
documents with the
OBJECT element. See the section on embedded documents for
details.
| 
Alignment, font styles, and horizontal rules
Contents