Frames Tutor- Lesson 1

First things first. For this tutorial we will need a few html documents. Fire up Notepad and copy the following to get you started.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

We will give each document a name. In Table Tutor and Form Tutor we used guy's names. I think its time to get some young ladies in here.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Lisa
</BODY>
</HTML>

Create a new folder somewhere and save this as lisa.html.

Now make another html document.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Terri
</BODY>
</HTML>

Save this in the same folder as terri.html.

Now do the same for Kim, Tina, Shannon, and Beth. Save them just like the others. You should now have a folder that contains 6 complete standalone html documents.

Ok, now the fun stuff... making your master page. Start with this.

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>

<BODY>
</BODY>

</HTML>

Remove the <BODY> tags. The master page doesn't use them...

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>
</HTML>

...it uses <FRAMESET> tags instead.

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

To keep things a little cleaner, I'm going to stop writing the <HTML>, <HEAD> and <TITLE> tags. Needless to say, keep them in your document.

<FRAMESET>
</FRAMESET>

Now's a good time to save it. Save it in your folder (with all the girls) as index.html. If you try to open it with your browser now it will be blank. All you have said so far is "This is my Master Page".

Now let's start defining just how things are going to look. Tell the browser to split the main window into 2 columns, each occupying 50% of the window.

<FRAMESET COLS="50%,50%">
</FRAMESET>

This will still be blank, we have one more thing to do before our 'system is operational'.

We must tell the browser what to put in each frame.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

VIEW IT. You are now the proud parent of a fully functional Framed page!

One last thing before we go on. Note that <FRAMESET> is a container tag, and <FRAME> is not. For those that don't know what that means, a container tag has an opening <TAG> and a closing </TAG>.

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7
PROFESSIONAL WEB DESIGN