Frames Tutor- Lesson 6

OK, let's make home.html, here.html and there.html. 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.html

<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 Joe, besides being VERY handsome, has taught me the right way to build Frames!<P>
<CENTER>Enjoy your stay!</CENTER><P>
</BODY>
</HTML>

VIEW home.html

Save this as here.html

<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.html

And of course this one as there.html.

<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.html

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 directry.html and add the necessary TARGETs.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.html" TARGET="MAIN-WINDOW">Home</A><P>

<A HREF="here.html" TARGET="MAIN-WINDOW">Go here</A><BR>
<A HREF="there.html" 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.netscape.com/" TARGET="_top">Netscape</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.html 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 Joe, besides being VERY handsome, has taught me the right way to build Frames!<P>
<CENTER>Enjoy your stay!</CENTER><P>
Visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</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'm keeping it kinda sorta separate. Unless you are specifically looking to add this feature to your pages, feel free to skip it.

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

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7
PROFESSIONAL WEB DESIGN
Back to Tutor Base
This page hosted by Get your own
Free Home Page
1