www.RickBull.com > tutorials > HTML > Frames
Jump to: Contents | Part 1 | Part 2

The Basics

Sections:

Introduction to Frames

We will start by creating a basic frameset, that comprises of one frame on the left for navigation, and another on the right as the content frame. Let us take a look at how to do this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>A frameset example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  </head>

  <frameset cols="20%,80%">
    <frame src="Links.html" name="LeftFrame">
    <frame src="Home.html" name="ContentFrame">

    <noframes>
      <body>
        <p>Your browser does not support frames, please go to the 
        <a href="noframes.htm">No-Frames Page</a>.</p>
      </body>
    </noframes>
  </frameset>
</html>

The first line that reads:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Simply tells your browser that the type of document that you are using is a frameset. The actual part of the of the code that sets how the frames are laid out is this part:

  <frameset cols="20%,80%">

So the keyword frameset tells the browser that we are starting a frameset. The cols keyword tells the browser that we want columns (vertical) for this frameset. Then the arguments we parse to this keyword dictates how many columns we want, and the dimensions/size of each. In this example we have two columns (separated by commas), the first one 20% of the frameset's width and the second 80% of the frameset's width. Below the frameset is the code:

      <frame src="Links.html" name="LeftFrame">
      <frame src="Home.html" name="ContentFrame">

These are the actual frames, and dictate what page should appear in which frame. The src attribute is the filename of the page that you want loaded into this frame. So in our left-hand frame we have the document Links.html loaded, and in our right-hand frame we have Home.html. The name attribute is the name of the frame which enables you to target one frame from another.

Then underneath that we have a <noframes> section:

    <noframes>
      <body>
        <p>Your browser does not support frames, please go to the 
        <a href="noframes.htm">No-Frames Page</a>.</p>
      </body>
    </noframes>

This makes sure that anyone without a frames-capable browser will see what is in between these tags. This can (and should) provide an alternative way to navigate around your site, for instance a page of links that they use instead. In this case we have provided a link to the page noframes.htm, in which we could have links to all of the pages on our site. Note that you only need one <noframes> section in the whole of your document, and it should come just before the last </frameset>.

Finally after our noframes section we finish the whole frameset off with:

  </frameset>

And that is the end of the frameset, all that is left is to close the whole page with:

</html>

But framesets are not limited to only columns, we can also have rows (horizontal). Not much needs to be explained here except to say that we change the cols keyword for rows in the <frameset> tag.

If we want to have both cols and rows there are two ways to achieve it. The first way is to add cols and rows to a single frameset tag, or we can use nested frameset tags:

Cols and Rows

This method simply adds both the cols and rows attributes to the frameset tags like so:

  <frameset rows="50%,50%" cols="33%, 33%, 34%">
    <frame src="TopLeft.htm" name="TopLeft">
    <frame src="TopCenter.htm" name="TopCenter">
    <frame src="TopRight.htm" name="TopRight">
    <frame src="BottomLeft.htm" name="BottomLeft">
    <frame src="BottomCenter.htm" name="BottomCenter">
    <frame src="BottomRight.htm" name="BottomRight">
  </frameset>

Using cols and rows like this means that frame-borders stay aligned with one another when you resize them. Try out the example page Rows_And_Cols.htm, and resize the borders, you will notice that there is not much flexibility in frame positioning. But there is an alternative to this method - nested framesets.

Nested Framesets

The other way of creating cols and rows in frames is via nested framesets. This method allows for more versatility. To achieve the same effect as above (but with more flexibility) we would do:

  <frameset rows="50%,50%">
    <frameset cols="33%, 33%, 34%">
      <frame src="TopLeft.htm" name="TopLeft">
      <frame src="TopCenter.htm" name="TopCenter">
      <frame src="TopRight.htm" name="TopRight">
    </frameset>
    <frameset cols="33%, 33%, 34%">
      <frame src="BottomLeft.htm" name="BottomLeft">
      <frame src="BottomCenter.htm" name="BottomCenter">
      <frame src="BottomRight.htm" name="BottomRight">
    </frameset>
  </frameset>

So what is happening here is that the first frameset is splitting the page up into two equally sized, horizontal portions. The second one then splits the top frame (from the first frameset) into 3 (nearly) equal positions, and the pages are loaded by the proceeding <frame> tags. The final frameset does the same as the last one, except that it loads it into the second frame that the first frameset created. With me? A little confusing, but if you read through the code and play around with it you should understand how it all works. Try the example page Nested_Framesets.htm, and resize the borders, you will notice that there is more flexibility in frame positioning than in the previous example.

Attributes

Here is a list of all of the attributes associated with the <frameset> and <frame> tags. There is also an example of usage below each description. Both frameset and frame tags also have common core-attributes that are common to most elements of HTML.

Frameset Attributes:

rows
List of dimensions of specified number of rows separated by commas (default: 100%/1 row)
  <frameset rows="50%,50%">
cols
List of dimensions of specified number of columns separated by commas (default: 100%/1 row)
  <frameset cols="50%,50%">
onload
Script event - triggers once all the frames in the frameset have finished loading. You may for example place a JavaScript here like:
  <frameset onload="alert('Done loading! Horrah');">
onunload
Script event - triggers once all the frames in the frameset have been unloaded.
  <frameset onunload="alert('All frames have been unloaded.');">

Frame Attributes:

longdesc
This is a link to a file that contains a long description of what the contents of this frame is. This may help with some non-visual browsers. This should be used in conjunction with the title element, which is used to give a short description of the frame's contents
    <frame longdesc="LeftFrameDesc.htm">
name
Name of the frame for targeting links from other frames - will almost always be needed.
    <frame name="LeftFrame">
