Note: This write-up isn't about HTML itself
nor about iframes. It's just about frames, a part of HTML. You should have at least some elementary knowledge of HTML (means e.g. how a simple HTML page
is made) to understand the what about of this write-up.
Since
HTML 4.0, frames have been part of the official
HTML standard by the
W3C. Well. But what are frames exactly? You may imagine frames as a way to divide a page into several pieces
(frames). In each of these
frames a different
html document can be loaded, and for that reason frames are often used for
web sites with one frame for a
navigation bar and another frame for the actual
content of the
site.
Frames have
advantages as well as
disadvantages. And before you just
learn more about frames, you should ask yourself if you really can use frames for your
web site, or not. I tried to collect a
brief list of advantages
vs. disadvantages of frames:
Advantages: You can divide your page into several sections, and some sections always stay in the same place (e.g. good for navigation bars on the bottom of a page). If you want a lot of sections on your page, frames can also be useful. Plus, frames can be displayed by all browsers which are capable of HTML 4.0.
Disadvantages: Frames can't be displayed by some text-only browsers (like Lynx). The border of frames may steal space. Often, a page with frames has a somewhat square-ish design. With frames, all pages of your web site have the same title, which complicates the orientation. It's also harder to link to a specific site of your web site, and, as with a direct link to a document (like the ones from a search engine) the other
frames aren't displayed, a further navigation on your site may fail. Blind people also may have trouble with navigating through your page. And if that weren't enough, some users may get confused over the back
and forward button, which will work for each frame individually.
If you now think frames aren't what you were looking for, maybe one of these
alternatives can help you:
iframes,
tables,
css,
java script,
java,
flash,
shockwave,
php,
perl,
asp,
sql or
rebol.
Still here? Ok, let's start. As I said, frames are not really new pages, they are more just a way to put several html documents together into one page. First, a special html page must be made. In this special html document is a
so-called frameset, where you can specify which html documents you want to use and also in which way you want the
design to look like. This html site with the frameset is the first page you must load in order to display the frames, so if you want to use frames on your
entire web site, it's best to call this new document with the frameset index.html
But how does such a html page with a frameset look? Let's create one:
It should start with a
doctype line, telling the
browser that this site hosts a frameset according to the
HTML 4 standard.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
This doctype line will work fine in most cases,
however, for more information you can take a look at:
http://www.w3.org/TR/html401/sgml/dtd.html
After the doctype tag, the page continues as every normal HTML page, with the following
tags:
<HTML>
<HEAD>
<TITLE>here you should write a title for your web site</TITLE>
</HEAD>
Let me make just one addition: The
title you set in the
frameset page is used for every document of your page
which will be loaded in a frame, so think of a good and
general title.
Now we come to the first
variation from a normal HTML page
structure, instead of the <BODY> tag a special
frameset tag is needed, which looks like:
<FRAMESET arguments>
<FRAME arguments>
<FRAME arguments>
</FRAMESET>
With the
arguments in the <FRAMESET> and <FRAME> tag, you can
issue instructions of how your page should look, but I will come back to this matter later. For now, just note that the <FRAMESET> defines
how many frames a page has, while the <FRAME>
tag is used for
commands about each frame. Also important is that the <FRAMESET> tag needs a closing </FRAMESET> tag, while the <FRAME> tag doesn't.
As some
browsers (e.g.
Lynx,
Netscape Navigator >2.0 and
Microsoft Internet Explorer (
MSIE) >3.0) can't display frames, it's polite to give the user of these browsers at least a clue why they can't see your page. And for exactly that reason there's a tag, the <NOFRAMES> tag. Between the starting <NOFRAMES> and the closing
</NOFRAMES> tags, you can put a
short message (or possibly even a non-framed version of the page) which will be only displayed if the browser can't display frames:
<FRAMESET arguments>
<FRAME arguments>
<FRAME arguments>
<NOFRAMES>
E.g. "sorry, your browser can't display frames. Please update
to a newer version."
</NOFRAMES>
</FRAMESET>
After that, the first page is almost done, only the closing tag of the whole page shouldn't be forgotten:
</HTML>
So, your
document should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>here you should write a title for your web site</TITLE>
</HEAD>
<FRAMESET arguments>
<FRAME arguments>
<FRAME arguments>
<NOFRAMES>
E.g. "sorry, your browser can't display frames. Please update to a newer version."
</NOFRAMES>
</FRAMESET>
</HTML>
Now we have the
rough structure done. However, this is still useless, as the arguments of the <FRAMESET> and <FRAME> tag have to be done. I'll first explain the <FRAMESET> tag.
Frames can be done in two ways - as
horizontal frames or as
vertical ones (of course these two types can be mixed). Why not create two vertical frames, one with 20% width, and the second one with 80%. As vertical frames are like
columns, the argument for them is cols:
<FRAMESET cols="20%,80%">
Important is that the two
values are separated by a
comma. You can also use
pixel values instead of
percentages:
<FRAMESET cols="300,724">
This would make a column on the left with a 300 pixel wide and the next column with a wide of 724
pixels. That's ok, as long as your visitor's
screen resolution has also a
width of 1024 pixels. If the visitor has a smaller resolution, the
browser will decrease the
size of the frames
proportionally. This often doesn't look great, and so you may either accept that, stick with
percentages (which I would advise you) or have one frame fixed
with a 300 pixel wide and the other frame without a specific wide, so the frame will be filled in the remaining wide of the browser window:
<FRAMESET cols="300,*">
Oh, and of course a frameset isn't limited to two columns, you can use as many as you want, just separate them by commas.
Horizontal frames are now easy, instead of columns (cols) we need
rows. A frameset with three horizontal frames, one on the
top of the page with 20%
height, the frame in the
middle with a
height of 60%, and the last one on the
bottom with 20% height:
<FRAMESET rows="20%,60%,20%">
The values for the rows may also be given in pixels.
Rows and columns may also be mixed together. Let's do a frameset where we have on the left side of the screen a 20% wide vertical frame, going over the full height of the screen, and left to this frame two horizontal frames
of each 50% width.
For doing such a frameset, you must know how this works:
As we want one of the frame to have the full vertical height, we first have to create a frameset with two vertical columns, otherwise (with horizontal rows) a frame couldn't go over the whole vertical height. The first frame will be fine, and in the second frame we will
subordinate a new frameset for the two horizontal frames. So, start with the vertical frameset:
<FRAMESET cols="20%,80%>
Remember how this would continue, if it were only a simple vertical frameset:
<FRAMESET cols="20%,80%">
<FRAME arguments>
<FRAME arguments>
</FRAMESET>
Now, the first frame has a 20% width and goes all over the full height of the page. Perfect! What we still need to do is to replace the second frame with a frameset which builds two horizontal frames inside the second frame. For that, just create a normal frameset for horizontal frames:
<FRAMESET rows="50%,50%">
Also here, remember that this is in fact:
<FRAMESET rows="50%,50%">
<FRAME arguments>
<FRAME arguments>
</FRAMESET>
Hence we only replace the second <FRAME> tag of the first <FRAMESET> with the above tags, and your frameset should look like this solution:
<FRAMESET cols="20%,80%">
<FRAME arguments>
<FRAMESET rows="50%,50%">
<FRAME arguments>
<FRAME arguments>
</FRAMESET>
</FRAMESET>
Ok, to make sure you understand how it works, let's try a frameset with a horizontal, 10% height, frame over the full length of the bottom of the page, and above that frame two vertical frames with 30% and 70% length. In this case, the
horizontal framset have to be done first, then directly the frameset for the two vertical frames and finally comes the <FRAME> for the last (10% height row) bottom frame:
<FRAMESET rows="90%,10%">
<FRAMESET cols="30%,70%">
<FRAME arguments>
<FRAME arguments>
</FRAMESET>
<FRAME arguments>
</FRAMESET>
With this, you know as good as everything about the <FRAMESET> tag, beside the
command for giving the
border of your frames a colour, and here we go:
<FRAMESET arguments bordercolor="#000000">
The bordercolor can be specified like in normal html, so either with a six
digit value or the name of the
colour, as in
bordercolor="black"
Lists with some colour values as well as names
are at Named HTML Colors (Superdoc) or at
http://amiga-news.de/farben.shtml
After the <FRAMESET> tag, the <FRAME> tag is the next one. The
basic function of a <FRAME> tag is to load the document into the frame, so the address must be given with the src (short for
source) argument, e.g.:
<FRAME src="navigation.html">
or:
<FRAME src="http://www.mydomain.com/html/navigation.html">
That's the simple way. However, as you might have more frames and want several pages loaded into a specific frame, each frame needs an
unique name to be identified for further use:
<FRAME src="navigation.html" name="navigation bar">
<FRAME src="content.html" name="content">
Now, as every frame has its own name, you can load other documents in another frame. Let's say you have a link in the "navigation bar"-frame to a document (links.html) you want to be loaded in the "content"-frame, then your link should be:
<A HREF="links.html" target="content">Go to my links</A>
Only the
target argument is important here. When you want to load a document in the same frame as the document with the link already is, no target is needed, as links without targets are loaded in the current frame.
As a gentle
noder, you should have on the now loaded
links.html
file a
link to
everything2.com - you have one, right?! Anyway, a normal link would be:
<A HREF="http://everything2.com/">everything2.com</A>
However, as said before, if there's no target at all, the document is loaded in the current frame, and so would - in this case -
everything2.com be loaded in the
"content"-frame, while the "navigation bar"-frame would still remain. This is
bad style, not only could it mess up the
design of the other page (
e2!) and give the visitor less
space to read on, but it often seems as if you want to claim the
content of the other site as your own.
Bad idea, to avoid that, there are mainly two
possibilities:
<A HREF="http://everything2.com/" target="_new">everything2.com</A>
This will open a new
browser window where
e2 is loaded. Instead of
_new, you could use every other name for the target, such as
_afkhasdjkfhjkshfk, as long as the name of the target isn't defined as a name in one of your framesets. But when you have a second
link and set the target also to
_new, the second page will be loaded over the first one, so it's not that bad to give
each link an
unique target name, e.g. for everything2.com
target="_e2" and for the second link
target="_2nd", and there's no longer any chance of unwanted overloading.
If you don't want the link to be opened in a new browser window, but want your frames to disappear though, there's one target
destination for this:
<A HREF="http://everything2.com/" target="_top">everything2.com</A>
A
_top target will "close" all your frames and then load
e2 in the same, but now blank
browser window.
Note: I often read that a target="blank" argument has the same effect, but it never worked for me.
Scrollbars are normally only shown when they are needed. You might choose to always
enable or always
disable scrollbars. This
option has to be set for each frame. Be carefully with always disabling the scrollbars, even when
this may look better to you, it might cause some trouble for visitors with other
screen resolutions.
The scrollbar always enabled:
<FRAME src="navigation.html" name="navigation bar" scrolling="yes">
or always disabled:
<FRAME src="navigation.html" name="navigation bar" scrolling="no">
In the frame tag you can also define the distance (in pixel) between the frame borders and the place where the
text should start. If you want, for example, the text to have a
spacing of 20 pixels from the vertical borders,
use:
<FRAME src="somewhere.html" marginwidth="20">
Mind that this will create a spacing of 20 pixel on both the left and the right side. For having a spacing of 30 pixels from the
top and the
bottom of the
frame border, write:
<FRAME src="somewhere.html" marginheight="30">
To me, it seems as if it's a
good idea to have at least a
margin height and width of 10 pixels per each frame.
The visitor of your site can normally change the
size of each frame if he wants it. If you want to
prevent that, add this argument:
<FRAME src="somewhere.html" noresize>
This will work, but if you want to write your page according to the
XHTML standard, the argument line must be changed into:
<frame src="somewhere.html" noresize="noresize">
Most
people especially don't like frames for their borders, which are per
default always shown. Of course this can be changed, the correct HTML solution would be:
<FRAME src="somewhere.html" border="0"> For disabling the
border, or
<FRAME src="somewhere.html" border="1"> for an explicit
enabling of the borders.
Well. As I said,
would be. While some strict and/or newer
browsers (like
Opera or
Mozilla) can interpret that correctly,
Netscape Navigator as well as the
Internet Explorer (
MSIE)
still widely use their own, different
methods. The first difference is that they both use instead of each <FRAME> tag the <FRAMESET> tag.
Netscape uses <FRAMESET border="0"> for a border of zero size (means no border will appear), while you may also use other pixel values for wider sizes, like <FRAMESET border="10">
MSIE uses two arguments. The first one is a simple yes/no (1/0) argument about the 3D border of a frame, and if this border should be showed or not.
<FRAMESET frameborder="0"> won't show the 3D border, <FRAMESET frameborder="1"> will show it. If you want to define only the border size (as we did for Netscape), the command for the
MSIE is <FRAMESET framespacing="0"> for no borders, or any other pixel value for a bigger size, e.g. <FRAMESET framespacing="10">
If you want no borders at all, the <FRAMESET> tag must be:
<FRAMESET frameborder="0" framespacing="0" border="0">
And don't change the
sequence of this line, or it may not work for all browser versions.
sources: SelfHTML - http://selfhtml.teamone.de/ (in German)
The World Wide Web Consortium: http://w3c.org/
Thanks to Apatrix for general help