Kaye and Geoff's web page documentation 

Introduction

Frames allow you to display multiple scrollable windows on a single screen, each window (frame) with its own distinct URL, so each one can be independently updated. This technique is particularly useful if you have pages that use a common menu or index. The section of the page that holds the index can be kept permanently on the screen while the content of other parts of the screen are changed.

How to implement frames

An HTML document with frames looks quite different from an HTML document without frames, and involves a bit more work on your part. As we already know, a standard document has this sort of structure:
<html> <head>.....</head> <body>.....</body> </html>
A document with frames has a separate page (with the normal HTML structure above) for each frame, plus a "controlling" page where the <body>...</body> section is replaced with a <frameset>...</frameset> section, as follows:
<html> <head>.....</head> <frameset>.....</frameset> </html>
An example of a page using frames might be:

<html> <head> <title>Frames example</title> </head> <frameset rows="100,*"> <frame name="framehead" src="frames/f1.html" scrolling="no" noresize> <frameset cols="30%,*"> <frame name="framemenu" src="frames/f2.html" scrolling="no"> <frame name="framebody" src="frames/f3.html"> </frameset> <noframes> <center><h2>Frames Example</h2></center> <ul> <li><a href="frames/f1.html">FrameHead</a> <li><a href="frames/f2.html">FrameMenu</a> <li><a href="frames/f3.html">FrameBody</a> </ul> </noframes> </frameset> </html>
Here is what this example looks like when displayed by the browser:

As you can see, this example creates three frames on the screen - two rows, with two columns in the lower row. To get the two columns in the second row of frames we use nested <frameset> tags. This is different from a normal page - you are not allowed to nest <body>...</body> tags. Within each <frameset>...</frameset> block the individual frames are defined with <frame>...</frame> tags.

The first frameset sets up the two rows, the first (on the top) 100 pixels in height and the second taking up the rest of the window (indicated by the *). This first frame is named framehead and it will display the f1.html page, while the second part is defined by the second (nested) frameset. Note that the effect of setting the height in pixels is that the top frame will stay the same height independently of the overal window being resized. This is reinforced by the "noresize" and "scrolling=no" attributes. By contrast, the width of the first column is expressed as a percentage, so it can shrink or grow in proportion as the overall window is resized.

The second frameset has a division the other way, into columns. The first column is 30% of the available width and the second is whatever is left over. The first of the lower frames is called framemenu and it will contain the contents of f2.html. It also has some other attributes - margins are supressed and it is not allowed to have scroll bars. The second column is called framebody and will display f3.html.

The <noframes>...</noframes> block, as its name suggests, is only rendered by the browser if it does not support frames, and so is optional. For quite a few years now all browsers have been able to handle frames, so these days a noframes section is not really required.

Frameset and frame attributes

The commonly used attributes in <frameset> tags are rows and cols. As we have seen, the attribute value is a comma-separated sequence of heights or widths as appropriate, specified as an absolute number of pixels, or a percentage of the page size, or *, meaning whatever is left over.

The <frame> tag has a larger list. The commonly used ones are:

  • name - provides an identifier for the frame
  • src - name of the file which is to provide the contents of the frame
  • frameborder - values are 1 (draw a frame) or 0 (do not draw a frame)
  • marginwidth - the margin width in pixels
  • marginheight - the margin height width in pixels
  • noresize - no value - if present then do not allow resizing
  • scrolling - allowable values are yes, no and auto
  • target - discussed below

The target attribute

Although a page containing frames displays rather like a single subdivided window, in fact each frame has most of the characteristics of a normal window; for example it can have its own scroll bars. This means that by default, a link within a frame, when activated, opens the new page within the same frame. If you want to open a page anywhere else, you need to add a target attribute to the anchor tag which defines the link. The value of the target attribute is the name of the frame which is the target of the link. For example here is the HTML from the menu file f2.html in our example; clicking on a menu item causes the adjacent frame (whose name is "framebody") to change:
<html> <head> <title>Documentation - Frames example 2</title> </head> <body> <center> <h2>Menu</h2> This frame will have the menu which generally will be left hanging around </center> <br><br> <ul> <li>[<a href="frames/frame_body1.html" target="framebody">Pussy cat</a>] <li>[<a href="frames/frame_body2.html" target="framebody">Puppy dog</a>] <li>[<a href="frames/frame_body3.html" target="framebody">Moo cow</a>] </ul> </body> </html>
You can see a working version of the example page in a new window.

In the HTML above the target attribute "points" to a named frame. But there are other possible targets which can be used in anchor tags (and not necessarily just in pages involving frames). There is an example in the link above, which creates a new un-named window and displays the page specified in the href attribute in the new window. The old window remains. This is accomplished with the target attribute using the special value of "_blank", as in:

<a href="framex.html" target="_blank">example page</a>

There are three other special values. "_top" fills the entire current page, even if it is made up of frames. The other two values are less commonly used. "_self" means the frame containing the anchor (which is the default action) and "_parent" is the frameset immediately "above" (in the heirarchy of framesets) the frame containing the anchor.

Inline frames

Inline frames are not widely used but they can be very useful in some circumstances. They have most of the features of individual frames, but their placement on the page is defined in a similar way to images. Here is an example:

<iframe src="frames/details.html" name="details" width="100" height="80" scrolling="auto" frameborder="1" marginwidth="0" marginheight="0" align="right"> Your browser does not support frames: <a href="frames/details.html">see information in a full page</a> </iframe>

You can see how the browser displays this inline frame on the right hand size of this page (or maybe above this line, since some browsers do not seem to support alignment; some also ignore the frame border attribute):

The frame attributes described above (except for noresize - resizing an inline frame is never allowed) are also used for inline frames and function in a similar way. The source of the frame contents is specified using a src attribute, and the height, width and alignment are specified and behave as they do in the <img> tag. The text within the <iframe> tags is not displayed by the browser unless it cannot display frames.

Frames! Bah!

Lots of people do not like frames. There are some good reasons for this, for example:

  • they take longer to load
  • there are more HTML files to keep track of
  • there is less room on the page to display real information
  • they can mess up page navigation, printing and reloading pages
  • they may not be indexed by search engines
  • it is difficult to get the browser's "view source" option to "see" individual frames

References
Top
Previous
Next
Index
Home