Frames!

What are frames?
1. What happens?
2. When should frames be used?
A trivial example
Syntax of the tags
Loading targets
Worked example "compatible" site
DISCLAIMER

1: What are frames?

Firstly it should be pointed out that frames are NOT standard HTML as defined in current W3C HTML3.2 specifications; they are an extension invented by Netscape (who couldn't be bothered to implement the [IMHO] more useful <BANNER> tag suggested by W3C in HTML3.0), and subsequently also adopted by Microsoft in Internet Explorer.
They are however defined in the W3C specifications of HTML4.0; and so I'm attempting to describe them here.

The structure of a framed site is as follows:
The home (index) page starts with a <FRAMESET>....</FRAMESET> element which contain some <FRAME> tags.
The "information" within that element is all held by attributes inside the tags; there is no renderable text to display.
That part should end with a <NOFRAMES>....</NOFRAMES> element; between those tags you can put any conventional HTML code, even a whole page.

1.a: What happens?

A frames-implementing browser will use the attributes in <FRAMESET> to divide the screen into two or more "frames" (or panes or sub-windows), and use the attributes within the <FRAME> tags to decide what other pages to load into each frame. It will then discard everything between <NOFRAMES> and </NOFRAMES>.
A browser which does not implement frames will ignore the <FRAMESET> and <FRAME> tags (and there's no text in that area to display anyway); it will also ignore the <NOFRAMES> and </NOFRAMES> tags, but display everything between them.

1.b: When should frames be used?

My tongue-in-cheek "rule of thumb" is the following list:

Don't use frames (unless there is a life-or-death reason to);
If you do use frames, you MUST provide a thorough <noframes> section;
If you can supply an informative and navigable <noframes> section, that shows you never needed frames in the first place!

;-)

About the only sensible use for these frames is to be able to maintain one "sub-window" permanently displaying the main index or contents list of a site, while a second sub-window is used to display whatever pages (one at a time) you link to from the index.

2: A trivial example:

2.a: File "index/html":

<HTML>
<HEAD><TITLE>My Web Site (you have been framed)</TITLE></HEAD>
<FRAMESET COLS="25%,*">
  <FRAME SRC="synop.html">
  <FRAME SRC="intro.html" NAME="main">
  <NOFRAMES>
    <H1>Contents</H1>
    <UL>
      <LI><A HREF="intro.html"> Page 1: </A> Introduction
      <LI><A HREF="page2.html"> Page 2: </A> Useful Info.
      <LI><A HREF="page3.html"> Page 3: </A> Useless Info
    </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

2.b: File "synop/html":

<HTML>
<HEAD><TITLE>My Web Site: Contents</TITLE></HEAD>
<BODY>
  <H3>Contents</H3>
  <P>
  <A HREF="intro.html" TARGET="main">Page 1:</A><BR>
  Introduction
  <P>
  <A HREF="page2.html" TARGET="main">Page 2:</A><BR>
  Useful Info.
  <P>
  <A HREF="page3.html" TARGET="main">Page 3:</A><BR>
  Useless Info
</BODY>
</HTML>

2.c: File "intro.html":

<HTML>
<HEAD><TITLE>My Web Site: Introduction</TITLE></HEAD>
<BODY>
  <H2>Introduction</H2>

</BODY>
</HTML>

2.d: On a frames-implementing browser, these might appear as:

__________________________________________________________________________
 __                   |  _      _               _          _   _
/   _  _ |_ _  _ |_   | | |_ __| |_ _ _____  __| |_   _ __| |_(_)___ _ __
\__(_)| )|_(-`| )|_/) | | | '_ \ |_| '_/ _ \/ _` | |_| / _/ |_| / _ \ '_ \
                      | |_|_| |_\__|_| \___/\__,_|\__,_\__\___|_\___/_| |_|
                      |
Page 1:               |
-------               |
Introduction          |
                      |
Page 2:               |
-------               |
Useful Info.          |
                      |
Page 3:               |
-------               |
Useless Info          |
                      |
                      |
______________________|___________________________________________________

2.e: Whereas a non-frames browser might show:

__________________________________________________________________________
  ___                _                 _
 / __|  ___   _ __  | |_   ___  _ __  | |_   ___
| |    / _ \ | '_ \ |  _| / _ \| '_ \ |  _| / __|
| |__ ( (_) )| | | || |__(  __/| | | || |__ \__ \
 \___| \___/ |_| |_| \___|\___||_| |_| \___||___/


     o   Page 1:  Introduction
         --------

     o   Page 2:  Useful Info.
         --------

     o   Page 3:  Useless Info
         --------

__________________________________________________________________________

2.f: Notes to that example:

On the page "index/html", the <FRAMESET> appears (and must appear) immediately after the </HEAD>, and similarly the </FRAMESET> is the last thing before the </HTML>; so there is nothing "outside" of the frame set (and therefore no <BODY> tag associated with that part).

The COLS attribute in the <FRAMESET> splits the screen into two columns, one of 25% of screen width, and the second occupying "the remainder".

The second <FRAME> tag includes a NAME attribute.

The section between <NOFRAMES> and </NOFRAMES> is conventional HTML for a home page.

The page "synop/html" looks just like a "conventional" HTML page; but note that all of the <A> anchors include a TARGET="main" attribute to ensure that those linked pages will load into the main right-hand area of the screen (not into the narrow "contents" strip").

The page "intro/html" is a conventional HTML page.

3: Syntax of the tags:

There are just three "new" tags:

a <FRAMESET>....</FRAMESET> pair;
a <FRAME> tag (no closing tag);
a <NOFRAMES>....</NOFRAMES> pair.

3.a: FRAMESETs

can be nested, which is particularly useful if the screen is to be divided both horizontally and vertically.

The two main attributes are ROWS= and COLS=, dividing the screen up into rows and columns respectively. It is permissible to have both attributes in the same one tag to divide up into a tabular grid; but it is probably simpler to use nested FRAMESETS with just one attribute each.
The "value" of a ROWS or COLS attribute has the form of a comma-separated list enclosed in quotes.

Each item in the list can be one of:

A number, interpreted as pixels;
A number followed by "%", being the percentage of total height/width;
A number followed by "*", interpreted as "relative proportions"
(a "*" with no number is equivalent to "1*").

It is permissible to mix any or all of these in the same list: in which case the "n*"-type items are used to divide up whatever is left after the absolute pixel and percentage values have been allotted.

You need to be very careful to make sure that:

The percentages don't add up to more than 100%;
The pixel values don't add up to more than the screen width
(of the visitor's browser: which, of course, you don't actually know!)

To play safe, try to avoid mixing pixels and percentages; but proportions are usually fairly safe to use (and mix with either one of the others).

3.b: FRAME tags

can have a variety of attributes, and in practice will always include at least one of the following:

3.b.i: NAME= :: This has to be present to be able to decide where a page will be put when fetched by a hyperlink; therefore at least one of the frames must be given a NAME (and I recommend you name them all).
NAMEs must be enclosed in quotes, and must start with a letter, followed by any combination of letters, digits, or underscore (but no spaces).
They should be treated as case-sensitive, so it is wisest to stick to lower-case letters throughout.
3.b.ii: SRC= :: This will load a specified page into the frame; the "value" should therefore look like that which would follow HREF= in a link.
The reference will normally be an HTML file; in principle, it could alternatively be an image file, but care is required in doing that.
At least one of the frames (usually the contents-list) must have a SRC= attribute, otherwise you will get a set of blank frames! I would recommend that all frames are pre-loaded with something (unless there's a good reason not to), so that the visitor doesn't think they're missing something.
3.b.iii: FRAMEBORDER=1 or FRAMEBORDER=0 :: These turn a single-pixel line frame border on or off respectively;
by default (no FRAMEBORDER attribute), frame borders are ON.; At least, that's the correct W3C way of doing it; however, there are a number of browsers that operate differently, and expect the <FRAMESET> tag to contain a BORDER="n" attribute, where n is the border width in pixels, or "0" for no border.
It is therefore advisable to include both methods to be sure.
3.b.iv: MARGINWIDTH= and MARGINHEIGHT= :: These can be used to specify a blank area (measured in pixels) respectively either side, or above/below the content of the frame. These are usually an unnecessary complication.
3.b.v: SCROLLING= :: The values this can take are "YES", "NO" or "AUTO":
"YES" means put scroll bars (whether needed or not);
"NO" means omit scroll bars (even when needed!);
"AUTO" leaves it to the browser to decide whether they're needed;
"AUTO" is the default if SCROLLING is absent.
3.b.vi: NORESIZE :: This means the visitor can't resize that frame.

3.c: NOFRAMES tags

do not need any attributes.

The NOFRAMES section will normally be positioned immediately before the last/outermost (closing) </FRAMESET> tag
(this placing is not obligatory, but my recommendation).

Logically speaking, <NOFRAMES> could be followed by a <BODY> tag, and </NOFRAMES> preceded by a </BODY> tag; but received wisdom is that some versions of Netscape don't like that, so it's probably better to omit <BODY> tags (in a frames-setting document)-- this means that you won't be able to set text colours or backgrounds (which probably results in a less over-the-top page anyway ;-)

4: Loading targets:

This is possibly the trickiest bit to get right in a multi-page site!

In a site with no frames, a hyperlink is simply something like
<A HREF="page2.html">Next page</A>
and clicking on it fetches that page and loads it into the one and only frame/window of the browser.

But with a framed site, there will always be room for ambiguity as to WHICH frame the fetched page should appear in!

4.a: TARGETs:

The solution is to add a TARGET attribute to EVERY <A> anchor, ie
<A HREF="page2.html" TARGET="frame_name">Next page</A>
where "frame_name" is whatever was specified as the NAME of the desired frame in a
<FRAME NAME="frame_name"> tag in the frames-defining page.

4.b: NAMEs:

There are in fact four NAMEs which are "reserved" (and must not appear in a <FRAME NAME=...> tag), but can usefully appear as the "value" of the TARGET attribute in an <A> anchor; with the following meanings:

"_self" meaning the same frame as the one containing the <A>;
"_parent" the parent frame of the frame containing the <A>;
"_top" the original "whole" frame/window of the browser;
"_blank" a new and un-named frame (in a new window).

(Note the leading underscore character which guarantees unambiguity).

Note that if the current frame has no parent, then "_parent" is the same as "_self", and "_self" is the same as "_top".

"_blank" will open a new window while preserving the "calling" one.

If an explicit TARGET is not specified, there are some rules for what the "default" target frame should be:

If the <HEAD> block of a page contains a <BASE> tag which includes a TARGET= attribute, then that target is used whenever an <A> link on that page does not contain a TARGET= ;
If neither <A> nor <BASE> tags contain a TARGET, then TARGET="_self" is assumed.

So note that if you have a small "navigation bar" containing links to the various pages/sections within your site, you will NEVER want other pages to be loaded into that frame, so you will ALWAYS have to declare the main frame into which they SHOULD be loaded.
Note also that if you have links to other sites, you will not want them to be loaded into any small frame, but to "take over" the whole window, so you MUST include a TARGET="_top" in those links.

So far, I've only said that the TARGET= attribute occurs in <A> tags; in fact, it can occur in other tags which can contain a HREF= attribute, in particular, in an <AREA> tag within a <MAP> definition block, and also within a <FORM METHOD=GET ACTION="http://reference"> tag.

4.c: "Back to Home Page"?:

In a site with no frames, it is conventional for each of the additional pages to contain a return link at the foot of the page, such as
<A HREF="index.html">Back to HomePage</A> .

This causes chaos on a framed site!
That page would have been loaded into one of the frames, and so the link given above would load "index/html" into that frame; "index/html" would then sub-divide that frame up into further sub-frames . . . . . Arrghh!!

Using <A HREF="index.html" TARGET="_top">Back to HomePage</A>
avoids that "nesting" problem, but is NOT a satisfactory solution as the browser now has to re-create and re-fetch all the frames; including the "navigation" frame, and the whole point of using frames is that that frame is supposed to remain unchanged and not need refreshing!

Creating a site which is viewable by both frames-implementing browsers AND non-framing browsers requires quite a bit of care if it is to be equally informative and navigable under all conditions!

5: Worked example "compatible" site:

The "starting" page will always be called "index.html".
Let's assume that it creates three frames:

A shallow strip across the top containing a logo image
(filename "logo/html");
A quarter-width column on the left containing links to navigate around your site
(filename "navig/html);
The remainder of the window (frame-name "main"), initially containing a "Welcome" page
(filename "hello/html").

Let's also assume that you have three more pages on your site, filenamed:

"about/html" (personal details, hobbies etc);
"softw/html" (programs and software to download);
"links/html" (links to other sites);

all of which should appear (when requested) in the "main" frame.

The code below will work, but needs padding out to make a real site!

5.a: File "index/html":

<HTML>
<HEAD><TITLE>My Home Page (frames-compatible)</TITLE></HEAD>
<FRAMESET ROWS="100,*">
  <FRAME SRC="logo.html" SCROLLING=NO>
  <FRAMESET COLS="25%,*">
    <FRAME SRC="navig.html" SCROLLING=AUTO>
    <FRAME SRC="hello.html" NAME="main" SCROLLING=YES>
  </FRAMESET>
  <NOFRAMES>
  <H2>Welcome to my Home Page!</H2>
  <EM>This site can be viewed equally well with or without frames</EM>
  <UL>
    <LI><A HREF="about.html">About me, and my Hobbies</A>
    <LI><A HREF="softw.html">Programs &amp; Software </A> to download
    <LI><A HREF="links.html">Links </A> to other interesting sites
  </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

5.b: File "logo/html":

<HTML>
<HEAD><TITLE>(Logo for my web site)</TITLE></HEAD>
<DIV ALIGN=CENTER>
<IMG SRC="mylogo.gif" ALT="My logo should have been here">
</DIV></HTML>

5.c: File "navig/html":

<HTML>
<HEAD><TITLE>My Home Page (Contents)</TITLE></HEAD>
<BODY>
<UL>
  <LI><A HREF="about.html" TARGET="main">About me</A>,<BR>
      and my Hobbies
  <LI><A HREF="softw.html" TARGET="main">Programs &amp; Software</A><BR>
      to download
  <LI><A HREF="links.html" TARGET="main">Links</A><BR>
      to other interesting sites
</UL>
</BODY></HTML>

5.d: File "hello/html":

<HTML>
<HEAD><TITLE>Welcome to my Home Page</TITLE></HEAD>
<BODY>
<CENTER>
  <H2>Welcome to my Home Page!</H2>
  <EM>This site can be viewed equally well with or without frames</EM>
</CENTER>
<NOFRAMES>
  <UL>
    <LI><A HREF="about.html">About me, and my Hobbies</A>
    <LI><A HREF="softw.html">Programs &amp; Software </A> to download
    <LI><A HREF="links.html">Links </A> to other interesting sites
  </UL>
</NOFRAMES>
</BODY>
</HTML>

5.e: File "about/html":

<HTML>
<HEAD><TITLE>All about me</TITLE></HEAD>
<BODY>
<CENTER>
  <H1>All about me</H1>
  <IMG SRC="photo.jpeg" ALT="Mugshot">
</CENTER>
<DL>
  <DT>Age
    <DD>56, going on 18
  <DT>Hobbies
    <DD>Writing incomprehensible HTML tutors
</DL>
<HR>
<A HREF="hello.html" TARGET="main">Back to Home Page</A><BR>
<NOFRAMES>
  <A HREF="softw.html">Programs &amp; Software </A> to download<BR>
  <A HREF="links.html">Links </A> to other interesting sites<BR>
</NOFRAMES>
</BODY>
</HTML>

5.f: File "softw.html":

<HTML>
<HEAD><TITLE>My Software</TITLE></HEAD>
<BODY>
<CENTER>
  <H1>My Software</H1>
</CENTER>
<UL>
  <LI><A HREF="beep.zip">!Beep</A> Makes a beeping sound (63MB)
</UL>
<HR>
<A HREF="hello.html" TARGET="main">Back to Home Page</A><BR>
<NOFRAMES>
  <A HREF="about.html">About me</A>, and my Hobbies<BR>
  <A HREF="links.html">Links </A> to other interesting sites<BR>
</NOFRAMES>
</BODY>
</HTML>

5.g: File "links/html":

<HTML>
<HEAD><TITLE>My favourite Links</TITLE></HEAD>
<BODY>
<CENTER>
  <H2>My favourite Links</H2>
</CENTER>
<UL>
  <LI><A HREF="http://www.acorn.co.uk"   TARGET="_top">Acorn</A>
  <LI><A HREF="http://www.argonet.co.uk" TARGET="_top">Argonet</A>
</UL>
<HR>
<A HREF="hello.html" TARGET="main">Back to Home Page</A><BR>
<NOFRAMES>
  <A HREF="about.html">About me</A>, and my Hobbies<BR>
  <A HREF="softw.html">Programs &amp; Software </A> to download<BR>
</NOFRAMES>
</BODY>
</HTML>

5.h: Comments:

Theoretically it is permissible to replace the first <FRAME> tag in "index/html" by
<FRAME SRC="mylogo.gif" ALIGN=CENTRE SCROLLING=NO>
which should bypass the need to fetch an HTML file just to fetch a GIF; but my cynicism has strong doubts as to the reliability of that!

The <HEAD> section of "navig/html" could have included an additional <BASE TARGET="main"> tag so that the individual TARGETs could be omitted from the <A> links; but I'm never too happy about using <BASE> tags on pages which might be moved around and viewed from different "servers", and equally I don't know how trustworthy browsers are in obeying that tag/attribute combination.

Clearly, this "site" has a number of files missing ("mylogo/gif", "photo/jpeg" and "beep/zip" for example);
and the two <IMG> tags should have WIDTH= and HEIGHT= attributes.

Nevertheless, it should work; although I've found one oddity:
If a frames-implementing browser comes across a <NOFRAMES> section within the <BODY> section of a page, it is SUPPOSED to skip it (and I've used that in an attempt to suppress redundant index links); but I seem to get them still appearing on both ArcWeb-with-frames and Acorn/VoyBrowse :-[ Oh well, you can't win 'em all!

Some authors will create two complete versions of a site, one with frames and one without, because ideally the pages will be not quite identical in the two versions; clearly this makes for unwanted extra work.
This probably is yet another reason for avoiding creating framed sites unless absolutely necessary!

6: DISCLAIMER:

All the above ramblings are definitely unofficial;
If you want the proper specification for frames, visit the W3C site for the latest information on HTML4.0; a good starting point for the Technical References is http://www.w3.org/TR/ Link to W3C

Up to Contents/Index . . . . . . . . . . . Back to Tutorials page . . . . . . . . . . . Back to Home Page

John Alldred
19 June 1999
john@protovale.co.uk
http://www.protovale.co.uk/john/