HTML Code MiniChapter 14

HTML Code MiniChapter 14: Using Frames Tutorial

What are Frames?

Frames are a way to divide the browser screen to allow easier navigation under some circumstances. Frequently, frames are used to add a side menu bar to a web site where the constant back and forth clicking would become tedious in a single page. In this example, the side menu bar would allow the user to just click in the side menu bar, and their choice would load into the main window.

Example: Side Menu Bar

This is what the index.htm would look like:

<html>
<head><title>title here</title></head>

<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

<noframes>
 Your browser does not support frames.
 <a href="frameless_main.htm">Please visit the frameless page.</a>
</noframes>

</html>

Notice that there is no actual <body> coding. It is common courtesy, however, to place a <noframes> area after the frameset, but this is completely optional. This <noframes> area only displays in browsers that are not able to show frames.

If you create a special page for those without frames, you may be doubling your work. It is best, with effort and practice, to create a page, in this case, main.htm, that will work in both frames and noframes browsers. Then your noframes would read:

<noframes>
 Your browser does not support frames.
 <a href="main.htm">Please visit the frameless page.</a>
</noframes>

About <frameset> and <frame>

The frameset tag is used to declare multiple frames. As you can see in our first example, the menu bar side, there was one frameset. It read:

<frameset cols="15%,85%">

This tells the browser, we are creating column of framed pages, the first one is to take up 15% of the total browser screen, and the second is to take up 85% of the total browser screen. Then, we introduced <frame>, which is what actually loads the pages. Each frame must have a src, such as src="some_page.htm". So, because we used two framed areas within the frameset, we need two frame tags, each of them to load a page.

<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

If we would like to add a third column, we would need to add a third size definition in the cols (so that all would add up to 100%) and another frame tag inside the frameset.

Likewise, we can use a rows definition instead of a columns definition. If we wanted the menu to be a bottom menu bar, we would do something like:

<frameset rows="80%,20%">
 <frame src="main.htm" name="mainwindow">
 <frame src="menu_bar.htm" name="bottommenu">
</frameset>

If you wanted the menu at the top, just switch it around a little bit:

<frameset rows="20%,80%">
 <frame src="menu_bar.htm" name="topmenu">
 <frame src="main.htm" name="mainwindow">
</frameset>