Frames provide a powerful way to structure Web pages for multiple purposes. This is accomplished by displaying more than one HTML document or file at a time. However, the concept can be abused, in which case your web page will look really, really bad. Please spend some time to design your page so it presents a nice visual appearance or don't use frames.

The Main Tags for Coding Frames

<frameset> ... </frameset>
Use this instead of the <body> tag. It provides the structural format for the frame-based Web page (hereafter referred to as the “master page”). See below for attributes to this tag.

Specifies the files that will provide the content to each frame of your master page, and various attributes of the frame. See below for attributes to this tag.

<noframes><body> ... </body></noframes>
Provides alternative content on the page, which will be used by older browsers that do not support frames. Place the <noframes> block at the end of the HTML file, before the closing </frameset> tag. The most extreme use of <noframes> would be to replicate the entire body of the page you want to display. A more conservative approach would be to provide a link to the nonframe version of the page. If your particular pages just don’t work well without frames, another approach is to provide a message concerning this to the visitor, perhaps including recommendations for a browser upgrade.

Note by Forrest: It is rare to see a browser that doesn't support frames. I usually just omit the noframes tags.

<frameset> Tag Attributes

cols=cols="x, y, z, ..." OR "x%, y%, z%, ..."
Specifies how many columns are in the frame, and their sizes. Numbers alone mean pixels, e.g. 50 means 50 pixels. Numbers with % mean a percentage of the screen; e.g. 30% means 30% of the browser screen.

rows="x%, y%, z%, etc." or rows="x, y, z, etc."
Specifies how many rows are in the frame, and their sizes. Numbers alone mean pixels, e.g. 50 means 50 pixels. Numbers with % mean a percentage of the screen; e.g. 30% means 30% of the browser screen.

For both cols= and rows= attributes, you can use an asterisk (*) to assign the remainder of all space that you have not specifically allocated to another column or row. For example, cols="200,400,*"e; makes first column from 0 to 200 pixels; the second column from 201 to 400 pixels and the third column from 401 pixels to the edge of the screen.

HINT: In practice, cols and rows are not set in the same <frameset> tag, because such a usage generally doesn’t create a desirable page design. However, it is perfectly legal to do so, to create a grid effect.

HINT: If you have more than one column or row assigned the remainder (*) of all available space, the remainder will be divided equally between or among them, by default. You can, however, put a numeral in front of one or more of the asterisks to establish a ratio for distributing the space; e.g, <frameset rows="*, 40%, 3*"> assigns 40% of the screen to the middle column, and divides the remaining 60% between columns 1 and 3, with the third column getting three times as much of the screen as the first column.

HINT: If you assign sizes of multiple columns or rows in pixels instead of %, be sure to assign the remainder (*) size to at least one of them to make it elastic. Otherwise, your frame will not fit right on screens of different sizes and video resolutions.

Can be set to either yes (or 1) or no (or 0), to control whether the frame has a border between itself and each adjoining frame. The default is frameborder="1" or frameborder="yes" . Unfortunately, some browsers honor one of these and not the other. Internet Explorer can be counted on to recognize 0 and 1, and Netscape can be counted on to recognize no and yes.

NOTE: The presence or absence of visible borders is not supposed to affect whether or not bounded frames can be resized. Unfortunately, in some browsers it does: For those browsers (including older versions of both Internet Explorer and Netscape), turning off the visible border also engages the noresize option. If it is important that visitors be able to resize frames on a particular page, consider leaving the frameborder enabled.

framespacing="n" and border="n"
These control the amount of spacing between frames, in pixels. (Default is 1, but it can be set to 0.) Unfortunately, some browsers honor one of these and not the other. Internet Explorer can be counted on to recognize framespacing, and Netscape can be counted on to recognize border.

<frame> Tag Attributes

FRAME tags are inserted after the <frameset> tag, just as if you were inserting HTML tags and content after the <body> tag of a non-frame HTML document. The order in which you list frames is the order in which they are loaded in successive columns or rows. You may put additional <frameset> tag pairs within a given frame, that is, between a pair of <frameset> and </frameset> tags, much as you would put a <frame> tag. This is used to put multiple columns within a row, or multiple rows within a column.

Attributes that can be used with the <frame> tag include:

Specifies the contents of the frame; that is, what file is to be loaded into it. Compare this to img src= for loading image files. In fact, you can use src= in a <frame> tag to load an image file instead of a document file, if you wish, and the same rules apply as with an <img> tag.)

Gives the frame a name so that it can be referenced. This name must begin with an alphanumeric character, except in four special situations using the underscore _ character. A frame’s name enables a document loaded into one frame to link to another document and force it to open in the named frame, using the target="framename" tag. This is very handy for menu or navigation bars. target= variations include:

NOTE by Forrest: Choice of target= is very important. It is very easy to confuse your viewer by loading a page into the wrong frame, opening a new window unexpectedly or not opening a new window when you should. This is probably the most abused feature of Frames and can ruin the impression you give the viewer unless you spend some time thinking about what you want to happen.

Specifies whether scrollbars appear at the edge of the frame. You may set n to yes, no, or auto. (The default is auto, meaning that either scrollbar appears only if needed, and does not appear otherwise.)

This attribute can be used in a FRAME tag as well as in a FRAMESET tag to control whether the frame has a border between itself and each adjoining frame. See the discussion above to more details.

Specifies the border thickness between frames. The default is 6 in current versions of the leading browsers, but may vary with other browsers.

For this attribute, n is either a color label (e.g., red) or an RGB code (e.g., #ff0000).

Specifies the frame’s left and right margins, in pixels. The minimum value of n is 1. Most browsers use a default of about 12.

Specifies the frame’s top and bottom margins, in pixels. The minimum value of n is 1.

HINT: If you have items with exact sizes (such as images) in columns or rows, set your column width to about 25 pixels, or row height to about 8 pixels, larger than the minimum required size.

HINT: If you have a marginwidth or marginheight greater than 1, add an additional number of pixels to the column width or height (respectively) equal to twice the amount that the margin is greater than 1. This is necessary because the increase you add is applied to both sides of the frame’s contents.

HINT: You can use the <base target="framename"> tag in the HEAD portion of a page to specify that all links on that page load into the frame specified in framename.

By default, viewers usually can click-and-drag a frame border to resize it. The noresize attribute disables that. HINT: Because this affects adjacent frames also, test all frames to make sure that you have exactly the effect you want. Given the wide range of monitor sizes and screen resolutions in use, and to increase general accessibility to your pages, use the NORESIZE attribute sparingly.

A Different Approach: <iframe> ... </iframe>

A little-seen HTML tag is <iframe> tag, or Inline FRAME tag. This embeds another frame right in the middle of a page without the need for the <frameset> structure. However, older browsers may not support it (iframe requires at least IE 3.0 or Netscape 6.0), in which case the inline frame will not appear on the page.

To use iframe, simply put this pair of tags in the body of a page where you want the inline frame to appear. Nothing goes between the opening and closing iframe tags. You may position the frame with attributes to the <iframe> tag such as align=, specify which page is displayed with src=, size it with height= and width= attributes, or use the name, marginwidth, marginheight, frameborder, and scrolling attributes.