Pages in Frames

Fancy the navigation bar I used for this tutorial? You can create one yourself! Its easy. All you need is using frames.

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

To use frame, you have to use <FRAMESET> </FRAMESET> to mark out the frame layout. Let's create a frame set with your index.html. Use gedit to open the index.html, then paste following text:

<HTML>
<HEAD>
<TITLE> My Navigator </TITLE>
</HEAD>

<FRAMESET COLS="25%,75%" FRAMEBORDER="NO" >
<FRAME SRC="navigator.html" NAME="navigator" SCROLLING="auto">
<FRAME SRC="self.html" NAME="mainFrame">
</FRAMESET>

</HTML>

The <FRAMESET> tag defines how to divide the window into frames. COLS/ROWS specifies that first column/row is set to 25% of the width of the browser window and the second column/row is set to 75% of the width of the browser window. The frameset column/row size value can also be set in pixels (COLS="200,500"), and one of the columns/rows can be set to use the remaining space (COLS="200,*"). We also use FRAMEBORDER="NO" to disable the argly bars between each frames.

The <FRAME> tag defines what HTML document to put into each frame. SRC gives its source file and NAME specifies a name associated with this frame, which is very important for the navigation bar.

If you now go to your homepage, www.doc.ic.ac.uk/~username, you will see that the browser window is divided into two parts. The right one is the self.html we just created and the left one is still faulty because the source file navigator.html is yet to create. So let's do it!

Again use gedit to create a file navigator.html, and copy the following line into it:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>About Me and Doc</P>
<P>Doc website</P>
<P>CSG website</P>
<P>BBC</P>
<BODY>
</HTML>

Refresh your browser and you will see a list of items on the left hand side. But how to make them clickable?

Yes, we use <A> and </A>. Give it a go and change the About Me and Doc item into

<P><A HREF="self.html"> About Me and Doc</A></P>

Save the file and refresh your browser, you will see the first item is clickable. However, the behavior is not what we want (try clicking on it!)

How to solve this problem? Easy, we specify the target as the name of the frame we want to display the target page:

<P><A HREF="self.html" TARGET = "mainFrame" > About Me and Doc</A></P>

Refresh and click. You probably don't see anything because you replacing the main frame with the same page. Try making the rest of the item hyperlinks:

<P><A HREF="self.html" target = "mainFrame" > About Me and Doc</A></P>
<P><A HREF="http://www.doc.ic.ac.uk" target = "mainFrame" > Doc Website</A></P>
<P><A HREF="http://www.ic.ac.uk/library" target = "mainFrame" > Imperial Library</A></P>
<P><A HREF="http://www.bbc.co.uk" target = "mainFrame" > BBC </A></P>
<P><A HREF="http://www.youtube.com" target = "mainFrame" > Youtube </A></P>
<P><A HREF="http://www.doc.ic.ac.uk/~lmei" target = "mainFrame" > Creating Websites</A></P>

N ow you can create a collection of bookmarks and put them online using this technique :)

To give the navigation bar a gray background color, you have to add the following lines between <HEAD> and </HEAD>

<body bgcolor="#CCCCCC">

More looking control? You have to use CSS! It allows much richer customization of font, color and layout. Most of the commercial website nowadays use CSS. Find out more about this technology, go to w3schools.

Next step: Make your website hear from its visitors.