Web Publishing
Frames
Ted Williams, MCSD, MCSE

List of Sections

Links to the sections below:
5.0 Introduction to Frames
5.1 Using Frames
5.2 More Complex Examples
5.3 Floating Frames
5.4 References

5.0 Introduction to Frames

Frames provide a way of splitting your browser display area into two or more separate windows. This technique is preferable to using tables for long pages in that each window can be scrolled separately. Frames are often used to provide an explorer window with many links in the left window and a viewing area in the right window. The user can scroll through the links or the display window independently. This technique is used for this presentation on my web site.

Frames were first introduced in Netscape Navigator 2.0. They were added to Internet Explorer 3.0 but frames were not added to the HTML 3.2 specification. It was not until the HTML 4.0 specification that frames were officially adopted. Only Netscape browsers at or greater than version 2.0, Internet Explorer at or greater than version 3.0 or any browser that supports the HTML 4.0 specification support frames. If your audience includes users with older browsers, you may wish to avoid frames.

For an introduction to frames, consult an HTML 4.0 text. Some of my favorite references are listed below, including some web links. Rather than reproducing yet another introduction to frames, I will concentrate on some of the often overlooked aspects of using frames which are presented below in the form of FAQs (Frequently Asked Questions).

Some of the considerations in using frames are:

Using Frames - Some examples of frames in practice.
More Complex Frames - Some more complex examples.
Floating Frames - Some examples of floating frames.

5.1 Using Frames

How do frames differ from a standard web page without frames?
There are only three new tags associated with frames: frameset, frame, and noframe. As shown in the next example, note the following new tags:

The body tag is replaced with a frameset tag that encloses the frame and noframe tags. The frameset tag specifes the number and the shape of the frames (i.e., the windows) in the browser display area. The frameset can also set the characteristics of the borders around the frames. Framesets can be nested inside framesets.
The frame tag usually includes a name attribute and a source attribute (SRC). The source attribute specifies the web page to use in the window. The browser first fetches initial page with a header and frameset. Then the browser fetches the page specified by the SRC attribute and displays that page inside that frame. This process is repeated for each frame until the entire browser display area is filled. The name is used as noted in a question below to specify which window is to be used by a link.
The noframe tag specifies the contents of the page for those cases where a browser is not frame-capable. Although this tag is optional, it is highly recommended to make at least a part of the page available. For example, the content of the tag may be a short message including a link to just the main frame.

What happens if a frameset tag is included after a body tag?

The result is dependent upon the browser. Most browsers will ignore any type of frame tag after a body tag.

How can I add a navigation frame to my web page?
It is easy to get lost in a web site with interconnected links between pages. You will make your web site easier to navigate with a frame on the left showing links to related pages at your site. Users are accustomed to this format from their experience with Windows Explorer. And it is not hard to accomplish. Consider the following example:

<HTML>
<HEAD>
<TITLE>Example of a frame</TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
<FRAME NAME="menu" SRC="YourLinks.html">
<FRAME NAME="main" SRC="YourText.html">
<NOFRAMES>
Sorry, this document can only be viewed with a frames-capable browser.
<A HREF="0005pFrames.html">Link to presentation.</A>
</NOFRAMES>
</FRAMESET>
</HTML>

There are only three new tags required for setting up a frame:

Frameset. A frameset is a tag that holds a collection of frames, one for each window that you required. The frames are ordered from left-to-right. That is, the first frame included in the frameset is on the left. The next frame is placed to the right. If there are any frames left over, they are added below the first set of frames. Scrollbars automatically appear in any frame where all of the text will not fit into the window. The cols attribute determines the proportion of the page used by the windows. In this case there are only two windows side-by-side. The first frame takes up 20% of the available browser display width and the rest (80%) is allocated to the second frame on the right. The rows attribute may be used to divide the display area into horizontal sections, or, you can do both.
Frame. The frame tag includes a name attribute and a src attribute. The src attribute references the file with the HTML text that goes into the frame. The name attribute will be used in setting up the links page as described below.
Noframes. Some browsers do not support frames. Those that do not support frames will show ignore the frames and display the text in the noframes tag. We have provided them a link to the text area so that they can still view the page but they will not be able to view the navigation frame.

Add links to other pages or to various sections of YourText.html in the YourLinks.html. For example, consider the following links:

<HTML>
<HEAD>
<TITLE>Example of YourLinks.html</TITLE>
</HEAD>
<BODY>
<A TARGET="main" HREF="YourText.html">Link to your text.</A><BR>
<A TARGET="main" HREF="YourText.html#Section5">Link to a section.</A>
</BODY>
</HTML>

The TARGET attribute is used to identify the frame to be used for showing the linked page. Recall that the name of the second frame in the above frameset was named "main". By setting the value of TARGET to main, the linked page YourText.html will be displayed in the main window. The next link will cause the browser to look for a name or id of "Section5" in the YourText.html page. The text in the right window will be positioned with Section5 at the top.

Can I change the borders around a frame?
Yes, you can adjust the borders using attributes in either the frameset tag or in the individual frame tags. In a frame tag or a frameset tag, the allowed border attributes are:

FRAMEBORDER. If 0 or no, the border is turned off. If 1 or yes, the border is turned on.
BORDERCOLOR. Sets the color of the border. Netscape only.
BORDER. Sets the width of the border in pixels. Netscape only.
FRAMESPACING. Sets the width of the border in pixels. Internet Explorer only.

