myatari.net : HTML Basics

HTML Basics - Part 12 of 12
by Matthew Bacon

Frames
HTML frames allow you to divide the main browser window into several sections, each of which display a different page (i.e. you can have more than one web page on screen at once!). For example your browser window could look like this...

Please study carefully the examples below. A web page that contains frames is not structured in the same way as the pages you have studied and written before. For example, the page does not contain a body section, as shown below.

<HTML>
<HEAD>
     <TITLE>Simple frame example</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
    <FRAME SRC="contents.htm">
    <FRAME SRC="main.htm">
    <NOFRAMES>
    Unfortunately, your browser is not capable 
    of displaying frames. Click <A HREF="main.htm">
    here</A> to view a frame-free alternative.<P>
    Thank you.
    </NOFRAMES>
</FRAMESET>
</HTML>

To create frames the tags <FRAMESET> ... </FRAMESET> are used. The <FRAMESET> tag takes the following attributes:

COLS=""
Defines the number of columns. The following format is used.
<FRAMESET COLS="10%,100,*">

The above example defines three columns. The first column is 10% of the browser window, the second is 100 pixels across while the character, * represents "the remainder".
FRAMEBORDER=
If the frame is to be displayed with a 3D border, the value 1 should be used (the default). If no border should be displayed, the value 0 is used.
FRAMESPACING=
The value used represents the distance, in pixels, between the frames.
ROWS=""
Defines the number of rows. The following format is used.
<FRAMESET ROWS="50%,80,*">

The above example defines three rows. The first row is 50% of the browser window, the second is 80 pixels down while the character, * represents "the remainder".

The <FRAME> tag takes the following key attributes:

FRAMEBORDER=
If the frame is to be displayed with a 3D border, the value 1 should be used (the default). If no border should be displayed, the value 0 is used.
MARGINHEIGHT= The value used represents the distance, in pixels, between the top and bottom edges of a frame and its contents.
MARGINWIDTH= The value used represents the distance, in pixels, between the left and right edges of a frame and its contents.
NAME="" A name can be given to a frame. This can then be used in conjunction with the hypertext link tag to direct a link into a particular window. In the example below, the file INDEX.HTM will be displayed in the frame named frame 1.

<A HREF="index.htm" TARGET="frame 1">...</A>

NORESIZE This prevents the resizing of the frame.
SRC="" Defines the web page to be displayed within the frame.

Because some older browsers are unable to display HTML frames, it is polite to provide a frame-free alternative. This is achieved by creating a hypertext link within the tags, <NOFRAMES> ... </NOFRAMES> as shown below.

<NOFRAMES>
   Unfortunately, your browser is not capable of
   displaying frames. Click <A HREF="...">here</A> 
   to view a frame-free alternative.<P>Thank you.
</NOFRAMES>

We have only scratched the surface of using frames. To get an idea of what is possible, I'd recommend studying the HTML source code of other web pages that use frames that you come across while surfing the World Wide Web.

The following example can be seen by clicking here (your browser will need to support frames!).

<HTML>
<HEAD>
        <TITLE>Example frame Web page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
        <FRAMESET ROWS="50%,50%">
                <FRAME FRAMEBORDER=0 SRC="html_1.htm">
                <FRAME FRAMEBORDER=0 SRC="html_2.htm">
        </FRAMESET>
        <FRAMESET ROWS="33%,33%,33%">
                <FRAME FRAMEBORDER=0 SRC="html_3.htm">
                <FRAME FRAMEBORDER=0 SRC="html_4.htm">
                <FRAME FRAMEBORDER=0 SRC="html_5.htm">
        </FRAMESET>
 
        <NOFRAMES>
                Unfortunately, your browser is not 
                capable of displaying frames. Click 
                <A HREF="html_1.htm">here</A> to view 
                a frame-free alternative.<P>Thank you.
        </NOFRAMES>
</FRAMESET>
</HTML>

The End

Where now...?
Now that you have followed the MyAtari magazine HTML tutorial series, you now have a good grounding in how HTML works. You should hopefully now find it relatively easy to spice up your web pages.

If you wish to investigate HTML further, there are some excellent resources via the World Wide Web. Alternatively, pop along to your nearest bookshop and purchase a guide to HTML (you will be spoilt for choice!).

Happy HTML :-)

MyAtari magazine - Tutorial #12, April 2001

Contents
Features
Reviews
Tutorials
Regulars
Adverts

[ Top of page ]