Month 3 Week 1

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.

©2003, Gnosis 4-H Club
The 4-H name and 4-H logo are service marks protected under 18 U.S.C. 707.

Questions? Comments? Problems? Contact the Webmaster!


Home