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!

Or

Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

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
Show Comments

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Christopher Low

Brother RJ-4230B

This small mobile printer is exactly what I need for invoicing and other jobs such as sending fellow tradesman details or step-by-step instructions that I can easily print off from my phone or the Web.

Aysha Strobbe

Microsoft Office 365/HP Spectre x360

Microsoft Office continues to make a student’s life that little bit easier by offering reliable, easy to use, time-saving functionality, while continuing to develop new features that further enhance what is already a formidable collection of applications

Michael Hargreaves

Microsoft Office 365/Dell XPS 15 2-in-1

I’d recommend a Dell XPS 15 2-in-1 and the new Windows 10 to anyone who needs to get serious work done (before you kick back on your couch with your favourite Netflix show.)

Maryellen Rose George

Brother PT-P750W

It’s useful for office tasks as well as pragmatic labelling of equipment and storage – just don’t get too excited and label everything in sight!

Cathy Giles

Brother MFC-L8900CDW

The Brother MFC-L8900CDW is an absolute stand out. I struggle to fault it.

Luke Hill

MSI GT75 TITAN

I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?