Frames

If you are looking at a window with frames, you are actually looking at several HTML documents. The first one is the document that specifies the division of the page into frames and names the source file for each frame. It looks like this:

<HTML><HEAD>
<TITLE>This is a frametest</TITLE>
</HEAD>

<FRAMESET COLS=25%,*>

<FRAMESET ROWS=30%,*,30%>

<FRAME SRC="content_a.html" NAME="aaaa" SCROLLING="no">
<FRAME SRC="content_b.html" NAME="bbbb" SCROLLING="yes">
<FRAME SRC="content_c.html" NAME="cccc">

</FRAMESET>

<FRAME SRC="content_d.html" NAME="dddd" SCROLLING="auto">

<NOFRAMES>This document can only be viewed by a browser capable of using Frames.
Sorry. you will have to return to the chapter on <A HREF="../frames.php">Frames</A>.</NOFRAMES>

</FRAMESET>
</HTML>

The first thing you can notice is that the document has the usual <HTML> and <HEAD> tags, but it does not have a <BODY> tag. This tag is replaced by the <FRAMESET> tag.

The first tag to pay attention to, is <NOFRAMES>. This tag is ignored by browsers that can handle frames, but it is the only bit that other browsers display. You can use this to display a message for users of browsers that do not support frames. You can include a link here to a 'frame-less' version or (like I did here) a link back to the referring page.

The <FRAMESET> tag defines two or more frames, in rows or in columns. As you can see, there are two nested sets of frames here. The first one divides the window vertically in two columns. The second, nested, set divides the first column horizontally in three rows. That is why the first <FRAMESET> tag has a COLS attribute and the second one has a ROWS attribute. You can nest as many framesets as you want.

The ROWS and the COLS attribute can get values in the same way. You can give any number of values, separated by commas. If you give 4 values, that will result in 4 columns or rows. If you give 2 values, that will result in 2 columns or rows. Values can be in percentage (for example 25%), in pixels (simply a number) or just an asterisk (like *). An asterisk means that the size is determined by the browser, depending on the space available. You can also assign a multiplier to an asterisk. For example, COL="*,*,2*" will result in three columns, of which the third one is twice as wide as the first and the second one.

It is also possible to use the values in any combination. COLS="20%,30,2*,*" will result in a first column which has 20% of the width of the window and a second column which is 30 pixels wide. The remaining space will be divided between the third and the fourth column, whereby the third column will be twice as wide as the fourth one.

The <FRAME> tag defines the source file for the frame and the name of the frame. The source file for the frame is a normal HTML file and defined in the SRC attribute. The name of the frame is defined in the NAME attribute. The name can be used when linking to a frame.

You can also see that the <FRAME> tags have a SCROLLING attribute. This attribute defines is the frame will get scroll bars. If the value is "no", the frame will not get scroll bars, even if the source document does not fit in. If the value is "yes" the frame will get scroll bars, even if the document is so small that it is not necessary to have them. The final possibility is "auto". This value will give the frame scroll bars only if necessary. This is the default.

Now go and see how this example looks.

Source: content_a.html

The first file with contents for the frames has nothing but a link back. This is the file that is displayed in the top frame of the left column. It looks like this:

<HTML><HEAD>
</HEAD>

<BODY>

<P><A HREF="../frames.php#back" TARGET="_top">Back to the HTML guide</A></P>

<P>This link will bring you back the chapter about frames in the original
window.</P>

</BODY></HTML>

The HREF attribute specifies the file to link to. The TARGET attribute can be used to specify how the document should be displayed. If you write the name of a frame here (see NAME attribute above) the file that is linked to is displayed in that frame. If the value of the TARGET attribute is "_top", as it is here, the new document is displayed in the current window without frames. Without the "_top" attribute, the document would be displayed in the frame the link is in.

Other possible values for the TARGET attribute are "_blank" and "_self" (the latter is the default). If the value is "_blank", the document will be displayed in a new window. If the value is "_self", the document will be displayed in the same frame that the link was first in.

