Working with Frames

Frames are the ability to divide a browser window into separate sections. Each section is called a frame, and you can load a separate web page into each frame.

This is accomplished with the <FRAMESET> tag. For example, if you wanted a web page to have 2 frames, it would involve the use of, not 2, but 3 web page (HTML) documents: the page that will go in the first frame, the page that will go in the second frame, and a third page called the top-level document. The top-level document is the one which contains the <FRAMESET> tag and defines how the frames will be set up. <FRAMESET> is used in place of the <BODY> tag. Here is an example top-level document called "top.html":

<HTML>
<FRAMESET ROWS="70%,*">
  <FRAME SRC="ex1_top.html">
  <FRAME SRC="ex1_bottom.html">
</FRAMESET>
</HTML>

A single <FRAMESET> tag will divide a web page into two sections. The <FRAMESET> tag above uses the attribute ROWS which says that the page will be divided horizontally (into two rows.) Alternatively, one could use the attribute COLS which would divide the page vertically (into two columns.) The "70%,*" means that the first frame will take up 70% of the browser window, and the * means that the second frame will take up the remaining space (30%). You can change the percentage to whatever you want.

The next new tag is the <FRAME> tag. <FRAME> specifies the web pages which get loaded into the two newly created frames by using the SRC (source) attribute. The first (top) frame will have the file "ex1_top.html" loaded into it, and the second (bottom) frame will have the file "ex1_bottom.html" loaded into it. One <FRAME> tag is required for each frame you have. Let's actually load top.html to see how it looks. If you wish, you can take a look at the individual web pages in the frames as well: ex1_top.html and ex1_bottom.html (though you normally wouldn't load these directly if you were using frames.)

An Example

One common use is to divide the browser window into two frames. The first frame, called a menu frame, holds links which you wish to remain on screen. These links open the new pages into the second frame. Thus a permanent "table of contents" is always available to the user for navigation. This example illustrates, with the left frame used as the menu, and the right frame having different pages loaded into it. Let's see how this is done.

First, we'll set up our top-level document. This time we'll use COLS instead of ROWS to make two vertical sections. We'll also give names to our frames. We'll need these later so that the links in the menu will know which frame to load the pages into:

<HTML>
<FRAMESET ROWS="20%,*">
  <FRAME SRC="menu.html" name="left">
  <FRAME SRC="home.html" name="right">
</FRAMESET>
</HTML>

The names of the frames are made up by you. I've named my two frames left and right. "home.html", along with "personal.html" and "work.html", are the names of the web pages which can be loaded into the right frame via the menu frame. These three pages were created normally. All that is left to do is to create the menu web page, called "menu.html", which will contain the links to these three pages. We use standard anchor tags for the links, but include the target attribute, which will tell the link which frame to load the page into. "menu.html" looks like this:

<HTML>
<BODY>
<a href="home.html" target="right">Home</a>
<a href="personal.html" target="right">Personal</a>
<a href="work.html" target="right">Work</a>
<P>
<a href="../frames.html" target="_top">Back to tutorial</a>
</BODY>
</HTML>

By using target="right" in the first three links, we indicate that we want those pages loaded into the frame we named "right" back in the top-level document. The last link, which exits the example, uses target="_top". "_top" is a reserved word which tells the browser to load the new page in the full browser window, without frames. This is the standard way to leave the frame format. Note that the underscore before top is mandatory.

Multiple Frames

Finally, we present an example using multiple frames. This is achieved by continual use of the <FRAMESET> tag to divide frames in two again and again. This example won't be explained in a step-by-step manner here as a wordy explanation will probably do more harm than good. Instead, we refer you to your instructor for further clarifications. Here is the example, with each frame indicating the relevant part of the HTML code which created it.

Back to Tutorial Index