Frames Tutor - Lesson 6

Frames - Lesson 6

OK, let's make home.htm, here.htm and there.htm. Since you've been working very hard (and I'm sick of typing), just go ahead and copy the following into Notepad and save them.

Save the following as home.htm

<HTML>
  <HEAD>
    <TITLE>A Practice Page- Home</TITLE>
  </HEAD>
  <BODY BGCOLOR="#FFFFFF">
    <H1 ALIGN=center>You are home.</H1>
    Welcome to my homepage! This page should be attractive and easy to navigate 
    because my teacher Michel, besides being VERY handsome, has taught me the 
    right way to build Frames!<P>
    <CENTER>Enjoy your stay!</CENTER><P>
  </BODY>
</HTML>

VIEW home.htm

Save this as here.htm

<HTML>
  <HEAD>
    <TITLE>A Practice Page- Here</TITLE>
  </HEAD>
  <BODY BGCOLOR="#FFFFFF">
    <H1 ALIGN=center>Here</H1>
    Welcome to here. Here is where everything happens. Here you'll find more neat
    stuff than you can shake a stick at. Have you ever seen anyone shake a stick 
    at something?? I never have.
  </BODY>
</HTML>

VIEW here.htm

And of course this one as there.htm.

<HTML>
  <HEAD>
    <TITLE>A Practice Page- There</TITLE>
  </HEAD>
  <BODY BGCOLOR="#FFFFFF">
    <H1 ALIGN=center>This is There</H1>
    I would like to make a proposal. We have all seen that little arrow on signs that say
    "You are here". Wouldn't it be better if there were also another arrow that says
    "You should be there". It would make things so much easier.
  </BODY>
</HTML>

VIEW there.htm

Now view your Master Page.

We forgot something. If you caught the problem back when you were making the directory page... good! So open up directory.htm and add the necessary TARGETs.

<HTML>
  <HEAD>
    <TITLE>Practice Page- Directory</TITLE>
  </HEAD>
  <BODY BGCOLOR="#FFFFFF">
    <H3>Directory</H3>
    <A HREF="home.htm" TARGET="MAIN-WINDOW">Home</A><P>
    <A HREF="here.htm" TARGET="MAIN-WINDOW">Go here</A><BR>
    <A HREF="there.htm"TARGET="MAIN-WINDOW">or there</A><P>
    or visit<BR>
    <A HREF="http://www.yahoo.com/" TARGET="_TOP">Yahoo</A><BR>
    <A HREF="http://home.microsoft/" TARGET="_TOP">Microsoft</A>
  </BODY>
</HTML>

Now try your Master Page.

Works pretty good, doesn't it! Now just for giggles, let's add a link from your home page to me at Professional Web Design. Open up home.htm and plug it in. Make sure you add the proper TARGET because although I really like you, I don't want to show up in your window.

<HTML>
  <HEAD>
    <TITLE>A Practice Page- Home</TITLE>
  </HEAD>
  <BODY BGCOLOR="#FFFFFF">
    <H1 ALIGN=center>You are home.</H1>
    Welcome to my homepage! This page should be attractive and easy to navigate because my
    teacher Michel, besides being VERY handsome, has taught me the right way to build
    Frames!<P>
    <CENTER>Enjoy your stay!</CENTER><P>
    Visit Michel at <A HREF="http://users.skynet.be/frames/index.htm"
    TARGET="_TOP">Frames Tutorial</A>.
  </BODY>
</HTML>

View the finished product.

Since first writing Frames Tutor, I have gotten many letters from people asking how to load two (or more) frames with one mouse click. This is reasonably easy to do with a little bit of JavaScript code. Since it's a "special occasion" kind of thing, and not normally used to develop framed pages, I decided to included it in the Javascript tutorial hosted in this site as well. Click the link to go directly to this lesson:

How to load two (or more) frames with one click.

Home