How To Make HTML Frames

Start with the FRAMESET tag. You can use it to specify whether you want horizontally-paned or vertically-paned frames. For horizontal, use COLS. For vertical, use ROWS. Example:


The above line specifies that you want two frames, horizontally-paned (because of the use of COLS). The left one has a width of 50, the right one has a width of 80.

If you want, instead of direct numbers, you can use percentages for frame sizes. Example:

<FRAMESET COLS="20%,80">

The above line specifies that the left frame should take up the left 20% of the screen.

In most cases, the last frame should simply take up the rest of the window, rather than having a set size to it. For this, use the following syntax:


The usage of an asterisk for the size of the right frame simply means that it should take up as much of the window as it can (after the left 20% has gone to the left frame).

Once you've specified the sizes of the frames with FRAMESET, you can use the FRAME tag to define the actual frames:

<FRAME SRC="framesourcefile.html" NAME="index">

The above line specifies that a frame called "index" should use "framesourcefile.html" for an HTML source. Each frame needs its own source file; The file with the FRAMESET and FRAME tags is just a small framework for the frames.

In most cases, you want the frame targets to open up in a different frame from the one in which the user clicks. For example, many sites use a site index in the frame on the left side of the screen, but clicking in that frame results in things popping up in the RIGHT frame. How is this done? With the BASE TARGET tag:

<BASE TARGET="framename">

The above line specifies that any clicks on links on this frame should actually open up in the frame called "framename", not the frame the link is in. This line should be placed in the file with the links (presumably, the left frame). It will then make all its links open in "framename", which is presumably the right frame.

To summarize, here's a simple example of making frames. Suppose you want two horizontally-paned frames. The left one (called "nav" and stored in a file called nav.htm) is a navigation list and should take up the left 20% of the screen; The other one is called "main" (stored in main.htm) and should take up the rest. You want clicks on nav to open up in main. You would create the main frame layout by making a small HTML file (perhaps "index.htm") like this:

<FRAME SRC="nav.htm" NAME="nav">>
<FRAME SRC="main.htm" NAME="main">>

Then, put this line in nav.htm:

<BASE TARGET="main">

...And clicking a link in nav will make the target open up in main. You're done.

Back to the main page