Learn to Build a Website

Frame 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 Frame Page</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

We will give each document a name. 

<HTML>
<HEAD>
<TITLE>My Frame Page</TITLE>
</HEAD>
<BODY>
Shameem
</BODY>
</HTML>

Create a new folder somewhere and save this as shameem.html. (Windows 3.x users save it as shameem.htm)

Now make another html document.

<HTML>
<HEAD>
<TITLE>My Frame Page</TITLE>
</HEAD>
<BODY>
Sharf
</BODY>
</HTML>

Save this in the same folder as sharf.html.

Now do the same for Nows, Kassim, Sultan, and Kareem. 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 Frame Page- The Master Page</TITLE>
</HEAD>

<BODY>
</BODY>

</HTML>


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

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


</HTML>

...it uses <FRAMESET> tags instead.

<HTML>
<HEAD>
<TITLE>My Frame 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 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="shameem.html">
  <FRAME SRC="sharf.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

This site is best viewed in Internet Explorer 4.0 Version and above