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.

<HTML>

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

Body

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.

Frameset

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).

Frame

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.

Join the PC World newsletter!

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World

Most Popular Reviews

Follow Us

Best Deals on GoodGearGuide

Shopping.com

Latest News Articles

Resources

GGG Evaluation Team

Kathy Cassidy

STYLISTIC Q702

First impression on unpacking the Q702 test unit was the solid feel and clean, minimalist styling.

Anthony Grifoni

STYLISTIC Q572

For work use, Microsoft Word and Excel programs pre-installed on the device are adequate for preparing short documents.

Steph Mundell

LIFEBOOK UH574

The Fujitsu LifeBook UH574 allowed for great mobility without being obnoxiously heavy or clunky. Its twelve hours of battery life did not disappoint.

Andrew Mitsi

STYLISTIC Q702

The screen was particularly good. It is bright and visible from most angles, however heat is an issue, particularly around the Windows button on the front, and on the back where the battery housing is located.

Simon Harriott

STYLISTIC Q702

My first impression after unboxing the Q702 is that it is a nice looking unit. Styling is somewhat minimalist but very effective. The tablet part, once detached, has a nice weight, and no buttons or switches are located in awkward or intrusive positions.

Latest Jobs

Shopping.com

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?