HTML: The Definitive Guide

Previous Chapter 12
Frames
Next
 

12.2 Frame Tags

There are three new HTML tags used by both Netscape and Internet Explorer to create a frame document: <frameset>, <frame>, and <noframes>. In addition, Internet Explorer provides the <iframe> tag, which you may use to create inline, or floating, frames.

A frameset is simply the collection of frames that make up the browser's window. Column- and row-definition attributes for the <frameset> tag let you define the number and initial sizes for the columns and rows of frames. The <frame> tag defines which document--HTML or otherwise--initially goes into the frames within those framesets, and is where you may give the frame a name to use for document hypertext links.

Here is the HTML source that was used to generate Figure 12.1:

<html>
<head>
<title>Frames Layout</title>
</head>
<frameset rows="60%,*" cols="65%,20%,*">
  <frame src="frame1.html">
  <frame src="frame2.html">
  <frame src="frame3.html" name="fill_me">
  <frame scrolling=yes src="frame4.html">
  <frame src="frame5.html">
  <frame src="frame6.html">
  <noframes>
    Sorry, this document can be viewed only with a 
    frames-capable browser.
    <a href = "frame1.html">Take this link</a>
    to the first HTML document in the set.
  </noframes>
</frameset>
</html>

Notice a few things in the simple frame example and its rendered image (Figure 12.1). First, the order in which the browser fills the frames in a frameset goes across each row. Second, frame 4 sports a scrollbar because we told it to, even though the contents may otherwise fit without scrolling. (Scrollbars automatically appear if the contents overflow the frame's dimensions, unless explicitly disabled with the scrolling attribute in the <frame> tag.) [the section called "The <frame> Tag"]

Another item of interest is the name attribute in one of the frame tags. Once named, you can reference a particular frame as the location in which to display a hypertext-linked document. To do that, you add a special target attribute to the anchor (<a>) tag of the source hypertext link. For instance, to link a document called new.html for display in frame 3, which we've named "fill_me", the anchor looks like this:

<a href="new.html" target="fill_me">

If the user chooses the link, say in frame 1, the new.html document will replace the original frame3.html contents in frame 3. [the section called "Named Frame or Window Targets"]

Finally, although Netscape and Internet Explorer both support frames, it is possible that some other browser users will try and view your frame documents. That's why each of your key frame documents should provide a back door to your HTML document collection with the <noframes> tag. Frame-compatible browsers display your frames; non-compatible browsers display the alternative <noframes> content.

What's in a Frame?

Anyone who has opened more than one window on their desktop display to compare contents or operate interrelated applications knows instinctively the power of frames.

One simple use for frames is to put content that is common in a collection, such as copyright notices, introductory material, and navigational aids, into one frame, with all other document content in an adjacent frame. As the user visits new pages, each loads into the scrolling frame, while the fixed-frame content persists.

A richer frame document-enabled environment provides navigational tools for your document collections. For instance, assign one frame to hold a table of contents and various searching tools for the collection. Have another frame hold the user-selected document contents. As users visit your pages in the content frame, they never lose sight of the navigational aids in the other frame.

Another beneficial use of frame documents is to compare a returned HTML form with its original for verification of the content by the submitting user. By placing the form in one frame and its submitted result in another, you let the user quickly verify that the result corresponds to the data entered in the form. If the results are incorrect, the form is readily available to be filled out again.


Previous Home Next
An Overview of Frames Book Index Frame Layout

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell