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

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.

Emily Tyson

MSI GE63 Raider

If you’re looking to invest in your next work horse laptop for work or home use, you can’t go wrong with the MSI GE63.

Laura Johnston

MSI GS65 Stealth Thin

If you can afford the price tag, it is well worth the money. It out performs any other laptop I have tried for gaming, and the transportable design and incredible display also make it ideal for work.

Andrew Teoh

Brother MFC-L9570CDW Multifunction Printer

Touch screen visibility and operation was great and easy to navigate. Each menu and sub-menu was in an understandable order and category

Louise Coady

Brother MFC-L9570CDW Multifunction Printer

The printer was convenient, produced clear and vibrant images and was very easy to use

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?