Lesson 13

Although frames have been supported by the major browsers for a long time, it wasn't until the publication of HTML 4.0 that they were included in the HTML specifications. They are widely used, and you're probably curious about how it's done.
A great "pro-anti" debate rages amongst web designers about the merits and demerits of the use of frames. Add to that the fact that many people find coding the HTML for frame-based pages to be difficult or confusing, then frames have become something of a "bogey man" issue. If I believed in astrology, alien abduction, and the healing power of crystals, I might think there was something spooky about the fact that my frames lesson turned out to be number 13.
It's true that there are many logical and aesthetic arguments against the use of frames. We won't go into those in detail here: suffice to say that traditionally they have given rise to problems with printing pages, bookmarking pages, and being accessible to search engines, amongst other things. And, once all browsers support the positioning properties of the CSS Level 2 specification, we'll be able to do everything that we do now with frames using CSS instead. But for the present, used carefully in the right place, frames are an extremely useful addition to the web designer's tool kit -- particularly when applied to site navigation systems. So we'll ignore all the theoretical arguments, and concentrate on how to "do frames".
Before we begin, one important point. I'm sorry, but it isn't really practical to do this lesson online, because you need some files that I've created for you already. So go to Appendix A to download the tutorial in a compressed archive format.

You've probably already met frames on many sites browsing around the web, but just in case you haven't, let's look at what they are. Frames give us a way to divide up the browser window into a number of "sub-windows", the contents of which can be loaded and changed independently of each other. Each of these sub-windows is a frame, and the content of each frame is a separate HTML document.
Let's look at an example of a framed window.
You should see that the window has been divided into three frames; one on the upper left of the screen, one on the upper right, and the third stretching right across the bottom. That is, you should see this if your browser supports frames -- if you see a "SORRY!" message instead, then your browser does not support frames.
For a long time, one of the biggest problems with frames was that they were a Netscape invention, introduced as an extension to HTML with the Netscape version 2.0 browser. Frames were not incorporated into the HTML standard until HTML 4.0. It took other browser manufacturers a while to catch up, but now most versions of graphical browsers do support frames and this reason for not using frames has diminished in importance. If your browser doesn't support frames, then unfortunately you won't be able to make sense of the rest of this lesson.
Assuming you don't have a problem, then you can see that with a framed window like that of our example, we could display three different pages at the same time on the same screen. Let's move on to examine the mechanics of frame building.

To make framed pages, first you have to create a frameset definition document. This carries the details of the size and position of each of the frames, and the filenames of the HTML documents that will initially fill them.
You've doubtless guessed that we'll need a new tag to do this. We do. It's the <FRAMESET> tag, and its closing partner </FRAMESET>. To make a frameset definition document, we use this pair of tags instead of the <BODY> and </BODY> tags in an HTML document. You got away with not doing any work in the last few lessons, so let's get you back in action again. Open a new file in your editor, and type in the following code:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Save your file as "file13.html" in the same directory as this tutorial. This is the skeleton of a frameset definition document. Let me just restate that the <FRAMESET> tags are used in place of the <BODY> tags. The two are mutually exclusive -- you must not put both <FRAMESET> and <BODY> tags in the same document. This would give rise to errors, and could seriously confuse your browser!
When you use a <FRAMESET> tag, you need to include one of two attributes, cols or rows. These determine how the screen is to be split up into frames, and how big each frame will be. We'll start by looking at cols.
The cols attribute instructs the browser to split the screen into vertical frames. The number and size of the frames is given by the value of the attribute. For example:
<FRAMESET cols="100, 200, *">
The cols attribute has three values (100, 200, and *) separated by commas. This means that there will be three vertical frames. The first frame will be 100 pixels wide, and the second will be 200 pixels wide. The asterisk representing the third frame means that it will fill the rest of the screen, however big that may be. As well as absolute values in pixels, we can also use percentages. For example:
<FRAMESET cols="100, 30%, *">
This will produce three vertical frames: the first is 100 pixels wide; the second is 30% of the width of the screen, whatever that may be; and the third will take up the remainder of the available screen width. Look at this example, based on this code.
What's this asterisk thing all about? Well, it helps us to cope with the fact that people will be viewing our HTML creations on different sizes of screen. If you are using frames with absolute fixed sizes, make sure that at least one of the frames is defined with an asterisk to take up whatever screen space is left.
The asterisk comes in handy when we want to divide the screen into frames of equal size. For example:
<FRAMESET cols="*, *">
will divide the screen into two vertical frames of equal width. And this:
<FRAMESET cols="*, *, *">
will divide the screen into three vertical frames of equal width.
Let's turn now to the rows attribute. This works in a very similar way, except that it is used to divide the screen into horizontal frames, and the values set the height of each frame. For example:
<FRAMESET rows="100, 30%, *">
This will produce three horizontal frames: the first is 100 pixels high; the second is 30% of the height of the screen, whatever that may be; and the third will take up the remainder of the available screen height. Look at this example, based on this code.
The values of the cols and rows attributes determine the size of the frames when they first open. However you can resize the frames afterwards by placing your mouse cursor over any border between two frames, then dragging the border to wherever you want it. Try it out with the last example above.
If you were to enter any of the attributes we used above in your "file13.html" and then try to open it in your browser, you wouldn't see anything: because in between those <FRAMESET> and <FRAMESET> tags, you have to specify which documents to load into the frames. Let's check out how we do this.

