Any comments: e-mail me, feedback or show your appreciation

Frames in HTML

This section describes how to create framed HTML documents. Frames divide web pages into multiple, scrollable regions enabling you to present information in a more flexible and useful fashion. Each frame can be given an individual URL and name, allowing it to be targeted by other documents. It can also be dynamically resized depending on the user's window size. The Index of the Guide uses frames to display an A-Z section above the main scrollable index.

Currently, frames are only supported by Netscape 2 and above, and Microsoft Internet Explorer 3. For some more detailed tag descriptions, see Netscape's Implementation of Frames. There are also some further tips in the Guide's FAQs, including how to target two frames from one link.

Frames are displayed through a Frame Definition document. The frame definition describes the number and position of the frames and the URL of their contents. You cannot write the contents of the frames within the frame definition - these must always be held in separate documents.

<frameset>
In a frame definition, the <body> tag is replaced by the <frameset> tag. The <frameset> tag will be ignored if any tags normally found within the <body> element are placed before it. The <frameset> container holds the <frame> elements which describe the frames that will make up the page. As you will see, the <frameset> tag can be nested where necessary.
- rows="x1,x2,...|x1%,x2%,...|x1*,x2*,..."
  This attribute describes the frames in terms of rows of varying heights. The row heights are contained in a comma separated list. They are described in terms of absolute height in pixels, percentage values from 1 to 100% or as relative values. The total height of all rows must equal the total height of the window, so the values may be normalised by the browser if necessary. An asterisk (*) is used to designate rows that are relatively sized.
  <frameset rows="2*,*">
  would make the first (top) frame twice the height of the bottom frame.
  <frameset rows="50,*,50">
  would fix the height of the top and bottom frames and allocate the remaining space in the window to the middle frame.
  <frameset rows="20%,60%,20%">
  would display a large middle frame between two smaller frames.
- cols="x1,x2,...|x1%,x2%,...|*"
  Used as per the rows attribute.
- frameborder="yes|no|0"
  This attribute enables you to turn off the border around frames in the frameset. Currently Netscape (version 3 only) uses the values yes and no, while MS Internet Explorer uses the value 0 (zero). Therefore to be sure the frame border is turned off, you must use the attribute twice. This attribute can be used with the <frame> tag to set the borders for a single frame.
- border="value"
  Netscape 3 only. This attribute allows the user to set the width of the borders in a frameset; defined in pixels.
- bordercolor="#hexcolor"
  Netscape 3 only. Allows the user to set the colour of the frame borders in a frameset, specified in the conventional RGB hex triplet. This attribute can be used with the <frame> tag to set the border colour for a single frame.
<frame>
This tag is used to describe a single frame within a frameset. All attributes are optional.
- src="URL"
  This attribute contains the URL of the document to be displayed in the frame, cf. <img>. If no src attribute is specifed, the frame will remain as blank space.
- name="window name"
  This attribute assigns a name to the frame. This allows the frame to be targetted by links in other documents and by the target attribute. The name must begin with an alphanumeric character.
- scrolling="yes|no|auto"
  This attribute allows you to give the frame a scrollbar or not. The default is auto, which lets the browser decide whether the frame needs scrollbars and display them where necessary.
- noresize
  The noresize attribute will prevent the user from resizing the frame. By default the user can resize frames by dragging the the frame edge to a new position.
- marginwidth="value"
  This attribute allows the user to set the frame margin width in pixels. By default, the browser will decide upon an appropriate margin width.
- marginheight="value"
  As per marginwidth, this attribute allows the user to set the frame margin height in pixels. By default, the browser will decide upon an appropriate margin height.
  
  <frame src="example.htm" name="frame1" scrolling="yes" marginwidth="10" noresize>
The above example would name the frame "frame1" and load the document example.htm into it. The scroll bars would be shown, the margin width set to 10 pixels and the user would not be able to resize the frame.
- bordercolor="#hexcolor"
  Netscape 3 only. Allows the user to set the colour of the frame border, specified in the conventional RGB hex triplet. This attribute can be used with the <frameset> tag to set the border colour for a group of frames.
