HTML Frames:

INTRODUCTION

Frames can divide the screen into separate windows.

Each of these windows can contain an HTML document.

A file that specifies how the screen is divided into frames is called a frameset.

If you want to make a homepage that uses frames you should:

make an HTML document with the frameset
make the normal HTML documents that should be loaded into each of these frames.

When a frameset page is loaded, the browser automatically loads each of the pages associated with the frames.

BASIC EXAMPLE

A frameset is simply an HTML document that tells the browser how to divide the screen into split windows.

The HTML for the above frameset:

<html>
<head>
<title>My Frames Page</title>
</head>

<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm" name="main">
<frame src="bottombanner.htm" name="bottom">
</frameset>
</frameset>

</html>

Note that the frameset is only seven lines!

Let's split it all up and add the lines one by one...

CREATING A FRAMESET

As stated on the previous page, a frameset is simply an HTML document that tells the browser how to divide the screen into split windows.

If the frameset looked like this:

The code would be:

The screen is divided into two columns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).

The frame windows would have no names, so the frameset really couldn't be used for any purpose.

Proceed to learn how to add names and default pages that load into your frame windows...

DEFAULT PAGES

You can add default pages to frame windows with the src setting.

Default pages are the pages that will be loaded when the frameset is opened the first time.

Furthermore, we can add names to each frame window using the name setting.

This will allow us to make a link in one frame window, open a page in another frame window.

In this example we added names and default pages to the frame windows:

<frameset cols="120,*" >
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>

The entire frameset will look like this:

m
e
n
u

main

We still have the screen divided in two columns, the left being 120 pixels the right using the rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats why the * is needed).

But now we also have told the browser that the left frame window should load an HTML page called menu.htm and that the right window should load an HTML document called frontf.htm.

In addition we have assigned the names menu and main to the two frame windows, so now we're even able to link to specific windows.

We called the frame windows menu and main, but you could name them whatever you pleased.

The frameset with a menu window to the left and a main window to the right is the most common frameset seen on the web.

There are a few more settings we could add to the frameset.

For instance you might want the frame borders to be invisible.

Proceed to the next page to learn how....

BORDERS

To make frame borders invisible you simply need to add the parameters "cols-line" to the frameset :

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>

The entire frameset would now look like this:

m
e
n
u

main

We could still add a few more parameters to our frameset....

RESIZEABLE WINDOWS

If you don’t want the frame windows to be resizeable, you should add the parameter "noresize" to the frame src lines:

Now let's proceed with even more parameters for our frameset...

SCROLLBARS

Lets say you don’t want a scroll bar in the menu window.

Furthermore the main window should have a scrollbar if needed (if the HTML document doesn’t fit in the window), but if not needed - there should be no scrollbars.

Then the code should look like this:

If you leave out the setting for scrolling, a scrollbar will appear if needed - otherwise not.

The next page explains in detail how to link within a frameset...

LINKS WITHIN

If you have an HTML document with a hyperlink on the text "Outline" for instance, that links to a page called "Outline.htm" then it appears in the document as:

Jump to the <a href="http://scitec.uwichill.edu.bb/cmp/online/Cs22k/outline.htm">Outline.htm</a> syllabus for this course.

Now if the link was in the menu window of our example, and we wanted it to load a page in the main window, the HTML code would be:

Jump to the <a href="http://scitec.uwichill.edu.bb/cmp/online/Cs22k/outline.htm" target="main">Outline</a> syllabus for this course.

We simply added the parameter target="main" to
the <a href> tag.

Now the link will be opened in the main frame window instead of the menu frame window where the link itself is located.

Four target names are reserved, and will be interpreted by the browser in this way:

_blank loads the page into a new browser window
_self loads the page into the current window.
_parent loads the page into the frame that is superior to the frame the hyperlink is in.
_top cancels all frames, loads in full browser window.

If you read through the pages in this section you should know just about all there is to know about framesets in HTML.

EXAMPLES

On this page you can see examples of different framesets.

top

bottom

bottom

top
left	right

topleft	topright
botleft	botright

topleft	topright
botleft	brtl	brtr
	botrbot

topleft	topright
botleft	botright

topleft	topright
botleft	botright