Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Advanced
square Forms (Part One)
Square Forms (Part Two)
Square Frames (Part One)
Square Frames (Part Two)
Square Entities
Square Meta tags
Square Search engines
Square Publishing
Square Conclusion
 
What are frames?
Pros and cons of frames
A simple page with frames
Specifying the size and location of the frames
Naming the frames

What are frames?

Frames allows you to split the browser window up into two or more sections. Each section can contain a different HTML file. This means that each window can load different content without affecting the other/s.
A popular use of frames is to have one portion of the screen dedicated to a 'navigation' frame, containing the links for the site. This can then be static on the screen at all times, regardless of the file loaded into the other window. You can see a simple example of a page that uses frames here.

Pros and cons of frames

Frames certainly can be an easy way of providing a static navigation on a page. However, frames are rarely used in today's pages, and are increasingly seen as bad practice. Let's examine the pros and cons of using frames - Pros:
  • Can provide a static navigation on a page;
  • If you want to change the navigation, you only have to change one file;
  • Provides a way of precisely sizing the width and heights of the document/s.
  • :
....and now the cons:
  • A framed page containing two pages actually contains three documents - the two pages, plus the frameset file that controls the layout and size of the frames. This means that the site will take longer to download;
  • Frames make it difficult for a user to bookmark an exact page, as adding a bookmark in the normal way usually results in them bookmarking the frameset file, rather than the exact page;
  • Frames make it harder for your site to get noticed and indexed by some search engines;
  • Some browsers (mainly very old ones) just don't support frames, so you're pages would be useless;
  • If someone 'enters' your page from another one, you risk them entering and only seeing that specific file, not the navigation frame as well, leaving the user 'lost'.
Personally I think that in 99% of cases, frames should, and can, be avoided. A navigation bar can be included on a page using tables, and I feel that the cons nearly always outweigh the pros! Anyway, let's learn how to make framed pages..

A simple page with frames

To make a page that utilises frames, we need to introduce two new tags - <frameset>, and <frame>. Both of these tags have their own attributes that we can use to control the appearance and size of the frames, as we'll see later.
As I mentioned above, a framed page with two frames needs three documents. Firstly, a frameset file which tells the browser the size, quantity and location of the frames, and then two 'normal' HTML files which the frames will contain. Start up Notepad and enter the code as we add it -
The frameset file needs opening and closing <html> tags like any other HTML file -
<html>
</html>
Now we can add our <head> information as normal -
<html>
<head>
<title>A simple frames page</title>
</head>
</html>
Save this away as framesexample.html.
Now, with any normal HTML file, we'd have a <body> section where the page contents would be. In a frameset file, the <frameset> tags take the place of the <body> tags. Let's add them now -
<html>
<head>
<title>A simple frames page</title>
</head>
<frameset>
</frameset>
</html>
Save the file.
Now we need to add the content of the frameset. We've told the browser that we're using frames, we now need to tell it which files we're using, and the size of the frames.

Specifying the size and location of the frames

We're going to make a page that holds two frames. Let's start by adding two <frame> tags between the <frameset> tags. Note that the <frame> tag does not need a closing tag. -
<html>
<head>
<title>A simple frames page</title>
</head>
<frameset>
<frame>
<frame>
</frameset>
</html>
Now we need to tell the browser the location of the files. We'll do this using the src attribute. You might recall from the lesson about images, that the src attribute tells the browser the source , or location of the file. Add the code as below -
<html>
<head>
<title>A simple frames page</title>
</head>
<frameset>
<frame src="frameone.html">
<frame src="frametwo.html">
</frameset>
</html>
We'll make the actual files frameone.html and frametwo.html in a minute. So now the browser knows that there's two frames, and it knows which files to place in them. What we need to do now is tell it how to display them. We can do this using either the rows attribute or the cols attribute.

If we want the frames to be displayed in two rows, we'd use the rows attribute, and if we'd like the frames to be displayed in two columns, we'd use the cols attribute.
You can specify the size using either the precise amount in pixels, or as a percentage of the width or height of the browser window. If you use a precise amount, you can be assured of the way your pages will be displayed. If you opt for percentages, the pages will fill the entire window (regardless of the screen resolution), but you will not be able to guarantee how the pages will look.
We're going to split our window into two, width-ways. We're going to be using a precise amount in pixels to tell the browser that the first file should fit 100px of the screen, and the other file should take up the remainder. To achieve this, we're going to use a new concept - the wildcard (*). By using a * the browser takes this to mean the remainder of the screen. Let's add this to the <frameset> tag - <html>
<head>
<title>A simple frames page</title>
</head>
<frameset cols="100,*">
<frame src="frameone.html">
<frame src="frametwo.html">
</frameset>
</html>
Save the file away again. Let's quickly recap on what each line of code does -
Firstly, we start off with an opening <html> tag as normal. Then, we have a <head> section with a <title> as we would any other page. The next line is where things are different - rather than having a <body> section, we replace this with a <frameset>. We've used the cols attribute to tell the browser that the first frame should be 100 pixels wide, and the other frame should use the remainder of the window. We've done this using *, also known as a wildcard.
Inside the <frameset>, we've inserted two <frame> tags. Each of these uses the src attribute to tell the browser which files to display in each frame. Finally, we've added closing </frameset> and </html> tags to close the document.
Finally, let's make two very simple pages to provide the content of our frames. Make sure you've saved the file above, and then start a new file (File>New). Enter the following -
<html>
<head>
<title>Frame One</title>
</head>
<body>
I am frameone.html<br>
in my own frame using<br>
100 pixels of the screen.
</body>
</html>
Save this file away as frameone.html (make sure it's in the same directory as framesexample.html. Now, start another new file, and enter -
<html>
<head>
<title>Frame Two</title>
</head>
<body>
I am frametwo.html and I'm using the rest of the width of the window. I'm a separate file to frameone.html! </body>
</html>
Save this file as frametwo.html.
Now, open Explorer (or your preferred browser) and open framesexample.html. All being well, you should see the contents of frameone.html in the left hand frame, and the contents of frametwo.html in the other. Like this.

Well that's the basics of frames. We'll be looking at them more closely in the next section. Meanwhile, try making some more framed pages yourself - try using rows instead of the cols attribute. Try different sizes, and if you're feeling adventurous, try nesting a frameset within another!

TopTop of page - BackBack to Forms (Part Two) - Next - Frames (Part Two)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference