Hagan's World of HTML: Frame Basics

Let's take a look at the syntax for creating a frame, in detail. We begin with an example. Here's a FRAME document with a top and bottom banner, a left column for an index, and a large right hand area for document display:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="10,80,10">
  <FRAME SRC="topbanner.html">
  <FRAMESET COLS="30,70>
    <FRAME SRC="index.html">
    <FRAME SRC="results.html">
  </FRAMESET>
  <FRAME SRC="bottombanner.html">
</FRAMESET>

<NOFRAMES>
<B>I'm sorry, you don't have frames.
</NOFRAMES>
</HTML>

A document that contains a FRAMESET has the same basic structure as a normal HTML document, except that the BODY container is replaced by the FRAMESET container which describes the HTML documents that will make up the body of this FRAMESET.

The FRAMESET tag has no BODY and no tags that would normally be placed in the BODY can appear before the FRAMESET, or Frames will be ignored. The FRAMESET tag has a matching end tag, and within the FRAMESET you can only have FRAMESETs, FRAMEs or NOFRAMES tags.

<FRAMESET ROWS="value_list" COLS="value_list"></FRAMESET>

This divides the window space into rows and columns.

ROWS="value_list"

This is a comma separated list of values. These values can be expressed in an absolute number of pixels, as a percentage (between 1 and 100) or as relative scaling values.

The number of rows is determined by the number of values in the list. The total number of the values must fill the available space: if it does not, one of the ROWs will be sized to fill any left over space.

Examples
<FRAMESET ROWS="20%,60%,20%">
This is a list of percentage values for the division of rows. If the total number is more than 100%, all percentages will be scaled down to total 100%. If the total number is less than 100%, one of the frames will be scaled up to fill the remaining space.

<FRAMESET ROWS="100,500,100">
This is a list of fixed pixel values. If you use these values, they will have no effect on the size of the reader's window, so you run the risk of having your frames disappear off the edge of the window. You'll almost certainly want to use these values in combination with other percentage based or relative values.

<FRAMESET ROWS="50, 2*, *">
This is a mix of fixed and relative values. In this case the first ROW is 50 pixels wide. The other two rows are divide the remaining space. A single "*" means that the frame gets all of the remaining space. When more than one "*" appear, you can give them relative portions of the remaining space. In this case, the second row gets 2/3 of the remaining space and the third row gets 1/3 of the remaining space.

This sets the number and size of rows in the frame. A percent_list is a comma separated list of percentage values between 1% and 100%. The number of values determines the number of rows, and the values themselves determine the size of each row in relation to the document. (If the total number of percentages in the list does not total 100%, then the percentages will be normalized to total 100%.)

COLS="value_list"

This takes the exact same type of numbers as the ROWS does.

Examples
<FRAMESET COLS="30%,70%">
This makes two columns, one 30% of the available width, one 70% of the available width.

<FRAMESET COLS="100,100,20%,*">
This makes four columns. The first two are each 100 pixels wide. The third is 20% of the width of the window and the fourth is the remaining space.

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO NORESIZE MARGINWIDTH="value" MARGINHEIGHT="value">

This tag defines a frame within a frame. It is not a container, therefore it does not need a matching end tag.

SRC="url"

Example <FRAME SRC="http://www.foo.com/index.html">
This is the URL of the document that is to be displayed in the frame. Without a URL, the frame will be blank.

NAME="window_name"

Example <FRAME NAME="banner">
This is used to assign a name to a frame so that it can be targeted by other links (usually links from other frames) in other documents. This is optional and without it, the frame will be unnamed.

If you want another link to go to this named frame, you write the link as:
<A HREF="http://www.foo.com" TARGET="banner">link</A>

MARGINWIDTH="value"

This is used when the document author wants control over the margins for the frame. If absent, this defaults to letting the browser decide on the appropriate margin. If specified, the value is in pixels. You cannot specify a margin of less than 1 and you cannot specify margins that leave no space for the document contents.

MARGINHEIGHT="value"

Similar to MARGINWIDTH, except that it controls the upper and lower margins

SCROLLING=YES|NO|AUTO

Example <FRAME SCROLLING=YES>
This is used to indicate whether or not the frame should have scrollbars. YES means that scrollbars always appear. NO means that they never appear, even if this means cropping the document inside the frame. AUTO means that Netscape itself will determine whether or not scrollbars are necessary and show and hide them, as needed.

NORESIZE

Example <FRAME NORESIZE>
This indicates that the frame cannot be resized (normally, users can adjust the size of frames). Note that when you say one frame cannot be resized, all adjoining frame walls cannot move, possibly making it impossible for other frames to resize. Thus, in general, when NORESIZE is used, it affects most of the frames.

<NOFRAMES></NOFRAMES>

This container tag is used to create alternate documents for browsers that cannot read frames. A frame-capable browser will ignore everything inside the NOFRAMES tag. A browser incapable of producing frames will ignore all FRAME tags and just display the other HTML.