Home | E-mail
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 :-)
Previous |
MyAtari magazine - Tutorial #12, April 2001 | Contents Features Reviews Tutorials Regulars Adverts
[ Top of page ]
Copyright © 2001 MyAtari