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 newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Kurt Hegetschweiler

Brother PocketJet PJ-773 A4 Portable Thermal Printer

It’s perfect for mobile workers. Just take it out — it’s small enough to sit anywhere — turn it on, load a sheet of paper, and start printing.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?