Contents
HTML frames allow authors to present documents in multiple views. Views 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 instance, to use three frames: one for a static banner, one for a navigation menu, and one for a main view that can be scrolled though or replaced by clicking on an item in the navigation frame.
An HTML document with frames has a slightly different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY. A document with frames has a HEAD, a FRAMESET, and an optional BODY.
The FRAMESET section of a document specifies the layout of views in the main user agent window.
The BODY section that follows the FRAMESET declaration provides alternate content for user agents that do not support frames or are configured not to display frames. We discuss alternate content in more detail below.
Elements that might normally be placed in the BODY element must not appear before the first FRAMESETelement or the FRAMESET will be ignored.
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?)> <!ATTLIST FRAMESET -- absolute pixel values, percentages or relative scales. -- rows CDATA #IMPLIED -- if not given, default is 1 row -- cols CDATA #IMPLIED -- if not given, default is 1 column -- onload %Script #IMPLIED -- all the frames have been loaded -- onunload %Script #IMPLIED -- all the frames have been removed -- >
Start tag: required, End tag: required
Attribute definitions
Attributes defined elsewhere
The FRAMESET element specifies the layout of the main user window in terms of rectangular subspaces.
Setting the rows attribute defines the number of horizontal subspaces. 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.
These two attributes have values that are comma-separated lists of lengths. A length may be absolute (given as a number of pixels or a percentage of the screen) or a relative length, indicated by the form "i*", where "i" is an integer. When allotting space to rows and columns, user agents allot absolute lengths first, then divide up remaining space among relative length rows or columns. The value "*" is equivalent to "1*".
Views 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 "*" (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>
<!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY> <!ATTLIST FRAME name CDATA #IMPLIED -- name of frame for targetting -- src %URL #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels #IMPLIED -- margin widths in pixels -- marginheight %Pixels #IMPLIED -- margin height in pixels -- noresize (noresize) #IMPLIED -- allow users to resize frames? -- scrolling (yes|no|auto) auto -- scrollbar or none -- >
Start tag: required, End tag: forbidden
Attribute definitions
Attributes defined elsewhere
The FRAME element defines the contents and appearance of a single view.
The src attribute specifies the initial document the frame will contain. It is not possible for the contents of a frame to be in the same document as the frame's definition.
The following example example HTML document:
<HTML>
<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>
will 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.
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.
<HTML> <FRAMESET cols="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#anchor_in_same_document"> </FRAMESET> <BODY> ...some text... <H2><A name="anchor_in_same_document">Important section</A></H2> ...some text... </BODY> </HTML>
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.
<HTML>
<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" border="0">
<FRAME src="contents_of_frame4.html" border="0">
</FRAMESET>
</HTML>
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:
<HTML> <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".
<HTML>
<BODY>
...beginning of the document...
Now you may advance to
<A href="slide2.html" target="dynamic">slide 2.</A>
...more document...
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.
Note: Once a frame's content is changed dynamically, the original frameset definition no longer reflects the true contents of each frame; the frameset definition does not change.
The is currently no way to encode the entire state of a frameset in a URL. Therefore, many user agents do not allow users to assign a bookmark to a frameset.
Framesets may make navigation forward and backward through your user agent's history more difficult for users.
When many links in the same document designate the same target, it is possible to specify the target once and dispense with the target attributes in each element. This is done by setting the target attribute of the BASE element.
We return to the previous example, this time factorizing the target information by defining it in the BASE element and removing it from the A elements.
<HTML>
<HEAD>
<BASE target="dynamic">
</HEAD>
<BODY>
...beginning of the document...
Now you may advance to <A href="slide2.html">slide 2.</A>
...more document...
You're doing great. Now on to
<A href="slide3.html">slide 3.</A>
</BODY>
</HTML>
There are several methods for making a frame the target of a link. Here we define their interaction.
User agents may provide users with a mechanism to override the target attribute.
Except for the reserved names listed below, target names must begin with an alphabetic character (a-zA-Z). User agents should ignore all other target names.
The following target names are reserved and have special meanings.
We strongly recommend providing alternate versions of content for those user agents that do not support frames or are configured not to display frames.
User agents that do not support frames must display the BODY section that follows the outermost FRAMESET of a document. User agents that do support frames must ignore this BODY unless currently configured not to display frames.
<!--
The following is quite complicated because of the mixed
content model. However it's actually only meant to contain
either BODY or %block.
-->
<!ELEMENT NOFRAMES - -
(#PCDATA,((BODY,#PCDATA)|
(((%blocklevel)|%font|%phrase|%special|%formctrl),%block)))>
Start tag: required, End tag: required
The NOFRAMES element specifies content that should be displayed only when frames are not being displayed. 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.
Suppose we have a sample frameset defined in "top.html" that designates a document ("main.html") and a special table of contents ("table_of_contents.html") related to the main document. Here is "top.html":
<HTML> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> </FRAMESET> </HTML>
What happens when the user reads "top.html" and the user agent is not displaying frames? The user won't see anything since we have not specified alternate content in the BODY of "top.html". If we insert "table_of_contents.html" and "main.html" directly in the BODY, we solve the problem of associating the two documents, but we may cause user agents that support frames to retrieve the same data twice: one copy associated with the frameset and one copy inserted in the BODY.
It is more economical to include the table of contents at the top of "main.html" within a NOFRAMES element:
<!-- This is main.html --> <HTML> <BODY> <NOFRAMES> ...the table of contents here... </NOFRAMES> ...the rest of the document... </BODY> </HTML>
and to link to "main.html" from "top.html" for the case when frames are not displayed:
<!-- This is top.html --> <HTML> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> </FRAMESET> <BODY> Click <A href="main.html">here</A> for a non-frames version. </BODY> </HTML>
<!ELEMENT IFRAME - - %block> <!ATTLIST IFRAME name CDATA #IMPLIED -- name of frame for targetting -- src %URL #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels #IMPLIED -- margin widths in pixels -- marginheight %Pixels #IMPLIED -- margin height in pixels -- scrolling (yes|no|auto) auto -- scrollbar or none -- align %IAlign #IMPLIED -- vertical or horizontal alignment -- height %Length #IMPLIED -- suggested height -- width %Length #IMPLIED -- suggested width -- >
Start tag: required, End tag: required
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 rendered 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. Click to retrieve
<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 including files in HTML documents for details.