src
The file that is to be loaded into this frame - must not be the frameset document.
    <frame src="Left.html">
frameborder
May be either a 0 (off) or a 1 (on). Default is 1. Note also that the frame-border may be drawn if the adjoining frame has its frameborder value set to 1.
    <frame frameborder="0">
marginwidth
Specifies (in pixels) the amount of space rendered between the left and right of frame's border and its content.
    <frame marginwidth="25">
marginheight
As above but for top and bottom rather than left and right
    <frame marginheight="10">
noresize
Frame resizing is disallowed when this attribute is present
    <frame noresize>
scrolling
Sets whether scrollbars are present in the frame. Values may be yes, no or auto (depends on frame contents).Auto is the default value
    <frame scrolling="no">

Proprietary Attributes

Proprietary attributes are attributes that have been added to individual browsers to enhance functionality. The downside is that if you include them your page will not validate with the W3C's validator and some browsers will not support certain attributes. I would not recommend using them but if you want to use them anyway, then I am not going to stop you! I have not included all known proprietary attributes as some of them are just variations of official attributes/pointless, so there really is no point.

Frameset

These are the proprietary attributes that may be used with the <frameset> tag:

border
Some browsers do not fully support, or have a buggy implementation of the frameborder attribute, but most seem to be fine with the border attribute, even though it is a proprietary attribute. Its value may be 0 (off) or 1 (on):
    <frameset border="0">
Compatibility: Internet Explorer 4+, Netscape 4+ & WebTV.
bordercolor
This attribute allows you to specify the colour of the borders:
    <frameset bordercolor="#ff00ff">
Compatibility: Internet Explorer 4+ & Netscape 4+.
framespacing
This attribute can help to remove/add spaces between frames:
    <frameset framespacing="0">
Compatibility: Internet Explorer 4+.
onblur
This is a script event that occurs when the current frameset looses focus (the active element) after having it:
    <frameset onblur="alert('Everything is blurry!');">
Compatibility: Netscape 4+.
onfocus
This is a script event that occurs when the current frameset receives focus:
    <frameset onfocus="alert('Everything is in focus again!');">
Compatibility: Netscape 4+.

Frame

These are the proprietary attributes that may be used with the <frame> tag:

bordercolor
This attribute allows you to specify the colour of the borders:
    <frame bordercolor="#ff00ff">
Compatibility: Internet Explorer 4+.

Targetting Frames:

Frames are all well and good, but what happens when we want to have our links in one frame load in another? Well in this situation we need to use the attribute target in our links. Now as long as you have named your frames with the name attribute all we need to do is add target="FrameName" to the link. For example, say that we have two columns named LeftFrame and RightFrame, like so:

  <frameset cols="150,*">
    <frame src="Left.htm" name="LeftFrame">
    <frame src="Right.htm" name="RightFrame">
  </frameset>

And in the page Left.htm (the left-hand frame) we had links which we wanted to be loaded into the right-hand frame,we would simply make our links look like this:

    <a href="Home.htm" target="RightFrame">Home</a><br>
    <a href="Links.htm" target="RightFrame">Links</a><br>
    <a href="Downloads.htm" target="RightFrame">Downloads</a>

Get it? So all you do is add the target attribute with its values as the frame's name that you are targeting.

Dimensions:

When specifying the dimensions for each column/rows there are 3 units that we can use - Pixels, Percentages or Relative Sizes, all of which are explained below:

Pixels
Sets the size of the frame to the specified size in Pixels, e.g. cols="150,200" would make 2 columns, the first 150 pixels wide and the second 200 pixels wide.
Percentages
Sets the size of the frame to the relative size to its parent, e.g. cols="25%,50%,25%" would make 3 frames. Say for example we have a frameset with a width of 200px the first frame would be 50px, the second 100px and the third 50px.
Relative Sizes
This method makes the frame relative to how much space is left in the current frameset. For example if we had a frameset that was 200 px wide, and we had cols="150,*" the first frame would be 150 px wide, and the second would be 50px. But we can take this a step further if we are using more than one * and add integer values before the *. For example, say we had a frameset that was 200px wide with these dimensions: cols="100,*,2*". The first frame would be 100px wide, the second would be 25px wide and the third would be 50px wide - twice that of the second (2*).

It should be mentioned however that (according to the specifications) if a frame's content does not fit into a frame's specified size, the frame will be resized to fit.

Addressing Frames with JavaScript

If you want to use JavaScript to reference frames there are a few ways to do it:

parent.frames[]
As long as you have named you frame this method allows you to specify within the square brackets either the number of the frame or its name:
  parent.frames[0].document.location.href = 'Right.htm';
Or to use the frame's name:
  parent.frames['RightFrame'].document.location.href = 'Right.htm';
parent.framename
Again as long as you have named you frame you may simply refer to it after parent:
  parent.RightFrame.document.location.href = 'Right.htm';

Common Core-Attributes

These are attributes that most HTML elements have. They can be used in conjunction with <frameset>, <frame> and <iframe> attributes.

id
Similar to the name attribute, but is the newer method
    <frame id="NewsFrame">
class
For use with Cascading Style Sheets (CSS); Imports all properties from the specified class(es) in the style sheet. Separated by spaces if providing more than one.
    <iframe class="border">
And something like this may appear in your style sheet:
    .border { border: 1px solid #000000; }
style
Additional information (via CSS) about how the element should look/behave
    <iframe style="margin: 5px 10px;">
title
Short description about the element
    <frame title="Main content frame">

All tutorials and content written by Rick Bull unless otherwise stated
Page's last update: Friday, 15th January 2010; 12:53:56 GMT +0000
Official HTML 4.01 frames documentation: http://www.w3.org/TR/html401/present/frames.html
Top of the page