If you want to set the border width for both types of browsers, place both the BORDER attribute and the FRAMESPACING attribute in the frame or frameset tag with identical settings. The browser will ignore attributes that it does not understand, so both browsers will work correctly.

Consider the following example:

<HTML>
<HEAD>
<TITLE>Example of a frame</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=0 BORDERCOLOR="yellow" COLS="20%,*">
<FRAME FRAMEBORDER=1 NAME="menu" SRC="YourLinks.html">
<FRAME NAME="main" SRC="YourText.html">
</FRAMESET>
</HTML>

Note the following rules of precedence:

Attributes in a frameset are overidden by those in an inner nested frameset.
Attributes in any frameset are overidden by those in a frame.

How do links work within frames?
In the above example, YourLinks.html contains hypertext links to other pages on your web site. Consider the following links contained inside

<A HREF="AnotherPage.html">AnotherPage</A><BR>
<A TARGET="main" HREF="AnotherPage.html">YetAnotherPage</A><BR>

In the first case, AnotherPage.html replaces the same window. This is not what we want. The second hypertext link uses the name of the right frame (see the above example) as the target. The target attribute has the effect of causing AnotherPage.html to replace the page in the main frame, rather than the current frame.

5.2 More Complex Examples

How can I create a new window rather than using an existing frame?
If the value of the target attribute in a hyperlink (see the above example) is a new name that is not the name of any existing frame, a new window is created with that name. Any other links that are selected with the same target value will replace the page in the newly created window.

How can I cancel the extra frames if the user selects a link to another web site?
When the user is selecting frames in the current web site, a navigation frame is helpful. But, when the user selects a link to another web site, the navigation frame is useless, even misleading. For a link to another web site, be sure to use a target of _top. If the link is selected, the top-level window (the entire browser window in this case) will be loaded with the page specified by the link's URL. For example:

<A TARGET="_top" HREF="http://www.some.com/">Some.com</A><BR>

will cause the page specified by the URL to be loaded into the top-level browser window.

Can the user resize a frame?
Yes, the user may click on a border and drag the border of a frame. To disable this feature, include the NORESIZE attribute in the frame tag.

What happens if the page specified by the SRC attribute in a link tag or a frame tag has two frames in it?
The referenced frame is split into two frames. Note that the title of the browser window is the title in the most recently loaded frame in the display. To maintain a consistent appearance, it is best to make all of the titles in the referenced pages the same.

Do not reference a parent frameset inside an inner (nested) frame. The browser will get dizzy.

5.3 Floating Frames

What are "floating" or "inline" frames?
Up until now, frames could not be included in the body of a page. Internet Explorer 3.0 and browsers that support the HTML 4.0 standard allow an inline frame in the body of a page. The frame is treated in much the same way that an inline image is treated. The tag for an inline frame is <iframe>. This tag defines a rectangular region within the document that can display a separate HTML document, including scrollbars and borders (but no title).

The SRC attribute in the iframe tag specifies the URL of the document to be displayed inside the iframe. The content of the iframe tag can include text and links that are only displayed when the browser is non-compliant. Internet Explorer 4.0 and above will display the referenced document instead.

Why would I ever use an inline frame?
You will probably want to avoid inline frames until more browsers support this feature. However, consider the following possibilities:

Insert a sidebar with comments into a page.
Display a table of data next to some surrounding text.
Compose a table once, but include it in several separate pages.
Use it like a picture-in-picture feature.

What attributes are essential in an Iframe tag?
Consider the following HTML snippet to add some canned animation in a 200x100 pixel window with text wrapped around the right side:

...
<IFRAME SRC="animation.html" height=200 width=100 align=left>
You are viewing this text because your browser does not support inline frames. Select the
following < HREF="animation.html">link</A>.  To view inline frames use
Internet Explorer 3.0 or greater.
</IFRAME>
...

Some observations about the above text:

The SRC attribute is required. It specifies the URL of the document to be loaded into the inline frame.
The height and width attributes are required; otherwise, each browser will use some arbitrary (different) size.
The align attribute is optional. If you omit this attribute, the surrounding text will not flow around the frame.
You may want to specify a large or unusual font for the above text to cause it to stand out from the surrounding text in a non-compliant browser.
Remember, many browsers do not support inline frames. Make sure that you use them sparingly until more browsers meet the HTML 4.0 specification.

5.4 References

HTML - Teach Yourself Web Publishing with HTML 4 in 21 Days, Laura Lemay, Sams Publishing. A new professional edition is now available. Touches on a wide variety of topics. A good introductory text.
HTML - The Definitive Guide, Chuck Muscianno, O'Reilly. This book includes a clear description of the HTML specification with examples. It is especially useful as a guide to the features that have been implemented by various browsers.
HTML - Using HTML4, XML, and Java 1.2, Eric Ladd et al, QUE. A comprehensive book that touches on a wide variety of topics. Most topics are not treated in depth.
HomeSite 4.5 - Help tab - HTML Reference
HTML tutorial - html.digitalsea.net/
HTML tutorial - www.2kweb.net/html-tutorial

Suggestions? Questions about forms? Send email to: webmaster@tlwilliams.net
Last update: May 7, 2000