Introduction to HTML frames

Frames are a combination of HTML pages that display on a browser simultaneously, giving the impression that they are one page. An example of a framed page is when a Web site has a menubar that stays in the same position within the browser window, while the rest of the page can scroll.

Starting with an introduction to this topic, we will investigate the syntax required to create an easy framed page.

Controller Frame

The example Illustrated in FIGURE 1, can be said to have two frames and three HTML pages. Confused? First is a file named 'top.html' - this is a normal HTML page with a pink bgcolor and black text. Then comes 'bottom.html' - this is another standard page with a blue background and black text.

How do these two HTML pages understand how they are to appear in relationship to each other? A third HTML page (called the 'controller' or 'master' page) is required to define their position in the browser window.

If you wanted to look only at the pink page in your browser, you would reference 'top.html' in your address window; the same applies to 'bottom.html'. If, however, you wanted to view the page in its framed format, you would enter 'controller.html', this being the filename of the page with the descriptive information.

Here is example code in controller.html used to produce a framed page.


<HEAD><TITLE>Controller Page</TITLE></HEAD>
<FRAMESET rows="87%,*">
  <FRAME SRC="top.html" >
  <FRAME SRC="bottom.html" >


Unlike most HTML pages, there are no <BODY> and </BODY> tags. This is because anything within BODY tags is displayed on the Web page, whereas controller.html has nothing to show - it is only used to define how the other HTML pages will sit on the page.

View Source

Usually, you can right-click your mouse on a Web page, select View Source, and see the code used to create that page. Framed pages work a little differently. The position of your mouse on the page when you right-click will determine which script you view. If your mouse, for example, is over the pink page, you would see the code for top.html; if over the blue page, you would see bottom.html script. How do you see the source code for the controller page? Select View from the menu at the top of the page, then select Source.


The existence of an open and close FRAMESET command advises the computer that this page will contain frames.

<FRAMESET rows="87%,* ">

The corresponding properties and values determine if the page is going to be in row or column format. FIGURE 1 shows a row format. If you were to swap the 'rows' with 'cols', the page would be similar to the illustration on the left.

Following this is the code that tells the computer how many frames there are going to be within this row (or column) set. The value in the example above is "87%, * ". The computer notices that there are two values separated by a comma. Consequently, it will expect to be given two HTML filenames to display: the first will take up 87 per cent of the page, and the second the remainder.

The asterisk denotes whatever is left over. This is the same as saying "87%, 13%" - it simply means you don't have to make the calculations yourself.

If the FRAMESET command was

<FRAMESET rows="20%,*,20%">

the controller page would expect to see three HTML pages displayed on the screen - the first and last would take up 20 per cent of the page, and the middle one would use the remainder (60 per cent).


In the examples discussed above, there are two instances of the FRAME command. This corresponds with the knowledge we have from the FRAMESET command that there will be two pages to reference.

<FRAME SRC="top.html" >

The first FRAME will automatically attribute itself to the first numeric value of the row (or columns) property within FRAMESET. Top.html therefore takes up 87 per cent of the browser window, and bottom.html (as the second FRAME source) displays in the remaining space.

With this knowledge in hand, 'Advanced HTML Frames' will discuss how to create multiple-framed pages, and investigate additional properties that can be used to customise your frames. These include borders, resizing, and clicking on a link from one frame to open a page in another.