An interactive introduction to HTML and CGI scripts on the WWW (courseware)

Contents

Introduction
Frames
Frameset attributes
Frame attributes
Nesting frame windows
Targeting URL contents

Warning if you are not using a browser that supports frames
such as Netscape 2.0 / Internet Explorer 3.0 or later then this page
will probably be very difficult to read.

Preface

The following symbol is used in this document:

It is a hypertext link to a web page containing examples of the HTML features under discussion. The reader can if they wish modify the text to try out their own ideas of style and formatting.

The best way of using this feature is to open a new window containing this link. Then after trying out the features close the window to continue browsing the original document.
In Netscape this is achieved by moving the cursor over the symbol and pressing the left mouse button. This selects a series of options contained in a pop up window. Select the option to start a new window / browser with this link.

Introduction
These WWW (World Wide Web) pages are written using a non standard form of HTML (HyperText Markup Language) used by web browsers developed by the Netscape corporation and implemented also by Microsoft.

It is not yet clear whether other manufacturers will also support these features. However as Netscape and Microsoft have 80%+ of the market this consideration may prove academic.

Browsers capable of displaying this information include:

Netscape 2.0 and later
Internet Explorer 3.0 and later

In describing these new feature of HTML the aim has been to concentrate on the more widely used and useful features. However, in many ways this still remains a personal selection.

Frames

A web page may be split into several individual frame windows. Each frame contains the result of accessing an URL.

The tags <FRAMESET> </FRAMESET> form a container, for URL's which will be displayed in individual windows in a single web browser page. The tags <FRAMESET> <FRAMESET> replace the normal body tags <BODY> </BODY>. The attributes of the tag define the size and shape of these frame windows.

For example, the tag <FRAMESET COLS="30%,70%"> specifies that the frameset will contain two frames, tiled in columns, with the first frame occupying 30% of the browser window, and the second frame 70%.

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > </FRAMESET> </HTML>

It is usual to add the tags <NOFRAMES> </NOFRAMES> so that a browser that does not support frames will at least see something. As all unrecognised tags are ignored, the viewer will be presented with the remaining text. A browser that supports frames, will ignore the text between <NOFRAMES> and </NOFRAMES>. For example:

  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
  <FRAMESET COLS="30%,70%">
   <NOFRAMES>Sorry does not support frames</NOFRAMES>
   <FRAME SRC=fr-txt1.html >
   <FRAME SRC=fr-txt2.html >
  </FRAMESET>
  </HTML>

For example, the tag <FRAMESET ROWS="30%,30%,40%"> specifies that the frameset will contain three frames, tiled in rows, with the first frame occupying 30% of the browser window, the second frame also 30% and the final frame 40%.

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET ROWS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

For example, the tag <FRAMESET COLS="30%,30%,40%"> specifies that the frameset will contain three frames, tiled in cols, with the first frame occupying 30% of the browser window, the second frame also 30% and the last frame 40%.

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

Frameset attributes

The attributes to a <FRAMESET> are:

ROWS= COLS=
Which define the number of rows or columns that the frameset is to have. The possible values of these attributes are:
- "value%"
  A relative size as a percentage.
  For example: "10%,40%,50%" first frame 10% of total size, second frame 40% of total size, third frame 50% of total size.
- "value*"
  A relative size.
  For example: "*3,*" would allocate 3/4 of the frame size to the first frame the rest to the second.
- "value"
  An absolute size in pixels.
  For example: "50,*" would allocate 50 pixels to the first frame, the remaining space to the second frame.
FRAMEBORDER=
Specifies if the frame set has borders around each individual frame. Possible values YES, NO.
BORDER=
Specifies in pixels the gap between frames in the frame set. A 0 indicates no gap.

Frame attributes

The attributes to a <FRAME> are:

SRC=
The URL of the document to be displayed in the frame.
NAME=
The name of the frame. This is required so that a URL can be targeted into the frame window.
BORDER=
Specifies in pixels the size of the border round the frame. A 0 indicates no frame border.
MARGINHEIGHT=
Specifies in pixels the margin width of the frame.
MARGINWIDTH=
Specifies in pixels the margin height of the frame.
SCROLLING=
NO - No scroll bars. YES - Scroll bars, AUTO - Let the browser choose. The default is AUTO.
NORESIZE
Prohibit the person browsing the document re-sizing the frame window.

Nesting frame windows
The <FRAMESET> tag may be nested to give more complex layouts. For example, for a layout of two columns, with the first column split into two rows, and the second column split into three rows the layout is as follows:

View result	HTML frame markup required
To see the result of HTML on the RHS open a window with this link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt1.html > </FRAMESET> <FRAMESET ROWS="40%,20%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </FRAMESET> </HTML>

View result

HTML frame markup required

To see the result of HTML on the RHS open a window with this link in a new browser window.

  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
   <FRAMESET COLS="50%,50%">
     <FRAMESET ROWS="50%,50%">
       <FRAME SRC=fr-txt1.html >
       <FRAME SRC=fr-txt1.html >
     </FRAMESET>
     <FRAMESET ROWS="40%,20%,40%">
       <FRAME SRC=fr-txt1.html >
       <FRAME SRC=fr-txt2.html >
       <FRAME SRC=fr-txt3.html >
     </FRAMESET>
   </FRAMESET>
  </HTML>

Targeting windows for output

A frame window can contain links which when accessed will cause their content to be displayed in another window. For example:

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with targeting</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt11.html > <FRAME SRC=fr-txt12.html NAME="results"> </FRAMESET> </HTML>

The <FRAME> tag is named with NAME attribute. An <A HREF="URL"> tag may have the addition attribute TARGET to name the frame window into which the file described by the URL is to be loaded.

Partial contents of file fr-txt11.html	Partial contents of file fr-txt22.html
<UL> <LI><A HREF="fr-txt21.html" TARGET="results"> Display A</A> <LI><A HREF="fr-txt22.html" TARGET="results"> Display B</A> <LI><A HREF="fr-txt23.html" TARGET="results"> Display C</A> </UL>	<H2>Display B</H2> B is the second letter of the alphabet.

Partial contents of file
fr-txt11.html

Partial contents of file
fr-txt22.html

<UL>
<LI><A HREF="fr-txt21.html" 
       TARGET="results">
       Display A</A>
<LI><A HREF="fr-txt22.html" 
       TARGET="results">
       Display B</A>
<LI><A HREF="fr-txt23.html" 
       TARGET="results">
       Display C</A>
</UL>

<H2>Display B</H2>
B is the second letter 
of the alphabet.

Special targets for URL's. For example:

<A HREF="All_window" TARGET="_top">all of window </A>

will target the URL all_window to fill the browser window.

Other reserved targets include:

TARGET="_blank"
A new empty window. Neat way of spawning a new window from within HTML.
TARGET="_self"
The same window as the anchor.
TARGET="_parent"
The parent of the frame. A nice way of implementing back.
TARGET="_top"
Targets the whole of the browser window. A nice way of implementing an escape from a framed window.

Warning if you are not using a browser that supports frames
such as Netscape 2.0 or later then this page
will probably be very difficult to read.

© M.A.Smith University of Brighton. Created July 1995 last modified June 1999.
Comments, suggestions, etc. M.A.Smith at brighton dot ac dot uk * [Home page] [CGI Environment variables]