- framespacing="value"
  MS Internet Explorer only. This attribute allows the user to clear space around the frame; defined in pixels.
- frameborder="yes|no|"
  This attribute enables you to turn off the border around a frame. Currently Netscape Navigator (version 3 only) uses the values yes and no, while MS Internet Explorer uses the value 0 (zero). Therefore to be sure the frame border is turned off, you must use the attribute twice. To completely get rid of a frame outline in MSIE you muist also set the framespacing attribute to 0 (see first example below). This attribute can be used with the <frameset> tag to set the borders for a group of frames. Note: frame borders will only be turned off if both adjacent frames (even if they are in different framesets) have their frameborder attributes set accordingly.
  <frame src="example2.htm" name="frame2" frameborder="no" framespacing="0">
  <frame src="example3.htm" name="frame3" bordercolor="#FF0000">
The first of the above examples would name the frame "frame2" and load the document example2.htm into it. The frame border would be completely turned off with no space between the frames. The second of the above examples would name the frame "frame3" and load the document example3.htm into it. The frame border would be coloured red.
<noframes>
This tag enables you to provide content for users with browsers that cannot display frames. Any such content held between the noframes tags will not be displayed by a frames-capable browser. This tag is useful for providing a link to pages that do not use frames.
target
The target attribute is not found in the frame definition but is used within normal HTML documents to direct data to specific frames. Normally when a user clicks on a link, the new document appears in the same window or frame as the link. The target attribute is used to direct data to a specific. ie. a different, frame or window. We shall consider the target attribute in terms of frames and the <a> tag. The target attribute can also be used with the base, area and form tags.
In order to direct data to a different frame, the receiving frame must have been named in the frame definition. In the example below, a link in frame 5 directs the file x_frame6.htm is into in a frame called frame3. This is done by including the target attribute in the <a> tag in the following way:
<A TARGET="frame3" HREF="x_frame6.htm">
If the name in the target attribute does not exist, the document in the link will be opened as a new window with a name as given in the target attribute. The names must all begin with an alphanumeric character.
There are some special target names, called magic target names. These all begin with an underscore ( _ ).

target="_self"
This causes the document to load in the same frame as the link.
target="_parent"
This will cause the document to load into the same frameset as the link, thereby removing any 'sub-frames'. It is used in frame 2 of the example to return back to this page.
target="_top"
This makes the document load into the full body of window, ie. getting rid of all frames. This is useful (and almost always required) when a link directs the user to another site.
target="_blank"
This will cause the document to load into a new blank window.

Example

The following example will use nested framesets to display frames in approximately the following fashion:

+------------+-------------------------+------------+
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
+------------+------------+------------+------------+
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
+-------------------------+-------------------------+

The Frame Definition

<html>
<head>
<title>Sizzling HTML Jalfrezi - frames example</title>
</head>
<FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="150,*,150">
        <FRAME SRC="x_frame1.htm" SCROLLING="yes">
        <FRAME SRC="x_frame2.htm">
        <FRAME SRC="x_frame3.htm" NAME="frame3">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
        <FRAME SRC="x_frame4.htm" MARGINHEIGHT=50 MARGINWIDTH=50>
        <FRAME SRC="x_frame5.htm">
    </FRAMESET>
</FRAMESET>

<NOFRAMES>
You do not have a frame-compatible browser - this example won't work without
one.<BR>
<A HREF="frames.htm">Click here</A> to return to the Frames page.
</NOFRAMES>
</HTML>

View the example

The example shows all of the features of frames described above, including targeting windows and the noframes feature for non-frame compatible browsers.

Floating Frames

Microsoft Internet Explorer 3.01+ now supports the so-called floating frame. This is rendered using the <iframe> tag.

Sizzling HTML Jalfrezi
©1997 Richard Rutter
`rrutter@woodhill.co.uk`

Maintenance of this page is attempted by Richard Rutter (rrutter@woodhill.co.uk) using the gorgeous HTML Notepad and the wonderful Sizzling HTML Jalfrezi.