HTML Frames Overview

Do you really need to use the <FRAMESET> tag? You can use a table to format the information into areas, complete with borders, on the browser screen. But remember: Although ðr2 and cornbread are round, tables are static, and frames can be dynamic. For the mathematically challenged, this means that you can scroll information within frames.

Each frame is similar to a separate browser screen. Depending on the attributes you give it, a frame can act just like a standard browser screen, or it can be frozen into Elliot Ness untouchability.

Frames are still not part of the public standard DTD for HTML. This means there is not a universal standard to follow. However, both Netscape and Microsoft have implemented frames support in their browsers (since version 2.0 of each). As long as you are sure the viewers of your site have a compatible browser, then frame away. But if your audience uses a wide variety of browsers, you may want to shy away from frames until they become DTD material.

Frames have numerous uses, such as:

In short, frames are flexible. They enable you to keep constant chunks of information on the browser display while permitting users to scroll through large amounts of text or dynamic content. You find out how to set up the structures we've just described a bit later in the chapter. Before you jump ahead, you need to understand the HTML markup tags that make frames possible.

HTML Frame Markup

The HTML tags for frames are listed in the following subsections, along with discussions of their proper syntax and use. Frames have good uses and better uses, which we know you'll grasp quickly. After you figure out the uses of frames, you can hang some nice frames around your own Web site! We begin with a discussion of the structure of a document that includes frames and then look at the tags that you use to make the frames. Frame-ward ho!

The Frame Document structure