Source: content_b.html

This is the source of the file that is displayed in the middle frame of the column on the left. It is an example of the use of the "_blank" value for the TARGET attribute. Clicking the link will open the chapter about frames (the one you are reading now) in a new window.

<HTML><HEAD>
</HEAD>

<BODY>

<P><A HREF="../frames.php#back" TARGET="_blank">Back to the HTML guide</A></P>

<P>This will give you the chapter about frames in a new window! After you clicked here you can see that you have two open windows.</P>

</BODY></HTML>

Source: content_c.html

This is the third source file. This one uses the TARGET="dddd" attribute. You will remember that "dddd" is the name given to the right frame. If you click any of the links in this frame they will therefore be displayed in the big frame on the right which has a NAME="dddd" attribute.

<HTML><HEAD>
</HEAD>

<BODY>

<P>Some chapters of the HTML guide.</P>

<P>* <A HREF="../intro.php" TARGET="dddd">Introduction</A><BR>
* <A HREF="../body.html" TARGET="dddd">Body text, pre-formatted text and font sizes</A><BR>
* <A HREF="../images.php" TARGET="dddd">Images</A></P>

</BODY></HTML>

Source: content_d.html

Finally, this is the fourth source file.

<HTML><HEAD>
</HEAD>

<BODY>

<CENTER><H1>Frametest</H1></CENTER>

<H3>If you click any of the chapters of the HTML Guide in the lower left
frame, they will appear in this frame.</H3>

<P>Or you can click to get my <A HREF="../../index.php" TARGET="_self">homepage</A>
displayed in this frame.</P>

</BODY></HTML>

This source file gives an example of the TARGET="_self" attribute. If you click the link, my homepage will be displayed in that frame.

Inline frames

The HTML 4 specification gives the possibility to do inline frames, also called floating frames. Here is a simple example of a floating frame:

The frame looks as follows:

For the SRC attribute you can use absolute and relative links and you can link to documents on any server, just as with normal frames. The WIDTH and HEIGHT attribute set the size of the frame. According to the HTML 4 specification, inline frames may not be resized, hence there is no NORESIZE attribute necessary or possible here. Inline frames have a FRAMEBORDER attribute for setting the border around the frame. FRAMEBORDER can have a value of "0" which indicates not to draw a border or "1", which means a border is drawn around the frame.

<IFRAME SRC="tables.php" WIDTH="300" HEIGHT="100" FRAMEBORDER="1" SCROLLING="yes"><B>Sorry, your browser does not support inline frames.</B></IFRAME>

In this example you also see text between the IFRAME opening and closing tags. This text is displayed in browsers that do not support inline frames.

The SCROLLING attribute tells the browser whether or not to use scroll bars. In case you specify "auto" there will be scrolling bars if necessary. "yes" means that there will be scroll bars even if that is not necessary, as in this example. Finally, "no" means there will be no scroll bars available even if the contents of the frame cannot be displayed completely.

You can use normal links to display different text or images in the inline frame. For this you need to name your frame with a NAME attribute:

<IFRAME SRC="" NAME="myinlineframe" WIDTH="300" HEIGHT="100" FRAMEBORDER="1" SCROLLING="yes" ALIGN="right"><P CLASS="example"><B>Sorry, your browser does not support inline frames.</B></P></IFRAME>

<P><A HREF="styles.common.css" TARGET="inlineframe">Show current style sheet</A><BR>

<A HREF="css.gif" TARGET="inlineframe">Show CSS logo</A></P>

Show current style sheet

Show CSS logo

If you click the links you will see either the stylesheet or the logo appear in the inline frame. Note that the TARGET attribute in the link refers to the NAME attribute of the inline frame. By the way, inline frames can only be aligned left or right, not center.

Feedback welcome...

Please let me know your opinion about this guide, information you would like to be added or any errors you have discovered. Click here.

Open standards...

This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.