Beginning Frames
Creating Framed Documents
The first thing you need to remember about frames is that
it is NOT an HTML document, it is different. They are
called..... frame documents. I know, that's going to be
tough to remember :)
In short, you create a frame document and within that
file, you list all the HTML files you want to display. Still
with me? How about I show you instead, by having you jump
right in and create your own frame document right now!
First, open a new file in SimpleText or Notepad. The
first part of this should look familiar to you by now -
<HTML>
<HEAD>
<TITLE>My First Frame Page</TITLE>
</HEAD>
Normally, you'd next add in the <BODY>
tag and all
of it's content. But this is where frame documents are
different than HTML ones, because your next code is this -
<FRAMESET>
That code tells the browser this is a frame page, not an
HTML one, and to act accordingly.
Place your curser inside the <FRAMESET>
tag, after
the "T" and type in ROWS="*,*" so you
end up with this -
<FRAMESET ROWS="*,*">
The asterisk (*) tells the browser to give the frame all
the space it needs in the window. Because there are two
asterisks in your code, it will give both all the space they
need, filling up the entire browser window.
Now comes the part where you tell the browser what HTML
documents to put into those frames. You do this with the
<FRAME>
tag. For our practice page, you'll be using
the two pages you already created - test1.htm and test2.htm
- so add a line for each, like so -
<FRAME SRC="test1.htm">
<FRAME SRC="test2.htm">
The last thing you need to do is give each frame it's own
name. It can be anything you like - often times, they are
named after what they do, such as "left nav" or
"main display". For our purposes, we'll keep the
names simple with just "top" and
"bottom". So now your <FRAME>
tags should
look like this -
<FRAME SRC="test1.htm"
NAME="top">
<FRAME SRC="test2.htm"
NAME="bottom">
Whew! Almost done! All you need to do now is close off
the open tags -
</FRAMESET>
</HTML>
And then save your page as "test3.htm" to your
work folder. Once you've done that, open it up and take a
look!
After you are done admiring your handy work, click
here to move on.