EXAMPLE PAGE 6

Example Page 6

Up to this stage our personal homepage looks very nice, but it doesn't do anything apart from being aesthetically pleasing to us. This is the stage where we add links and make the page interactive. Open the HTML file you saved in Example Page 5 in your text editor (If you followed the instructions in Example Page 5 the file name should be index.html). Add the text "ENTER" at the bottom of the page, and create the link on it to point to menu.html. Since the current page is our welcome screen, we are going to open the menu page once the user has clicked on the "ENTER" text of our welcome web page. But we don't have a menu page yet, so let's create one.

Make the menu page to have the same look and feel as your welcome page and add the menu options "ABOUT MYSELF" - (about.html), "LINKS" - (mylinks.html), "SIGN MY GUESTBOOK" - (guestbk.html) and "E-MAIL ME" - (mailto:[email protected]). The link's URL is in brackets next to each menu option. Feel free to add any other menu options you would like. Also, keep in mind that even though we are going to create all the links to these menu options, most of them don't have an actual page created for them, so they will not work until the pages are created. But don't worry, at the end of the tutorial all the pages should be in place to make your personal homepage work just fine.

And since we did links in the tutorial, we are also going to create a page with all your favorate links to other cool web pages on the internet.

This is what your code should look like for index.html after adding the enter link:

<HTML>
<HEAD>
<TITLE>The Green Tentacle Homepage</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
<H3 ALIGN="CENTER">Welcome to the Green Tentacle Homepage</H3>
<IMG SRC="title.jpg" WIDTH="250" HEIGHT="82" ALT="The Tentacle Homepage">


A high school student thin
ks, "When I'm out of school and d
on't have to do what I am told, th
en everything will be great!" He 
leaves school and suddenly recogn
izes that he won't be happy until 
he leaves home. He leaves home an
d starts university and soon decid
es, "When I have got my degree, t
hen I'll be really happy!" Eventua
lly he gets his degree at which t
ime he realizes that he can't be h
appy until he has a job. He gets 
his job and has to start at the bo
ttom of the heap. You guessed it!
 He can't be happy yet. As the yea
rs roll by, he postpones his happ
iness and peace of mind until he 
gets engaged, gets married, starts
 buying a home, gets a better job
, starts a family, gets the kids i
n school, owns his home, gets the
 kids out of school, retires... an
d he drops dead before he allows 
himself to be blissfully happy. Al
l his present moments were spent 
planning for a wonderful future wh
ich never arrived. Moral of the s
tory? Live each day to the fulles
t. Don't postpone your happiness t
o tomorrow... there may not be an
other tomorrow to enjoy.


<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"> 
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">


<A HREF="menu.html">ENTER</A></FONT
</BODY>
</HTML>

Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

And this is what your code should look like for menu.html, remember this is a new page, so start a new document and save the file in the same directory with the rest of your personal homepage files:

<HTML>
<HEAD>
<TITLE>The Green Tentacle Homepage</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
<IMG SRC="title.jpg" WIDTH="250" HEIGHT="82" ALT="The Tentacle Homepage">
<A HREF="about.html">About Myself</A>
<A HREF="mylinks.html">Links</A>
<A HREF="guestbk.html">Sign My Guestbook</A>
<A HREF="mailto:[email protected]">e-mail Me</A>

<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"> 
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</BODY>
</HTML>

Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

And now for our links page. Once again create it to fit the look and feel of your personal home page. Start a new document and give every link a short description and save the document as mylinks.html. This is what my links page looks like:

<HTML>
<HEAD>
<TITLE>The Green Tentacle Homepage</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg" LINK="#008000">

My Favorite Links 
<IMG SRC="links.gif" width="461" height="38">


Need a cool animated image for your web page, then follow the link below, it will take you to one of the biggest animated GIF archives on the web. 

<A HREF="http://www.geocities.com/CollegePark/2883/">Animated Gif Archive</A> 
Well if youre a big game fan like I am, you'll know the frustration of getting stuck in a quest, so just point your browser to the next link and get solutions to almost any game you can think of. 

<A HREF="http://www.gamesdomain.com">Game Solutions</A> 
Ask yourself: "If I did not have a name, how could I identify myself? If I had no name, who would I be?" Your name is extremely important. Your name is your life! It is how you identify yourself. It is how others identify you. Ever wanted to know what your name means, well wonder no more, here is a really great site to search for your name and get a total analysis of who, what and why you are. 

<A HREF="http://www.kabalarians.com/">Name Analogy</A> 

<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"> 
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</BODY>
</HTML>

Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

[Return to Tutorial]

Introduction | Basic Tags | More HTML Tags | List Tags | Adding Graphics | Creating Links | Adding Forms | Adding Tables
Creating Frames | Multimedia | Uploading Files | Downloads | Questions & Answers | Useful Links | e-mail Me

Example Page 1 | Example Page 2 | Example Page 3 | Example Page 4 | Example Page 5 | Example Page 6
Example Page 7 | Example Page 8 | Example Page 9 | Example Page 10

Color Chart | HTML Tester

Hosted by www.Geocities.ws