Back to HTML Help Main Page

What are frames?

A frame is an HTML page layout convention that enables Web Pages to be divided into a series of rectangular sections.  They are flexible with options such as:

      Whether a frame displays borders

      How or if a frame displays scroll bars

      Whether frame borders are movable

A multiple frame HTML page is a page that holds several frames, each of which displays a separate HTML document. Often frames use the left or top frame to contain the HTML document that is the navigation of the Web site.  Later we will learn how to link frames with anchors and the target attribute. 

Frames are made of a master frame document and slave frame documents.  Master frame document – specifies the size and position of the frames on the page.  Slave frame documents – separate html documents containing the frame contents.  The master frame document contains a <FRAMESET> tag set.  This replaces the body tag pair.  (An HTML document with a body section cannot contain a frameset and visa-versa)  If you create an HTML document with both, the browser will ignore the frame structure and none of the content of the frames will be displayed.  Only the body section will be shown.

Major attributes of the <FRAMESET> tag:

      Cols (minimum of 2 columns and no rows)

      Rows (minimum of 2 rows and no columns)

(at least one of these must be used)

The value of the ROWS or COLUMNS can be done in pixels or percent of screen width, much like the cell widths or heights can be done in a table.  Another option is relative rations (also called relative scale values).     

The number of rows or columns in a frames page is determined by the number of width values defined in the ROWS or COLS attributes, respectively.  For example, <FRAMESET ROWS="25%,50%,25%"> defines a frameset with 3 rows. 

Relative Scale Values (relative ratios) are basically a proportional value.  In the sample below, the common denominator is 6, so the first row will be 1/6 of the available screen space, the second row will be 2/6 and the third row will be 3/6 of the screen space.

<FRAME> Tag:

The <FRAME> tag is inserted inside the <FRAMESET> opening and closing tags.  The <FRAME> tag is a single tag, like the <IMG> tag.  SRC is the attribute that goes with it. 
 See the example of the format below:

<FRAMESET ROWS="25%,50%,25%">

<FRAME SRC="slave1.html">

                <FRAME SRC="slave2.html">

                <FRAME SRC="slave3.html">

        </FRAMESET>

Combining ROWS with COLS

You may combine a ROWS attribute with a COLS attribute in a single <FRAMESET> tag.  An example would be:  <FRAMESET ROWS="50%,50%" COLS="50%,50%">.  Since this frame would actually create 4 frames, you must do 4 <FRAME> tags.  Take the number of rows times the number of columns to determine how many <FRAME> tags are needed inside the <FRAMESET> tag pair.

Nesting Frame Sets

An alternative to using a single <FRAMESET> tag is nesting <FRAMESET> tags within one another, which allows for more complex frame layouts.  This is an example of this type of frame:

<FRAMESET COLS="25%,75%">
    <FRAME SRC="slave1.html">
    <FRAMESET ROWS="50%,50%">
        <FRAME SRC="slave2a.html">
        <FRAME SRC="slave2b.html">
    </FRAMESET>
</FRAMESET>

The left 25% will display the slave1.html page while the right 75% will display the frameset documents in 2 equal rows.

Frame Attributes

Frameset Attributes

Recognizing Non-Frames Browsers

Just in case the site visitor is using a browser that does not enable frames, it is a good idea to add the following tag and text which can be added after </FRAMESET> and before </HTML>:

<NOFRAMES>

        Your browser is not capable of viewing frames, and this Web site requires a frames enabled browser.  To view this site, upgrade a higher version of Netscape Navigator or Internet Explorer.

</NOFRAMES>

Name and Target in Frames

Name – an attribute to the <FRAME> tag, it provides an unique identifier to a frame so that an Anchor tag can link to it.

Target – attribute to the <A> tag, it instructs the Anchor tag to display the file which it links to in a particular frame other than the frame it is displaying in.

This web site is for use of the Brazoswood Web Mastering classes.  If you have questions,  you may contact Pat Hubert. 

GIF Source: BestAnimations.com. "Dog animation." [online image] 9-15-1999. http://www.bestanimations.com/Animals/Mammals/Dogs/Dogs.html .