HTML 4 For Dummies - Bonus Chapters

HTML Frames 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. Frameward ho!

The Frame Document structure

A Frame Document can simply be a normal HTML document in which you replace the <BODY. . .> container with a <FRAMESET. . .> container that characterizes the HTML subdocuments -- 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 an alternative, nonframed HTML document. When you use the <NOFRAMES> tag , you must include the <BODY> tag within its embrace, like this:

<NOFRAMES>
<BODY>
The nonframed HTML code for your page goes here.
</BODY>
</NOFRAMES>

Frame syntax is quite similar to the syntax you use within HTML tables. In fact, you can think of frames as movable, dynamically updated tables. After you start using frame-related markup in your own pages, you find the syntax to be pretty straightforward stuff. But it takes some practice to get used to the concepts involved.

<FRAMESET>

<FRAMESET>is the main container for a frame. Because a frame document uses <FRAMESET> instead of <BODY>, the <FRAMESET> tag follows immediately after the </HEAD> tag. If any <BODY> tags appear before the <FRAMESET> tags, the <FRAMESET> tags are 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 get the results you want. Be especially careful to test your work when you mix value types. Following are a couple of examples to get you started:

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

The COLS attribute functions much like the ROWS attribute, except that it governs the number of frames that appear horizontally across the browser’s screen as well as the width of each frame.

This quick example of the HTML code 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:

<FRAMESET COLS="20%,*">

FRAMEBORDER="yes|no"

The FRAMEBORDER attribute allows you to specify whether or not you want the frames within your frameset to have borders. Borders help your readers differentiate between frames, but they can also be in the way of a seamless page. Your specific frames implementation dictates the value you assign to this attribute.

BORDER="n"

The BORDER attribute, used in combination with the FRAMEBORDER="yes" attribute, specifies the width of the borders between the frames of the frameset. Be careful not to make the borders too large or they may interfere with the readability of your content. Also, remember that every pixel you assign to a border is one more pixel you can't assign to text and graphics.

BORDERCOLOR="color"

The BORDERCOLOR attribute, used with FRAMEBORDER and BORDER, specifies the color of the borders between the frames of the frameset. When selecting a color for the border choose one that compliments your overall page color scheme and doesn't detract from the page's readability.

FRAMESPACING="n"

The FRAMESPACING attribute defines the amount of space between the frames in a frameset. Used judiciously this attribute helps separate the content of the frames and makes the page easier to read and navigate. Be careful not to give too much space over to FRAMESPACING or you'll be sacrificing valuable screen real estate.

<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 for 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 any of these 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 appears 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-hand 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 (usually 1 or 2 pixels wide).

MARGINHEIGHT="value"

The MARGINHEIGHT attribute works just like MARGINWIDTH, except that it controls the top- and bottom-edge margins of frames instead of the left- and right-hand side margins.

SCROLLING="yes|no|auto"

The SCROLLING attribute determines whether a frame displays a scroll bar. A value of yes forces the browser to display a scroll bar on that frame. A no value keeps scroll bars invisible. The SCROLLING attribute is optional, and its default value is auto, which means that scroll bars appear only when more content than fits in the window must be displayed. This is the default, and it makes sense to stick with it under most circumstances, because you can’t always determine what size of window that users will display your framed pages within. (This way, they get a scroll bar if they need one, but none appears if they don’t.)

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 frames because this restriction limits users’ abilities to resize your hand-crafted display settings to fit their screens.

Additional Attributes

The FRAMEBORDER, BORDER, BORDERCOLOR, and FRAMESPACING attributes that may be assigned to all of the frames within a frameset by applying them to the <FRAMESET> tag may also be assigned individually to frames.

<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 so that they appear in the frame bearing the targeted name.

In a prior section of this chapter, we explain how to use the NAME attribute to name a frame. 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>

Legal and predefined TARGET names

A valid frame name specified in a TARGET attribute must begin with an alphanumeric character, with the exception of a few predefined, 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 nonalphanumeric character is ignored.

Extra 1 Main Page | Previous Section | Next Section

 


Home | Bonus Chapters | FTP Resources | Site Overview | Book Contents | Book URLs | Book Examples | Wayfinding Toolkit | Contact Info


URL: http://www.lanw.com/html4dum/h4d4e/extras/ex01/e01s02.htm
E-mail: HTML For Dummies

Webmaster: Natanya Pitts, LANWrights
Copyright Information
Revised -- January 16, 1998