To tell the browser which documents to load into each frame, we need another new tag: <FRAME>. This tag has no closing partner, and is used with the src attribute to specify the source filename of the document to load. Open your "file13.html" again, and modify it as shown below.
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET rows="*, *, *">
<FRAME src="frame1.html">
<FRAME src="frame2.html">
<FRAME src="frame3.html">
</FRAMESET>
</HTML>
Save your file when you have finished. You should be able to work out that this frameset is going to produce three horizontal frames of equal height. The first (top) frame will be loaded with the file "frame1.html"; the second (middle) frame will be loaded with "frame2.html"; and the third (bottom) frame will be loaded with "frame3.html".
I've already created the three files "frame1.html", "frame2.html", and "frame3.html" for you. So long as you did what I asked and saved your "file13.html" in the same directory as this tutorial, then you should be able to load it into your browser and see how it looks. It should look like this.
Congratulations, you've created your first framed pages!
Before we go on to do anything else, I just want to point out that your frameset definition document must not contain any other tags, text, or formatting information: remember that all of the frame contents come from the source files specified in the <FRAME> tags. There is just one exception to this rule, which we'll deal with later in the lesson.
Now go back to your "file13.html", and modify it as shown below:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET cols="*, *, *">
<FRAME src="frame1.html">
<FRAME src="frame2.html">
<FRAME src="frame3.html">
</FRAMESET>
</HTML>
All you've done is to replace rows with cols, so you can figure out that now we should have three vertical frames of equal width. Save your file and try loading it into your browser to check, but it should look like this.