A Frame Document can simply be a normal HTML document in which the <BODY. . .> container is replaced by a <FRAMESET. . .> container that characterizes the HTML sub-documents — frames — that constitute the Web page. (Simply put: You use <FRAMESET> instead of <BODY> for your content.) The basic Frame Document starts within the following overall HTML framework. (Don't ya just love/hate puns?)

<HTML>

<HEAD>

</HEAD>

<FRAMESET>

Your frame information goes here.

</FRAMESET>

</HTML>

If you're a nice person and want to provide something for frame-challenged browsers to display, you can use the <NOFRAMES> tag to include your existing, nonframed HTML document. When you use the <NOFRAMES> tag , you must include the <BODY> tag:

<NOFRAMES>

<BODY>

The nonframed HTML code for your page goes here.

</BODY>

</NOFRAMES>

Frame syntaxFrame syntax is quite similar to the syntax you use within HTML tables. In fact, you can think of frames as movable and dynamically updateable tables. After you start using frame-related markup in your own Web pages, you'll find the syntax to be pretty straightforward stuff.

<FRAMESET>

<FRAMESET> is the main container for a frame. Because a frame document uses <FRAMESET> instead of <BODY>, the <FRAMESET> tag immediately follows the </HEAD> tag. If any <BODY> tags appear before the <FRAMESET> tag pair, the <FRAMESET> tag is ignored. Between the outermost <FRAMESET> . . . </FRAMESET> tags, you can use only nested <FRAMESET> tags, <FRAME> tags, or <NOFRAMES> tags.

ROWS="n | % | *, n | % | *, n | % | *, --"

The ROWS attribute determines two things: the number of frames that appear vertically (stacked on top of each other) in the browser window and the height of each of these frames. The ROWS attribute uses a comma-separated list of values. The number of elements in the ROWS value list determines the number of frames that appear vertically up and down the screen. Because the total height of all the simultaneously displayed frames must equal the height of the browser window, the browser may adjust the ROWS height values to make them all fit. ROWS values can be any valid mixture of the following elements:

If you place a value in front of the *, the frame gets that much more relative space. For instance, an entry like 3*, * allocates three times as much space to the first frame (3/4 of the total) and the remaining portion (1/4) to the second frame.

You don't have to be a mathematics expert to use these different types of values, but you do need to test your work carefully to make sure you're getting the results you want. Be especially careful to test your work when you mix value types. The following are a couple of examples to get you started:

Example 1: Two Vertically Stacked Frames

This example shows two equivalent value constructs:

<FRAMESET ROWS="20%,80%">

<FRAMESET ROWS="20%,*">

Example 2: Three vertical frames

This example shows HTML code for three vertical frames using a fixed pixel, a relative value, and a percent value:

<FRAMESET ROWS="100,*,20%">

COLS="n | % | *, n | % | *, n | % | *, --"

The COLS attribute functions in the same manner as the ROWS attribute, except that it governs the number of frames that appear horizontally across the browser's screen as well as the horizontal width of each frame.

A quick example of the HTML code that displays two frames across the screen with the first one (on the left) getting 20 percent of the available space and the second (on the right) getting the rest, looks like this:

<FRAMESET COLS="20%,*">

<FRAME>

A separate FRAME tag must define each separate frame in your Web site.. The <FRAME> tag has no associated end tag. This tag defines the contents, name, and attributes of each frame. If you create four frames, you need four <FRAME> tags. The first <FRAME> tag defines the top left-most frame area. The second <FRAME> tag defines the frame immediately to the right of the first frame, or if the edge of the browser is reached, the frame in the next row. And so on.

In general, you use a standard HTML file, an image file, or a URL for display in each frame. The following is an example of the syntax for a <FRAME> tag:

<FRAME SRC="yourstuf.htm" NAME="Your Frame">

You can modify the <FRAME> tag by using the following six attributes:

SRC="url"

The URL for the SRC (source) attribute points to the source material you want to appear in the frame. The source material may be a link, an image, an HTML file, or any other legal URL. If you omit the SRC attribute, the frame will be blank.

NAME="window_name"

The NAME attribute assigns a name to a frame so that you can target the frame as the recipient of information. The NAME attribute is optional, and all NAME values must begin with an alphanumeric character.

MARGINWIDTH="value"

The MARGINWIDTH attribute accepts a value of one or more pixels to determine the exact width of the left and right side margins of a frame. Margins must be one or more pixels wide to ensure that objects do not touch a frame's edges. You cannot specify margins so that no space exists for a document's contents. The MARGINWIDTH attribute is optional. If you omit this attribute, the browser sets its own margin widths.

MARGINHEIGHT="value"

The MARGINHEIGHT attribute works just like MARGINWIDTH, except that it controls the upper and lower margins of frames instead of the left and right margins.

SCROLLING="yes|no|auto"

The SCROLLING attribute forces a frame to display a scroll bar. A value of yes forces the browser to display the scroll bars on that frame at all times. A no value keeps scroll bars from being visible at any time. The SCROLLING attribute is optional, and the default value is auto.

NORESIZE

The NORESIZE attribute indicates that a user may not resize the frame. By default, users can resize frames by dragging a frame edge to a new position. If any frame adjacent to the edge of another frame isn't resizable, that entire edge cannot move. This unmovable edge affects the resizing of any adjacent frames. The NORESIZE attribute is optional and quite useful for keeping viewers from removing your logo or advertising space from their view. However, we don't recommend using the NORESIZE attribute as a general technique for content display frames because the restriction limits users' abilities to resize your hand-crafted display settings to fit their screens.

<NOFRAMES> . . . </NOFRAMES>

The <NOFRAMES> tag enables you to create alternative content that is viewable by frame-challenged browsers. Any frame-cognizant browser ignores all tags and data between starting and ending <NOFRAMES> tags.

Targeting frames

The TARGET attribute gives you control over where the linked data appears when a user clicks on a link in your documents. You can use the TARGET attribute in the <BASE>, <AREA>, and <FORM> tags, but the attribute is most beneficial when you use it in the <A> (anchor) tag in conjunction with the frames feature. So, how exactly does targeting work?

Normally, when a user clicks a link, the browser displays the new document in a full browser window. Targeting enables you to assign names to specific frames and to target certain documents to always appear in the frame bearing the targeted name. In a prior section of this chapter, we tell you how to use the NAME attribute to name a frame. Well, using the TARGET attribute to target the frame is just as easy.

Adding the TARGET attribute to the <A> tag in conjunction with the frames feature is as simple as inserting the attribute and its value (the frame name) in the <A> tag. In the following example, the name of the targeted frame is frame name:

<A HREF="url" TARGET="frame name">Targeted Anchor</A>

Allowed and special TARGET names

A valid frame name specified by a TARGET attribute must begin with an alphanumeric character, with the exception of a few special-purpose target names that begin with the underscore character. Any targeted frame name (other than a special-purpose name) that begins with an underscore or a non-alphanumeric character is ignored.

* TARGET="_self": Specifying the _self target always causes the linked document to load in the frame where the user selects the anchor.

* TARGET="_parent": Specifying the _parent target makes the linked document load in the immediate FRAMESET parent of the document. If the current document where the _parent target appears has no parent, this attribute behaves like the _self value. * TARGET="_top": Specifying the _top target makes the linked document load in the full body of the window. The _top target name acts like _self if the current document is already at the top of the document hierarchy. Use this attribute to escape from a deeply nested FRAME.


Next Section | HTML Frames | Extras TOC


E-Mail: HTML for Dummies at html4dum@lanw.com

URL: http://www.lanw.com/html4dum/h4d3e/extras/ch10sec1.htm 
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James. 
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]