Alright! By this time, you know quite a bit about HTML. You can create simple, but still well designed pages. But you're still limited. But do you feel that a single window is not enough? Let's get some frames.
- Frames: the concept
- The <frameset> tag
- The <frame> tag
- The <noframe> tag
- The <base> Tag
- Nesting frames
- Demo No. 2
The Concept of Frames
Frames. What does that mean to you? Perhaps images of paintings in a lovely gilded, baroque, and expensive square of wood. In the realm of HTML, frames are subwindows.
What? Casement of double-hung? (heh heh, a little carpentry humor) A frame, essentially, is the state when you split the browser window into smaller windows, and each of these smaller windows is an independent webpage. It looks somewhat like this:
| Frames - Microsoft Internet Explorer |
|
This is one frame |
and you can see that there is a bar across. The top subwindow is totally independent of this subwindow. |
When you create a frame, you are basically creating that line in the middle. And that's what's behind door number one!! Before we jump right into the tag, we'll talk a little about structure. When you code frames into your HTML, you just put in the information for the frames. There is no content, because the tags concerning the frames link to seperate webpages that will be displayed.
The <frameset> Tag
Now on to the <frameset> tag. This tag is the most basic; it and its respective end tag delimit an area of code that will create the frame. The <frameset> tag tells the browser that there will be frames, and the tag's attributes describe these frames. There is one interesting thing about this tag; when you use the <frameset> tag, you do not use the <body> tag. The <frameset> tag replaces the <body> tag.
There are two attributes of this tag, the cols= and rows= attributes. These two attributes control columns and rows. That's right, you don't have to have a horizontal line-thingy! You can also have a lovely vertical line-thingy. A more technical term might be frame divider, but that has no euphony.
The cols= attribute controls columns, i.e., the vertical line thingy. The values that follow are pixel/percentage values. These values control the width of the column. You can code in the width of more than one column if your frame layout consists of more than one frame. Additional values are placed after a comma. You can have as many as you want. There is an additional value, the asterisk (*). If you are, or ever were, a MS-DOS user, you know that an asterisk is a value which includes everything. And that's the same significance in the <frameset> tag. When you type a "*" as a value, the browser will allot to that column -- or row -- the remainding space in the window after the other columns have been set. When you enter in the values, they must be in order, left to right.
The rows= attribute is very similiar. This attribute sets the horizontal line thingy. The value system is the same, and the order of rows goes from top to bottom, so remember to go in order.
There's one additional thing. You cannot have the cols= and rows= attribute together in the tag. You can only set either rows or columns. So how to you get a combination of both? Well, you have to nest these frames; I explain this in the <frame> tag section. And here's a little demo code so you can see what I'm trying to explain.
<head>
</head>
<frameset rows="80, 30%, *">
...code you haven't learned yet...
</frameset>
</html>
Well, I'm not showing you what will happen. It's pretty dull at this point since there's no content. But I'll explain this code. The frameset tag here is coding for rows. The first value is 80 -- 80 pixels. So the first row is manifested by a small subwindow 80 pixels tall. The next value is 30%. So the next subwindow down is 30 per cent of the screen; when you resize the whole browser application window, this frame will adjust accordingly; that's different from pixel values, which are fixed and don't readjust. The final value is the asterisk. This simply means that the third row down is relegated the rest of the space. Don't think that the asterisk is not important; if you don't put it, then the browser won't register a row/column. Asterisks are placeholders in effect. And that's it for the <frameset> tag.
percentage
* (fill remainding space)
percentage
*
The <frame> Tag
This tag goes in between the <frameset> tag and its respective end tag. The function of the <frame> tag is to describe each individual frame; basically, the <frame> tag is a link to the HTML document to inhabit which frame. There are also many other properties they control, which we'll learn about a bit later.
First off, you must have as many <frame> tags as you have defined in the <frameset> tag. These have to be in order, or else you get something you didn't anticipate. As said before, the <frame> tags go between the <frameset> tag in its endtag. This tag has no endtag, so don't worry about it.
The first attribute that is required is the src= attibute. You should remember this from the <img> tag. This determines the source of the frame. That's the name of the HTML document you want to be displayed in the frame.
The next attribute of the <frame> tag is the name= attribute. This allows you to name the frame. This is important when it comes to hyperlinks. The name can be anything you want, but keeping it simple is easier.
Next we have the lovely marginwidth= attribute. The values are pixels, and the attribute lets you specify how far from the margins of the frame you want the content to start.
The marginheight= attribute is very similar to the marginwidth= attribute, except that this attribute allows you to set the distance of the content from the top and bottom of the frame margins.
Don't you just hate those ugly divider bars? Well, you can get rid of them with the frameborder= attribute. The values are in pixels; if you specify 0, then there will be no divider drawn.
Our second to last attribute for the <frame> tag, the scroll= attribute allows you to control if the frame has scrollbars. There are three values, auto, yes, no. The last two values are obvious, and the scroll=auto value lets the browser decide; if your content exceeds the field of vision in the frame, then the browser will give it a scrollbar. If not, then there's no scrollbar.
The last attribute of this tag is the noresize attribute. There are no values for this attribute, which lets you set the frame divider bar as immobile. Normally, the reader can click and drag the bar to resize the size of the frame, and the one adjacent to it. If you put the noresize attribute, then the reader can't.
yes
no
<head>
</head>
<frameset rows="80, 30%, *">
<frame src="frame1.htm" name="nav" scroll=no noresize>
<frame src="frame2.htm" name="main" scroll=auto>
<frame src="frame3.htm" name="display" scroll=no>
</frameset>
</html>
| Frames #2 - Microsoft Internet Explorer |
"nav" |
"main" |
"display" |
Above is a little demo. Bewarned, though. None of the actual functions work. And the text you see is not included in the code that is shown. That text is generated from the "frame*.htm" files that were linked to. But you get an idea now of how frames are shown. Now you know how to use frames, in a basic way. But not every browser supports frames, mainly older versions of the major browsers, and text-only browsers, such as Lynx. So what happens if the browser can't support frames? Well, then there's nothing for the reader to see. And rest assured, the reader won't be happy about that.
The <noframe> Tag
To rememdy this problem, we use the <noframes> tag. This is really simple to use. All this tag does is delimit an area of code that will be displayed if the browser cannot handle frames. There are no attributes. Just put normal HTML code between the <noframe> tag and its endtag. The <noframe> tag goes inside of the <frameset> code area. Do not put this tag outside of the </frameset> endtag. And that's it.
<head>
</head>
<frameset rows="80, 30%, *">
<frame src="frame1.htm" name="nav" scroll=no noresize>
<frame src="frame2.htm" name="main" scroll=auto>
<frame src="frame3.htm" name="display" scroll=no>
<noframe>
<p>Whoops, your browser can't support frames. Go to the <a href="noframe.htm">non-frame version</a> of this site.
</noframe>
</frameset>
</html>
There you have it. If you had a browser that couldn't display frames, then you would find yourself looking at a grey window with the message and the link. As I said before, you can put whatever you want from the pool of body section tags in the <noframe> area. At least provide a link to a non-frames version or a link to download a better browser. Linking from frame to frame is trickier than making links for a single window page. Instead of having the linked file to display in the frame where the link existed, you can have the file display in a different frame. This is commonly used in navigation bars. The file is displayed in a frame other than the one where the navigation page exists, leaving the naviagtion bar intact.
The <base> Tag
There are two ways to do this: by manipulating the <a> tag, or by using the <base> tag. I've already discussed the hyperlink method in Chapter 6. When you use that method, you can change the target frame for each link you create. However, that does take more time and is the risk of error is greater.
The second method, using the <base> tag, reduces the time to create the links and the risk of error, but reduces the control you can have. If you do use the <base> tag, then the target frame you specify is the only one the file will display in.
Now on to the technical stuff. The <base> tag doesn't go in the HTML file that contains the <frameset> information. The <base> tag goes in the HTML file that will provide content. There is only one attribute for this tag, the target= attribute. All you have to do is type in the name of the frame that you want this particular HTML file to be displayed in consistently. For example, if I had
then that HTML document would consistently be displayed in the "main" window, whenever this file is linked.
There are several more things you can do with the <base> tag, as well as several more attribute values. For example, if you wanted to display the HTML file in none of the frames you have named, then just put in a target= name that doesn't correspond with any of the defined frame names. Basically, call the target as somthing else.
As I've said, there are three special values for the <base> tag. These are _self, _top, _parent values. Those underscores (_) are important; if you don't include those, then these effects don't work. The first, _self, forces the HTML file to display in the same frame as the link originated in; the same frame from where you clicked. The _top overrides all the framesets, so that the HTML file will have all of the browser window to itself. The final value is _parent; when this is used, the file will override the frames within a nested frameset. This is only useful if you have nested framesets; a mixture of columns and rows is the most common use for nested frames. So instead of the first example, you get the second if you use the _parent value.
_self
_top
_parent
Nesting Frames
As with skinning a cat, there is more than one way to nest frames. Nesting frames is simply using more than one <frameset> tag to achieve a desired effect, such as a layout of a mixture of columns and rows, or bringing up content that deserves another set of frames.
In the good old days, you would nest frames by creating multiple HTML files that contain <frameset> information. Basically, the <frame> tag would point to an HTML document that was another frame creating document. That way, you could create a column/row layout. IYou could do something like this to create a two row layout, with two columns in the first row:
<frame src="moreframes.htm">
<frame src="nomore.htm">
<!--this second frame tag is the lower row's content-->
</frameset>
With that done as your first frame document, which will create the rows, we must prepare a second frame document; "moreframes.htm".
<frame src="lcontent.htm">
<!--the first frame is for the left column-->
<frame src="rcontent.htm">
<!--the second frame is for the right column-->
</frameset>
As you see, these two HTML files will produce a mixed frame layout. The first layer of frameset codes for rows. The second layer codes for columns.
And that's the easy way to nest frames. All you do is use the <frame> tag to point to another HTML file that contains frameset information. This method is not only usful for creating mixed frame layouts, but can provide a whole myriad of options when you deisplay your content. As you will see in the next method, this way of nesting frames is more flexible.
The second way to nest frames is new; introduced with HTML 4.0, the newest specification from the World Wide Web Consortium. This method does not entail using multiple HTML files to achieve the effect. All the frameset information for this method is included in just one file.
As you will see in the example, all you do essentially is to substitute a <frame> tag for a whole section of <frameset> data. It's just a substitution.
<!--start substitution-->
<frameset cols="50%,50%">
<frame src="lcol.htm">
<frame src="rcol.htm">
</frameset>
<!--end substitution-->
<frame src="row2.htm">
</frameset>
And there you have it. As you can see, the second frameset is the first row of the first frameset. It takes the place of the <frame> tag that should be there.
This method is more fixed. When you declare the frames, it's set in stone. You can't change the layout as easily as the old way. However, you can use both at the same time; there's no constraint against that.
And now you know about the magic of frames. You can now go on to a demo or onto tables.