Remember the first example of a frameset I showed you? Take a look again now.
You can see that it is a little more complicated than the recent examples, because it combines rows and cols to achieve the effect of two vertical frames that do not occupy the full height of the screen, and one horizontal frame that extends across the full width.
We're going to try to construct this frameset. Open a new file in your editor, and type in the following code:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Save your file as "file13a.html" in the same directory as this tutorial.
The first decision that we have to make is whether to put a rows or a cols attribute into the <FRAMESET> tag. There is a rule we use to decide this, which goes like this:
Is any frame required to extend right across the screen, from left to right? If so, then use rows in the <FRAMESET> tag.
If no frame is required to go right across the screen, then use cols in the <FRAMESET> tag.
In our case, we have a frame that goes right across the bottom of the screen, from left to right. So we can start to build the frameset definition document. Modify your "file13a.html" as follows:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET rows="60%, 40%">
<FRAME src="frame.html">
<FRAME src="frame.html">
</FRAMESET>
</HTML>
Save your file. Using the rule, we've put a rows attribute in the <FRAMESET> tag, and given it values such that we would get two horizontal frames, the upper one being 60% of the window height, and the lower one being 40%. For the moment, we've assigned "frame.html" to be loaded into both of these frames. Now check out how this would appear (I've prepared the "frame.html" file already).
Of course, this isn't quite what we're looking for. That upper frame needs to be split further into two vertical frames. How do we do this? By nesting frameset tags. Modify your "file13a.html" files as shown below:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="frame.html">
<FRAME src="frame.html">
</FRAMESET>
<FRAME src="frame.html">
</FRAMESET>
</HTML>
Save your file. Can you see what we've done? We've replaced the first <FRAME> tag with another <FRAMESET> tag, with a cols attribute. The cols attribute indicates that there should be two vertical frames in this frameset, of equal width. Inside this frameset, we have specified two frames, using the same "frame.html" file. Now when you open your "file13a.html" in your browser, it should look like this.
Let's make one final modification to your "file13a.html", just to make it clear which file gets loaded into which frame:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="frame1.html">
<FRAME src="frame2.html">
</FRAMESET>
<FRAME src="frame3.html">
</FRAMESET>
</HTML>
Save your file. Now when you open your "file13a.html" in your browser, it should look like this.
Theoretically, there is no limit to the number of framesets that you can nest within a single screen. However, once you get to more than a few levels of nesting, the amount of window space actually available makes the frames impracticably small.
Before we move on to some refinements, I want to show you what happens when we have some larger, real documents loaded into the frames. Take a look at the code below. It is exactly the same as our last example, except that I've loaded the frames with the files for the first, second and third lessons of this tutorial:
<HTML>
<HEAD>
<TITLE>Lesson 13</TITLE>
</HEAD>
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html">
<FRAME src="lesson2.html">
</FRAMESET>
<FRAME src="lesson3.html">
</FRAMESET>
</HTML>
Now look at the result.
You'll see that vertical and horizontal scroll bars have been added automatically to the frames, so that you can scroll to see the entire document in each frame. I'd like you to try something else while you have that window open (use the link to reopen it if you closed it already). In any one of the frames -- it doesn't matter which -- scroll until you can see the buttons that link to the other lessons. Pick any other lesson than the one which is already in the frame, and click it. You'll see that the lesson you selected is now loaded into that same frame. Try this over and over, selecting different lessons in different frames. In each case you'll find the document you choose is loaded into the frame in which you chose it. We'll talk about this again, and how to do something cleverer, shortly.

We can exercise some finer control over the presentation of our frames courtesy of a number of attributes related to the <FRAME> tag. Let's start with scrolling, which can take the values of auto, yes, or no. When set to auto, scrollbars will be applied to frames automatically if the frame contents occupy more space than is available to the frame. This is the default condition, as you've just seen with the last example where no attribute was included in the <FRAME> tag. If scrolling="yes", then scrollbars will always be applied to the frame, whether or not they are needed to see the entire frame contents. Conversely, if scrolling="no", then scrollbars will never be applied to frames, even if the contents take up more space than the frame.
Let's just demonstrate that by revising the code for the last example as follows:
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html" scrolling="no">
<FRAME src="lesson2.html">
</FRAMESET>
<FRAME src="lesson3.html">
</FRAMESET>
We've added an instruction to have no scrollbars in the first frame. Now look at the result.
You'll see that the first frame has no scrollbars, and so it's impossible to see all of the frame contents. Being able to "turn off" the scrollbars is a useful trick, but this lesson is worth remembering: only do it when you are sure the viewer will still be able to see all of the frame contents.
The next attribute on the menu is the noresize attribute. We saw above how you can resize frames by dragging their borders with your mouse. But if you include this attribute in a <FRAME> tag, then users won't be able to resize that frame. Below, I've modified the code for the last example to prevent resizing of the upper left frame (the same one where we disabled scrolling earlier):
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html" scrolling="no" noresize>
<FRAME src="lesson2.html">
</FRAMESET>
<FRAME src="lesson3.html">
</FRAMESET>
Now test the result. You'll find you can't resize that frame. What's more, because that frame touches both of the other frames in the set, you can't resize those either (because to do so would mean the upper left would have to change size).
Next up!
The marginwidth and marginheight attributes allow us to control the size of the margins between a frame's contents and its borders. Both of these attributes take values in pixels (and must be greater than zero). The default margin size varies from browser to browser.
The marginwidth attribute controls the amount of space to be left between the frame's contents in its left and right margins, while marginheight determines the amount of space to be left between the frame's contents in its top and bottom margins.
Let's modify our last example again to change the margins in one of the frames. Here's the amended piece of code:
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html" scrolling="no" marginwidth="40" marginheight="50">
<FRAME src="lesson2.html">
</FRAMESET>
<FRAME src="lesson3.html">
</FRAMESET>
If you look at the result, you'll see the distinct difference between the margins of the affected frame and those of the others.
And so to our final <FRAME> tag attribute, and it's a really helpful one. If you've spent a lot of time web surfing, you'll have noticed that many "framed" sites don't have the ugly borders between frames that our examples up to now have exhibited: often the join between frames is quite seamless. This is all thanks to the frameborder attribute, which takes one of two possible values: 1 or 0. If you set frameborder="1", then you'll get a border around the frame, like we've seen already. This is the default, so you'll get a border if you don't include any frameborder attribute. If you set frameborder="0", then you'll get no border on the frame.
Want the evidence? OK, let's modify our last example again. Here's the amended snippet of code:
<FRAMESET rows="60%, 40%">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html" scrolling="no" frameborder="0">
<FRAME src="lesson2.html" scrolling="no" frameborder="0">
</FRAMESET>
<FRAME src="lesson3.html" scrolling="no" frameborder="0">
</FRAMESET>
First of all, I've turned scrolling off on all of the frames, just to clean up the appearance a bit when you view the example. Next, I've turned the frame borders off in each frame with frameborder="0". Now examine the result.
You'll see that this looks a lot neater with the borders gone. However you can probably see a thin stripe of your browser's background colour (grey or white, depending on your browser) "shining through" between the frames. This is a distraction which you might not like. You might want the frames to butt right up against each other, and indeed this is how they are used in many "framed" sites on the web.
Well, we can do this, most of the time. I say most of the time, because it depends on the use of an attribute that is not part of the HTML specification. However, it is supported by many browsers, including Netscape Navigator, Internet Explorer, and Opera.

The border attribute is used in the <FRAMESET> tag, and in those browsers that support it, specifies the thickness in pixels of all "child" frames that are part of that frameset. So by setting border="0", we can eliminate any spacing between frames.
To demonstrate, let's add it to the last example. Here's the amended code snippet:
<FRAMESET rows="60%, 40%" border="0">
<FRAMESET cols="*, *">
<FRAME src="lesson1.html" scrolling="no" frameborder="0">
<FRAME src="lesson2.html" scrolling="no" frameborder="0">
</FRAMESET>
<FRAME src="lesson3.html" scrolling="no" frameborder="0">
</FRAMESET>
By adding border="0" to the parent <FRAMESET>, we should remove the gap between all of the frames. Now review the result in your browser. If your browser does support this attribute, then there will be no space between the frames.
(The border attribute is supported by the latest versions of Netscape Navigator, Internet Explorer, and Opera. If the effect does not work in your browser, edit the tutorial file "lesson13m.html" by adding frameborder="0" and framespacing="0" into the first <FRAMESET> tag, then try re-loading the example. This use of these two attributes is not part of any HTML specification, but it does result in borderless frames in many older browsers.)
That probably looked pretty weird to you, with those arbitrary examples loaded into the three frames. Let's take a look at a mock-up of a more typical, realistic application for frames. Here it is. Are we having fun yet?

This is the feature that makes frames really useful, in the right circumstances. What do I mean by "targeting" frames? Well, in the last example, you saw how selecting an item in the navigation menu in the lower left frame caused that item to be loaded into the large lower right frame. In that example, the lower right frame was the target frame. You can probably see what's meant by targeting now, so let's look at how to do it.
It's not too difficult, really. First of all, in order to be able to designate which frame is the target, we need a means of referring to that frame. We achieve that simply by giving the frame a name in the frameset definition document, using the name attribute in the relevant <FRAME> tag.
Take a look again at the frameset definition document for the last example. You'll see that the three <FRAME> tags each contain a name attribute. I've called them banner (because this frame will contain the banner at the top of the page), navigation (because this frame will contain the navigation link buttons), and content (because this is the frame that will be used to display the content, the various documents we are going to look at). You can call frames anything you like as long as they begin with an alphabetic character, that is, a-z or A-Z. There are some special frame names that don't obey this rule, which we'll look at shortly.
The frameset definition document determined which files would be loaded initially into each frame using the src attribute in each <FRAME> tag. But in order to get other files to load into a specific named frame later on, then we introduce a new attribute called target into the <A> tag for the link we intend to use to call up the new file.
Take a look again at the code for the lower left (navigation) frame in the previous example. You'll see that the <A> tags for each of the five links in the navigation frame ("Examine the FRAMESET code", "Examine the top frame code", etc.) contains a target attribute. The value of the attribute in each case is the same, content. This tells the browser that each one of the files called up by these links is to be loaded into the same frame when selected, the frame that we named content.
And that's all there is to it, really. Simply put the target="name" attribute into the <A> link tag for the document that you want to load. Just remember that the target frame must have been named first in the frameset definition document.
We can often introduce a shortcut to targeting. If in a given document, all of the links are targeted to the same frame, it isn't necessary to include target="name" in every <A> tag. Instead, we can insert the <BASE> tag between the <HEAD> and </HEAD> tags, complete with the target attribute to specify the target frame for all linked documents. For example, let's modify the document in the navigation frame in our previous example, to remove the target attributes from the individual <A> tags and replacing them with a single <BASE> tag. It now looks like this. This will work in exactly the same way.
If most of the linked documents are targeted to the same frame except one or two, then you can use the <BASE> tag as described, then insert target attributes in the <A> tags for the few that differ. An order of precedence is at work, which goes:
If an <A> tag has its target attribute set to a designated frame, when the link is selected the file will be loaded into the target frame.
If an <A> tag does not have its target attribute set but the <BASE > tag does, the <BASE> tag's target attribute determines the frame.
If neither the <A> tag nor the <BASE> tag refers to a target, the file will be loaded into the same frame that contains the <A> tag.
Just to illustrate that last point, go back to our framed example again and select the "Load Lesson 1" option from the navigation menu. Then click on any of the buttons for the other lessons, and you'll find that your chosen lesson is loaded into the same frame -- because the Lesson 1 document has no frame target references in any of its links.

A little way back, I said that there are some special frame names that don't follow the rule of beginning with an alphabetic character. These are called reserved frame names, because they are each reserved for a special purpose. So here they are:
- _blank
- If you use target="_blank", the browser should load the designated document in a new, unnamed window. (Note: a new window, not a frame. Don't worry, we're going to discuss this one in the next section of this lesson!)
-
- _self
- If you use target="_self", the browser should load the designated document in the same (current) frame.
-
- _parent
- If you use target="_parent", the browser should load the designated document into the immediate <FRAMESET> parent of the current frame. This value is equivalent to _self if the current frame has no parent.
-
- _top
- If you use target="_top", the browser should load the designated document into the full, original window (cancelling all other frames in the process). This value is equivalent to _self if the current frame has no parent.

Although this lesson is about frames, this is an opportune point to talk about targeting windows, because it's very similar.
Let's assume you have a simple case of a document in a window with no frames. If you have a link to another document, and you select that link, then the new document will normally be loaded into the same window, displacing its predecessor.
However you might like to have the new document open up in a new window, so that the first document is still visible and easy to return to. This is what I've been doing throughout this tutorial when displaying examples to you.
It's very easy to accomplish this effect. All you need to do is include the target attribute in the <A> tag for the relevant link, giving the target window any name you choose as long as it begins with an alphabetic character; or you can use one of the reserved names given above.
In a moment I'm going to ask you to select this link here. But first have a look at the code surrounding this link:
...I'm going to ask you to <A href="lesson13o.html" target="fred">select this link here</A>...
This tells the browser two things:
The file "lesson13o.html" is to be opened in a new browser window.
The new window is to be called "fred" (just to show that you can call the window almost anything!).
Now go back up a couple of paragraphs and select the link.
I asked you not to close the new window when you finished to demonstrate the significance of the window's name. Selecting this link will load a different file into the window called "fred", as you will see if you maximise it again afterwards. This is because the target for the link document is also "fred". Since "fred" is already open, the new document is loaded into it, displacing the previous document. Look at the code snippet, then select the link and maximise the other window:
...<A href="lesson13p.html" target="fred">Selecting this link</A> will...
This behaviour is exactly the same as with frames.
If we had given the target window for the second document a different name, then the browser would have opened up another window with the new name, leaving "fred" untouched.
But what happens in a frameset? How do we open documents in a new window rather than a frame? Easy. Just use the target attribute in the <A> tag as we've seen, but don't give it the same name as any of the frames in your frameset, or the new document will load into that frame! Instead, this is where you use the reserved name _blank, which will guarantee that the document opens in a new window without disturbing your current frameset.

Can you remember back to when I first introduced you to the frameset definition document? I said that apart from the tags shown and their related attribute/value pairs, "the frameset definition document must not contain any other tags, text, or formatting information...There is just one exception to this rule". Well, here's where we deal with the exception.
I also pointed out to you earlier that some browsers don't support frames, so if they tried to load a frameset document, they would get a blank page. This is because the browser wouldn't recognise the <FRAMESET> and <FRAME> tags, and so would be unable to interpret the instructions they contain. (Remember that the general rule with browsers is that if they encounter a tag that they don't understand, they simply ignore it.) Now this could really irritate visitors to your web site if, after having taken the trouble to point their browsers at your URL, they then discovered that your site doesn't load.
But there is something you can do to help, thanks to the <NOFRAMES> tag. This tag allows you to put alternative content (text, graphics, links, or whatever) between it and its closing partner </NOFRAMES>. This content will be ignored by frames-compatible browsers, because they know to ignore it. Conversely, a browser that is not frames-compatible will ignore the opening and closing tags but will display everything that comes between them. The <NOFRAMES> tag pair can contain any of the HTML elements and attributes we have discussed in this tutorial that are allowed between <BODY> and </BODY> tags. In other words, you can look on the <NOFRAMES> tag as being just like a <BODY> tag for content to be rendered by browsers that don't display frames.
Here's a typical example of how it's used:
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<FRAMESET cols="*, *">
<FRAME src="frame1.html name="left">
<FRAME src="frame2.html name="right">
<NOFRAMES>
Alternative text, links, graphics etc.
</NOFRAMES>
</FRAMESET>
</HTML>
Put the <NOFRAMES> tag pair and its contents before the closing </FRAMESET> tag; or before the closing tag of the parent frameset, where there are nested framesets.
So what kind of content might you put between the <NOFRAMES> tag pair? Well, you could:
put a complete alternative page for rendering by incompatible browsers
put a link to a "no frames" version of your site
put some annoying and unhelpful text like "You need a frames-compatible browser to view this site".
The last option is only slightly better than leaving the viewer with a blank screen, but not much! Of course, the other options of developing alternative content or a "frames free" version of your site are very time consuming, but will be more greatly appreciated by your visitors. And although it is probably true that most people using graphical browsers are now equipped with versions that support frames, there are still lots of people using text browsers like Lynx, which don't handle frames at all. What to do? That's your choice. Of course, if you avoid using frames, it's a choice you won't have to make...

Right at the top of this lesson, I indicated that there are good arguments for not using frames. Rather than describe those to you here, I can do no better than refer you to Jakob Nielsen's Alertbox column for December 1996, eloquently titled Why Frames Suck (Most of the Time).

Introduced as a Netscape extension, frames were not incorporated into the W3C specifications until HTML 4.0.
In order to create a framed page we have to make a frameset definition document using the <FRAMESET> tag, and this tag must be used instead of the <BODY> tag. The <FRAMESET> tag takes cols and rows attributes to specify how the screen is to be divided up and in what proportion.
<FRAMESET> tags can be nested to make more complex framesets.
The frames in a frameset are defined with the <FRAME> tag, which uses the src attribute to determine which file is initially to be loaded into the frame.
The scrolling attribute can be used in the <FRAME> tag to control whether scrollbars will be present in the frame, while the noresize attribute prevents the user being able to resize the frame.
The size of the margins between a frame's contents and its borders is controlled with the marginwidth (left and right) and marginheight (top and bottom) attributes.
The frameborder attribute in the <FRAME> tag specifies whether or not the frame will have a border.
The border attribute in the <FRAMESET> tag controls the thickness of each child frame within the set, and when set to zero allows the frames to butt together seamlessly. But: although it is supported by many browsers, this use of the border attribute is not part of the HTML 4.0 specification.
Frames are named with the name attribute in the <FRAME> tag. By using that name as the value of a target attribute in an <A> tag, we can target that frame to load the file called by the <A> tag.
Frames can be given any name that begins with an alphabetic character. There are four reserved names -- _blank, _self, _parent and _top -- that each have a special purpose. The target="_blank" arrangement will cause the document called in the <A> tag to be loaded in a new browser window, whether it is called from within a frame or a full window.
The <NOFRAMES> tag furnishes a mechanism to provide alternative or advisory content for viewers without frames-compatible browsers.
<< Go back to Lesson 12 | Top | Go on to Lesson 14 >>
Copyright © Keith W Bell, 1999 - 2001
This page last updated 1 February 2001
http://www.campanile.org/tutorials/html/lesson13.html
|