RichInStyle.com
 Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts
Introduction Beginning HTML Content Formatting Links Essential concepts Images

Advanced concepts
Essential concepts 2 Tables Objects Frames Scripts Forms Languages

RichInStyle.com HTML 4 guide - Frames

Contents

Introduction to frames

FRAMESET

FRAMESET examples

Nesting of FRAMESET

FRAME

Loading documents in a target frame

NOFRAMES

IFRAME

Introduction to frames

Frames allow you to have several documents open in one window. They are typically used in Webmail and more generally for page navigation. They allow independent scrolling of separate documents - you can have one frame with a list of links, and the other frame to load the pages in.

For example:

<HTML>
<HEAD>
<TITLE>
Frameset
</TITLE>
</HEAD>
<FRAMESET cols="25%, 75%">
  <FRAME src="frame1.htm">
  <FRAME src="frame2.htm">
<NOFRAMES>
Sorry, your browser doesn't support frames.
</NOFRAMES>
</FRAMESET>
</HTML>

That would be rendered as:

Frame 1 Frame 2

FRAMESET

The FRAMESET element in a FRAMESET page takes the place of the BODY element.

The FRAMESET element takes two principal attributes: rows and cols.

These attributes specify whether the frameset should be divided into columns:

Frame 1 Frame 2

Or rows:

Frame 1
Frame 2

Each of these attributes takes as its value a comma-separated list of values specified in pixels (e.g., 100), percentages (e.g., 50%) or relative lengths.

If rows/cols is omitted, each is set to 100%, which means that columns/rows are a page wide/high.

Frames are created left-to-right from top row to bottom.

Where absolute lengths do not add up to 100% of the available space, each frame is are adjusted in size so that it does.

Examples

<FRAMESET rows="50%, 10%, *, 100">

This would divide the screen into four, the top 50% of the height of the screen; the next one down 10%; the next one down equal to the remaining space minus the 100 for the bottom frame. (N.B. * is equivalent to 1*).

<FRAMESET cols="100, 4*, .5*">

This would divide the screen horizontally into a left 100px frame, a middle frame occupying 8/9 of the remaining space (4 /4+4.5) and the right frame the other ninth.

Nesting of FRAMESET

FRAMESETs may be nested. E.g.:

<FRAMESET rows="50%, 50%">
  <FRAMESET cols="50%, 50%">
    <FRAME src="frame1.html">
    <FRAME src="frame2.html">
  </FRAMESET>
  <FRAME src="frame2.html">
</FRAMESET>

Might be rendered as:

FRAME

This specifies the location of each frame and their characteristics. Location is specified using the src attribute. E.g., src="frame1.html".

Its other attributes are:

  1. name - essential if documents are going to be loaded in the frame; e.g., <FRAME src="frame.html" name="myframe">
  2. title = a title - useful for non-visual browsers. E.g., title="Ad frame"
  3. noresize - e.g., <FRAME src="frame.html"> - prevents resizing of the FRAME by the user
  4. scrolling; specifies scrolling usage - auto (scroll bar when required) (default value), yes (scroll bar always), no (scroll bar never) E.g., scrolling="auto"
  5. frameborder; specifies whether to draw a border between the frame and other frames. Can be set to 1 (draw border - default value) or 0 (do not draw border).
  6. marginwidth; specifies the amount of space between a frame and its contents on the left and right. E.g., marginwidth=10. This cannot be less than 1.
  7. marginheight; specifies the amount of space between a frame and its contents above and below it. This cannot be less than 1.
  8. longdesc = a link to a longer description than that provided by title. E.g., <FRAME longdesc="http://www.foo.com". Long descriptions should describe the frame, not its content.

Loading documents in a target frame

This is done using the target attribute on A. E.g.:

<FRAMESET cols="25%, 75%">
  <FRAME src="menu.html">
  <FRAME src="introduction.html" name="main">
</FRAMESET>

menu.html:

<A href="whatever.html" target="main">

Thus by addition of the target attribute, the page is set to load in a different frame.

To avoid having to set the target attribute on every A, you use the BASE element with target - <BASE target="main"> would set pages to load in main unless a different target was specified.

NOFRAMES

You should always include the NOFRAMES element for the benefit of browsers that do not support frames. This content will only be rendered if frames are unsupported.

Note that NOFRAMES must occur inside FRAMESET.

<FRAMESET cols="25%, 75%">
  <FRAME src="menu.html">
  <FRAME src="introduction.html" name="main">
<NOFRAMES>
Alternative content for browsers that do not support frames including a <A href="noframes.html">means</A> of alternative access.
</NOFRAMES>
</FRAMESET>

IFRAME

The IFRAME or inline frame element is a newer addition to HTML and is only supported by Internet Explorer 4 and 5 - not Netscape 4.

It is used in exactly the same way as FRAME except that it goes inline with content. It takes exactly the same attributes as FRAME except:

  1. it does not take noresize since inline frames cannot be resized
  2. it takes the height and width attributes, which must be specified in pixels, and specify the dimensions of the inline frame
  3. since it is just an element like P or TABLE, it can be left or right aligned

For example:

<IFRAME src="page.html" width="100" height="100">
Content that won't be rendered if the browser supports inline frames.
</IFRAME>

Thus instead of NOFRAMES, the alternate content for old browsers is simply placed inside the element.

Note that since inline frames can be NAMEd, they can be the subject of <A href="" target=""> links.

The next section of this HTML 4 guide deals with scripts (such as JavaScript).

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.