Basic Web Page - Pictures

In this section you will learn how to use frames. Please click here to view the example web page you'll create. Within this example the main page is split into two frames.

Frames are generally thought of as a difficult concept to understand. The code from this example is displayed below...

<HTML>

<HEAD>

<TITLE>The Beatles</TITLE>

<FRAMESET BORDER=0 frameborder="0" cols="15%,*">

    <FRAME SRC="left.htm" NAME="left" SCROLLING=NO>

    <FRAME SRC="right.htm" NAME ="right" SCROLLING=YES>

    <NOFRAMES>

      <p>I am sorry you need frames to view this site

    </NOFRAMES>

</FRAMESET>

This code is now explained...

<FRAMESET BORDER=0 frameborder="0" cols="15%,*">
This defines that the page is to be split into two frames. The left frame is to take up 15% of the browser's width. The right frame is to take up the remaining space.
Note: If the command rows="15%,*" had been used then the page would have been split horizontally with the top frame taking up 15% of the browser height.

<FRAMESET SRC="left.htm" NAME="left" SCROLLING=NO>
This tells the browser to insert the page left.htm into the first frame (the left hand frame). This is given a reference name of left. Scrolling is disabled.

<FRAMESET SRC="right.htm" NAME="right" SCROLLING=YES>
Similarly this defines the second frame.

<NOFRAMES>
If the user has a browser which does not support frames then the code after this tag will be what they see. In this example the words "I am sorry you need frames to view this site" are used. On a proper site you would give the non-frames user an alternative way of navigating the site (go to the home page of webgeordie and view the source code to see what we do). Again the tag </NOFRAMES> completes the code.

So far we have set up the framework of the page now we will look at the content. Click here to see the page left.htm which is located in the left hand frame.

The following code provides the link for the albums page.

<a href="albums.htm" target="right">List of Albums</a>

It is the same as a normal link but with a target. The name of the target in this example is right - this will display the page albums.htm in the frame named right.

If this target had not been specified the default location would be the current frame (i.e. the left frame).

Other common targets are...

target="_top" - location of the new page is the whole browser.

target="_blank" - location of the new page is a new window.

target="_parent" - location of the new page is the parent frame.

Web Tutor

Worth your time