PAOLO's WEB PAGE TUTORIAL:
HTML The Notepad Way!
Intermediate Level (page 2)
A Beginner's Guide by Paolo M. Brion
What's On
This Page:
Frames:
What are Frames?
Well frames to put it simply do to web pages what windows did
for dos, at least in my opinion. Rudimentally frames allow you to open
two or more HTML pages at once on one page, kinda like pages in a page
or, as the name implies, pages in "frames". You can even put frames within
frames and even change each page in the frame individually using links.
"What can you do with that?" you ask. Well the most popular use of frames
is to have a table of contents on one page in a frame and then display
the referring pages in another. That way the menu will always be visible
and each of your pages are just a quick click away. The possibilities are
endless! My own geocities web site uses frames extensively (as well as
java and javascript). A frames enabled page consists of what we'll call
the "frameset page", which tells the browser which pages go where ,
and of course the pages which go into the frames. Frameset pages are relatively
simple but they can get complicated when you start putting frames in frames.
If you want to attempt to set up a really complex frameset page make sure
you have a browser handy to preview the page layout, making sure each frame
is properly sized.
A frameset page is defined in columns and rows. For example
a frameset page with one frame on the left and one frame on the right is
said to consist of two "columns". Consequently a frameset page consisting
of one frame on top and one frame below it (a horizontal split between
them) is said to consist of two rows. It starts to get complicated when
you put columns within rows and then more columns inside those rows and
so on.
So are you ready to start? I'm assuming you've read page one of this
tutorial or already have some understanding of HTML. As I mentioned before
have your browser and windows notepad (or an equivalent program) ready.
Save all your .html/.htm, graphic, and music files in one folder so you
can easily keep track of your files. Besides, when you transfer your files
to the server (publish your page) it's easier to upload one folder
as oppsed to several. Shall we begin?
Formatting
a Frames Page
A frames page has a basic structure much the same way a regular HTML
has a basic page structure. If you read page 1 of this tutorial you'll
remember the following example of the basic structure of an HTML page:
<html>
<head>
<title> YOUR
PAGE TITLE HERE </title>
</head>
<body>
Text and stuff go here.
</body>
</html>
OK now this is the structure of a frameset page consisting of two
columns:
<html>
<head>
<title> YOUR
PAGE TITLE HERE </title>
</head>
<frameset cols="20%,80%"
framespacing=0
border=0>
<frame name="frame1"
marginwidth=10 marginheight=5
scrolling=auto src="page1.html"
frameborder=0>
<frame name="frame2"
marginwidth=10 marginheight=5
scrolling=auto src="page2.html"
frameborder=0>
</frameset>
<noframes>
Text goes here for browsers that can't see frames.
</noframes>
</html>
A little more there than a basic HTML page but
it's still workable. I know it looks a little difficult but bear with me.
If anything I at least want you to learn how to edit minor frame properties
without using a web-page authoring program. It's really much quicker that
way.
Columns and Rows
Well, as I mentioned before, frameset pages are
defined in columns and rows. As you can see in the example
above, a series of columns (or rows if I had wanted) are defined within
the command pairs <frameset>
and </frameset>
(the end command). This functions similarly to the <body>
and </body>
command pair used in the basic structure of an HTML page. However they
can be used as often as necessary when adding more columns and rows. The
<frameset>
command is defined by the subcommands cols or rows, frameborder, framespacing,
and border. The most critical of these is the rows/cols sub command. As
you might guess cols is short for columns and rows means just what it says,
rows. The numbers in blue
with % signs
define how much space the two frames get (in this case how wide each column
is). The border sub command defines a region of "emptiness" around each
frame much like the vspace and hspace image layout sub commands (again
from page 1). Finally, the framespacing sub command makes a visible gray
border around each page in a frame (nicer than the border sub command makes
and therefore used more). The border and framespacing commands should always
be included within the <frameset>
command, even if they are set to zero.
Now we should go into detail on the cols/rows
sub command. As I mentioned before the percentages in blue dictate how
much space will be delegated amongst the two framed pages. In other words
the left page would take up 20%
of the frameset and right page would take up 80%.
If you had wanted three pages (three columns) in the frameset there would
have been three percentage values all adding up to 100%. Accordingly, if
you had wanted three rows instead, you would replace cols="20%,80%"
in the example above with something like rows="10%,30%,60%".
You can compound columns and rows all you want using the <frameset>
and </frameset>
command pair. Take a look at this example of one of the frameset pages
I wrote for my geocities web site:
<html>
<head>
<tittle>PB2000
Interface</tittle>
</head>
<frameset cols="64%,135%"
framespacing=0 border=0>
<frameset
rows="5%,139%,225%,31%"
framespacing=0>
<frame marginwidth=0 marginheight=0
scrolling=no src="flank3.html"
frameborder=0>
<frameset cols="12%,274%,13%" framespacing=0>
<frame marginwidth=0 marginheight=0 scrolling=no
src="flank3.html" frameborder=0>
<frame marginwidth=0 marginheight=0 name="frame1" scrolling=auto src="pb2000.htm"
frameborder=0>
<frame marginwidth=0 marginheight=0 scrolling=no src="flank3.html" frameborder=0>
</frameset>
<frame marginwidth=0 marginheight=0 scrolling=no src="mid3.html" frameborder=0>
<frame marginwidth=0 marginheight=0 scrolling=no src="geo2.html" frameborder=0>
</frameset>
<frame marginwidth=15 marginheight=15
name="frame3" scrolling=auto src="aimn.html" frameborder=0>
</frameset>
</html>
A little archaic at first sight, but if you look closely, especially
at the indentations, you can see which <frameset>
goes with what </frameset>.
Notice how a <frameset>
calling for columns has a subset set of rows called for by another <frameset>.
This embeds into a frame (defined by the command <frame>)
another frameset.
Setting a Frame's
Properties
In order to format the pages in the frame we
use the <frame>
command which is one of the only commands that never needs (doesn't even
have) an end command. It tells the frameset page, and therefore
the browser, which pages to insert where. Lets' analyze its sub commands
and take a look at the command structure:
<frame name="frame1" marginwidth=10
marginheight=5
scrolling=auto src="page1.html"
frameborder=0>
First an foremost is the src
subcommand which defines the page to go into a specific frame in the frameset
page. If the page being referred to is in the same folder as the frameset
page, you need only refer to the it by name. In the example shown above
the page being referred to is color coded in blue, page1.html.
If the page had been somewhere else you would naturally include its internet
address. For instance, if the html page, index2.html,
where located at www.nyu.edu, the src sub command would read: src="//www.nyu.edu/index2.html".
The name subcommand gives a particular
frame a name. Any name can be used, though in the example above I named
the frames, logically enough, frame1 and frame2.
This feature comes in handy when you want to use one frame as a "menu"
to change the page being displayed in an adjoining frame (as I described
in the "What are frames?" section of this tutorial). Although the page
may change within a frame, the frame itself will always retain its assigned
name. To see how this is applied read on to the next section, "Targeting
a specific frame with links."
The marginwidth
and marginheight
sub commands are pretty much self explanatory. They create invisible margins
to help center the pages in frames. I usually use small numbers like 10
and 5 but you can try different values to ensure your framed pages come
out looking just the way you want them. You should generally use these
sub commands.
The frameborder
sub command functions much the same way the border sub command does within
the <frameset>.
It differs in that the frameborder sub command affects only one page whereas
the border command affects all the pages. Again you'll have to fiddle with
its value to suit your liking.
The final sub command to be dealt with is the
scrolling sub command. It controls whether or not the person looking at
your page can scroll up and down if the page exceeds the boundaries of
their browser window. In long documents like this it is a must to have
the value set to yes or at least auto.
Setting it to no would mean the viewer could
not read all the way to the bottom of your page. The possible values for
the scrolling command are easy enough to remember. As I mentioned setting
it to no means the page won't scroll; setting it to yes means a little
scroll bar will always appear (the gray sliding bar on the right side of
this page); and auto means the browser will make the scroll bar appear
when it is necessary ( the most commonly used setting).
Targeting a Specific Frame
with Links
I once again making the presumption that you know how to make a link.
To review, let's look at the structure of the command for a link.
<a href="http://www.javascripts.com">Click
Here to go to the 24 Hour Javascript Site</a>
In this example, clicking on the phrase Click
Here to go to the 24 Hour Javascript Site will take you to www.javascripts.com.
In order to make the javascripts web site appear in a frame named frame2
we would add target="frame2" sub command so
it would now look like this:
<a href="http://www.javascripts.com" target="frame2">Click
Here to go to the 24 Hour Javascript Site</a>
Easy as pie! Now every time we click on the linked phrase Click
Here to go to the 24 Hour Javascript Site, the page being displayed
in frame2 would change. Of course it would
make sense to put the linked phrase on page in another frame named
say frame1 or something. This way the link
would always be visible in frame1 while the
page in frame2 would change. Now, if you had
set up a bunch of links in frame1 and targeted
them all to frame2 you'd have a makeshift
remote control for frame2!
There's a little problem with linking with frames which is solved by
a couple of specific values for the target sub command. We know now that
links can be targeted to specific frames, but what if you wanted to to
change the entire frameset page (notice I said frameset and not frame)?
Well you'd have to do the following:
If you wanted to change the entire frameset page in which the the link
was being displayed on a page in one of the frames, then you'd set the
target value to equal "_parent"
like so:
target="_parent"
If the link was within a frameset within another frameset then in order
to transgress all the framesets you'd have to set up the target value like
so:
target="_top"
Finally if you would prefer the link to open up an entirely new browser
window in which to show its targeted page (so there would be two versions
of netscape or internet explorer etc. running on your desktop) you would
type:
target="_blank"
Actually if you set the target value to a frame name which hasn't been
used yet, the browser will open the new window and assign it that name.
So for example you set the target value like so:
target="new"
The new window (although showing only one page) will be assigned the
frame name "new". All references to a frame
named "new" will now change the page in the
new window.
Including a Message for a Browser that
Can't See Frames
Well this part of a frameset page is put in just people with
older browsers that can't see frames. It's a nice thing to do for these
people but it is entirely optional (intended for text only browsers). All
you have to do is type some few kind words in between the command pair
<noframes> and </noframes>;
see the outline of a basic frameset page at the beginning of this page.
Pages
in the Frames
Well I just want to add a word about the pages which actually get put
in the frames on a frameset page. Let your imagination go. At the very
least you can add a handy navigation bar for your site which will always
be visible. You can even add a title (for a total of three frames) at the
top so your visitor's will always know they're viewing your brand new frames
enhanced web site! Frames require a lot of trial and error; mostly figuring
out what goes where and how big a particular frame should be. Keep in mind
that not all people use the same resolutions or have the same monitor sizes.
Try changing your resolution and observe how spacing and size change in
your browser window accordingly. You might find a frames page created at
a resolution of 1024 x 768 looks awfully cramped at 800 x 600 (which a
lot of win 95 users set their monitors to). Resize elements within the
framed pages accordingly. Frames can be a pain in this way, that is if
you even care how your page looks on computers with different settings
than your own. However when used properly they can dramatically improve
the look and feel of your web pages and add that extra WOW factor to a
plain old HTML page.
Well you've completed
another page of my tutorial. Good job slick, one more page to go and you'll
have learned almost as much as I do about this stuff. Now before proceeding
to the next page, make sure you have java and javascript enabled web browser.
Also make sure that these features are enabled in the options or general
preferences of your browser. Java can really add a lot of cool "special
effects" to a page and it's worth the time and effort to learn to understand
them. Continue to the next page to find out more. Remember this is the
advanced stuff.
| tutorial page1 | tutorial page2
| tutorial page3 |
| GEOCITIES | Home
Page |