This tutorial was originally written when HTML 4.0 was in its infancy.
HTML 4.01 is today's standard specification for HTML and this tutorial has been
updated to reflect the features of HTML 4.01. Editorial comments are shown
contained in square braces -- [ ]
Use these to jump around or read it all...
[The FRAMESET Tag]
[The FRAME Tag]
[The IFRAME Tag]
[The NOFRAMES Tag]
Ah, frames. Ever since they came onto the HTML scene, a debate has raged over whether they're good, bad, evil, or the end-all to page creation. I don't use them a lot simply because of load time. If I can get my point across on one page, why use three? That said, some people just love frames. With that in mind, I offer this look at how HTML 4.01 will affect your frames well into the future.
I am only going to hit the tags and attributes new through HTML 4.01 in this tutorial. If you'd like to get into the basics of frame creation, start with my frames tutorials.
Yes, the majority of these commands have been in play for a while now, but it's just now that they have been adopted into HTML standard. Strange, huh? We'll be covering the following commands:
<FRAMESET>
COLS
ROWS
STYLE
|
<NOFRAMES>
|
|
<FRAME>
FRAMEBORDER
LONGDESC
MARGINHEIGHT
MARGINWIDTH
NAME
NORESIZE
SCROLLING
SRC
|
|
<IFRAME>
ALIGN
FRAMEBORDER
LONGDESC
MARGINHEIGHT
MARGINWIDTH
NAME
NORESIZE
SCROLLING
SRC
STYLE
|
|
So, here we go. I've created a basic frames setup to show the effects of the items below. It looks like this:
<FRAMESET ROWS="40%,60%">
<FRAME SRC="fr41.html">
<FRAMESET COLS="50%,50%">
<FRAME SRC="fr42.html">
<FRAME SRC="fr43.html">
</FRAMESET>
</FRAMESET>
|
...and here's the effect.
The <FRAMESET> Tag
This is the workhorse of frames. Every time you set apart a different set of frames, this tag comes into play. Believe it or not, the tag is just now accepted as an HTML standard. Honest. This is technically a new HTML 4.01
(actually, new to HTML 4.0) command. Go figure.
In addition, there are three new attributes to the FRAMESET: COLS, ROWS, and STYLE. Again, you should be quite familiar with what COLS and ROWS do. They break the frame into columns and rows. The frames example I offered breaks the page into two rows then breaks the second row into two columns:
<FRAMESET ROWS="40%,60%">
<FRAME SRC="fr41.html">
<FRAMESET COLS="50%,50%">
<FRAME SRC="fr42.html">
<FRAME SRC="fr43.html">
</FRAMESET>
</FRAMESET>
|
So, those are nothing new....
STYLE
Now, this is truly new to the FRAMESET tag. You can use the STYLE attribute to set style sheet parameters to pages that fall inside of the frame windows. Here's what it looks like...
<FRAMESET ROWS="40%,60%">
<FRAME SRC="fr41.html">
<FRAMESET COLS="50%,50%" STYLE="font-family: arial">
<FRAME SRC="fr42.html">
<FRAME SRC="fr43.html">
</FRAMESET>
</FRAMESET>
|
...and here's the effect.
You probably didn't see any effect. The text in the bottom two frames should have turned to Arial font. The addition of the STYLE attribute seems more to keep a consistency than to allow more flexibility. Whether the effect took place depends a lot on how your browser is set up and whether the page that loaded into the frame contains its own Style Sheet commands. Those will always override the STYLE attribute in the FRAMESET tag.
So, what good is this new attribute? Not much, actually. Don't rely on it.
The <FRAME> Tag
Once again, FRAME is a tag you're probably pretty familiar with by now. It's been around since Navigator version 2 and Internet Explorer version 3. But it has only recently made the ranks of HTML with version 4.0. Now let's look at some attributes new to HTML 4.01, but maybe not so new to you.
FRAMEBORDER
This command alters the border between frames. Set it to 0 and the border goes away. Set it higher and you get ugly oversized borders. Here's what it looks like...
<FRAMESET ROWS="40%,60%">
<FRAME SRC="fr41.html">
<FRAMESET COLS="50%,50%">
<FRAME SRC="fr42.html" FRAMEBORDER="0">
<FRAME SRC="fr43.html" FRAMEBORDER="0">
</FRAMESET>
</FRAMESET>
|
...and here's the effect.
LONGDESC
That's a new attribute that stands for Long Description. It's mainly for non-visual browsers that will "read" the line to a user. Here's the general format:
<FRAME SRC="page.html" LONGDESC="Page.html is in the frame">
MARGINHEIGHT/MARGINWIDTH
If you've played with frames to any great degree, then you're probably pretty used to these two commands. They came into play with Internet Explorer version 3. The commands allow you to set margin height and width in pixels or percentages. Here's what it looks like...
<FRAMESET ROWS="40%,60%">
<FRAME SRC="fr41.html">
<FRAMESET COLS="50%,50%">
<FRAME SRC="fr42.html" MARGINHEIGHT="60%" MARGINWIDTH="60%">
<FRAME SRC="fr43.html">
</FRAMESET>
</FRAMESET>
|
...and here's the effect.
NAME, NORESIZE, SCROLLING, SRC
These commands are at the very foundation of frames creation. You should know what they do. It's just that now they have been accepted into HTML standard code with HTML 4.0.
If these commands are new to you, then you've shot a little high reading this tutorial. Try the original frames tutorial for a better explanation.
The <IFRAME> Tag
The In-Line Frame. This is another tag that has been around since Internet Explorer version 3, and is now part of the HTML 4.01 standard, so you can expect future versions of Navigator to support it.
I already have a
full tutorial on the IFRAME tag available. You can read it over in order to get a grip on what this thing does.
For now, here are the IFRAME attributes that have also been absorbed into HTML 4.01:
- ALIGN
- FRAMEBORDER
- LONGDESC
- MARGINWIDTH
- MARGINHEIGHT
- NAME
- SCROLLING
- SRC
- STYLE
Here's a
quick example made with this code:
<center>
<IFRAME SRC="fr41.html">
</center>
The <NOFRAMES> Tag
It's broken record time again. This is a command that's been around since Navigator 2 and Internet Explorer 3, but is just now being made standard through HTML 4.0.
The concept is pretty simple. You put this tag on your frames page with either a text-based page, or link to a text-based version in between. Those browsers that do not support frames (yes, they're still out there) will see what's in between. It's a very clever catch-all plan.
In terms of HTML 4.01, a few new attributes have been given to the NOFRAMES tag. However, they seem basically worthless when you think about the concept of the command. You can't click on it, you don't know it's there unless you're using a browser that won't support the attributes anyway. The attributes appear to have been added simply to keep a consistency. But I offer them anyway:
- CLASS
- ID
- LANG
- STYLE
- TITLE
And that's a quick look at frames and HTML 4.01. It's a lot of the same. Thanks for reading.
For a bit more meat in your tutorials, try these other HTML 4.01 pieces:
Enjoy!
[The FRAMESET Tag]
[The FRAME Tag]
[The IFRAME Tag]
[The NOFRAMES Tag]
IE 7
Firefox 2.0
