Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 12: Frames and Linked Windows




If you have mastered tables, you should enjoy frames and linked windows. These are now common but important parts of HTML. The objectives important to this chapter are:

  • using the target attribute in anchor tags
  • opening second and third browser windows
  • understanding frame components: frameset, frame, and noframe tags
  • displaying web pages in frames

This chapter covers two major topics. The first covers displaying pages in multiple windows. The second covers displaying multiple pages in a single window.

As an example, you will encounter the first phenomenon often on the CNN web site, where you find links that state they will open a second browser window. It is done with the TARGET attribute of the ANCHOR tag. The syntax is usually:

  <a href="document.htm" target="window_name">

where the new attribute, target, specifies the name of a window to place the contents of the specified document in. Got that? How do you know the name of a window that you haven't even opened yet? There are two possibilities. First, you specify a name. If there is already a window open with that name, its contents are replaced with the referenced document (provided that it is a browser window). If there is no window open with that name, you get a new window, it is given that name, a copy of the browser opens in it, and the browser displays the referenced document. In this way, you can open a window, load it with a document, or reload it with another document.

You can theoretically open unlimited numbers of windows with this method, but it is unwise to do so, because every user will run out of system resources to open one more window at some undetermined number. Also, it is a bad idea to take up too much screen real estate. Who knows what your reader wants to have on the screen at the same time?

A more common approach to having multiple documents displayed simultaneously is the use of frames. Frames are sections of a browser window. You begin a frame design by determining what you want displayed in how much of the screen, diagramming your design as on page 368. Each frame can display a separate document. It is also important to think about the documents being displayed in such frames when you make them, since you will only have so much screen to use. Frame 1 in figure 12.7, for example, would have a horrible time trying to display some of my pre-formatted text. Frame 3, on the other hand, might handle anything I have written for you thus far. Frames 2 and 4, could display my note pages in an acceptable width, but they are far too short to allow reading a long file with any comfort. Trust me, trying to read a long file in short window breeds hatred of the writer. This is why I do not use frames in my current presentations. I would rather you have more screen space and an easier time reading.

That said, let's think about frames. After you draw a design (on paper or in your mind), you create a master page for the presentation. In this page you lay out the design, using <frameset> tags instead of the usual <body> tags. The opening tag must use one of two attributes: cols or rows. A simple page could have only columns, or only rows, as illustrated on pages 370 and 372. This is unlikely in the "real" world, but it is illustrative of the values given to these attributes.

You need to specify how wide each column (or, how high each row) is to be. It is best to assign values to cols (or rows) based on a percentage of the screen, rather than actual pixel values, since you do not know the resolution the reader is using. If you use two columns, for example, you can even set the width for the first as a percentage of the width of the current window, and allow the second to fill the rest of the window by using a star like this:

  <frameset cols="25%,*">

This command would make the first column as wide as 25% of the browser window and the second would take up the balance. If you want all your divisions equally large, use all asterisks.

After the <frameset> tag, you use a separate <frame> tag for each column (or row) as on page 372. The <frame> tag is a single tag, and does not use a partner. What it does need is a src attribute specifying what to put in the frame. A value is given the the src attribute of each <frame> tag, which tells the browser what web page to load in that frame.

The <noframe> tag is a paired tag, and the pair enclose what to present to a browser that does not support frames. A more practical solution to the problem is to have a separate page for non-frame browsers. Odds are you won't get many hits on it.

On page 376, Ms. Lemay attacks the more likely situation of needing both rows and columns in your frameset. If you follow her discussion of the process, the example on page 383 can be constructed by creating a frameset inside a frameset. The outer frameset contains two columns. The inner frameset, which is in the second column, contains two rows. Her code to do this is on page 385. Note that she has set the height of her first column to 125 pixels. This actual pixel setting (as opposed to a percentage) is common for frames containing navigation graphics. Her major frames are set to more usual stars.

Like making tables, it is easy to get confused making frames. It is even easier, actually, since you can't see a frame unless you put something in it. This is why she uses the "dummy.html" file as the contents for each frame when designing.

Now, we return to the concept of a named screen area. Just as we can name a browser window, we can name a frame and direct that something be placed in it. The concept is illustrated on page 386, using the name attribute of the <frame> tag. This creates a target for us to send pages to. On the bottom of page 386, we see the use of the target attribute of the <a> tag to send a document to the named frame when the link is clicked. Easy, right? Well, practice it a bit. To keep your sanity, do not give the same name to two frames, two windows, or two anything elses.

Finally, the chapter covers Magic (or reserved) target names. Four Magic targets are described on page 389. These can be used to load a document in a specific place. Three useful ones are:

  • _blank - will load the document into a new window
  • _self - will load the document into the window or frame holding the anchor
  • _top - this target name has the effect of breaking out of a frameset, displaying the designated page in an ordinary browser window

The last topic in the chapter is floating frames. Laura cautions us that this technique is not recognized by all browsers. A floating frame, if supported, is meant to allow you to insert a frame into a standard HTML document. Following Laura's example, I will try to show you one below. You should see a small frame with one of my white bullets in it.

  • Click here to show a red ball in the frame.
  • Click here to show a blue ball in the frame.
  • Click here to show a gold ball in the frame.