EXAMPLE PAGE 8

Example Page 8

In this example we are going to add tables to our personal homepage. Open your welcome page (If you followed the instructions in the examples, the file name should be index.html). In Example Page 5 I added an animated image of a flame on top of a torch. In that exercise I explained that to get the flame to display correctly on the torch you have to center both the images on the page, since if you didn't, the images do not quite fit over each other, and that was because the flame image was smaller in width than the torch image. This meant that it would be impossible to put the image of the burning torch on both sides of my title. But by adding tables to my page I can now master this. I am going to add a table with one row and three columns and in the first and third column place the burning torch, and in the second column place my title image, keeping in mind that I have to center the burning torch in each column I place it. I have also removed the burning torch I added in Example Page 5, I just did this because it looked nicer to me without the torch at the bottom of the page. I also removed my initial title since my title image now replaces that. Please note that the red and striked out text (~~text~~) is the text I removed form the original document.

And this is what your code should look like:

<HTML>
<HEAD>
<TITLE>The Green Tentacle Homepage</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
~~<H3 ALIGN="CENTER">Welcome to the Green Tentacle Homepage</H3>~~
<TABLE ALIGN="center" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80%">
<TR>
<TD WIDTH="33%" VALIGN="middle" ALIGN="center">
<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"> 
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</TD>
<TD WIDTH="33%" VALIGN="middle" ALIGN="center">
<IMG SRC="title.jpg" WIDTH="250" HEIGHT="82" ALT="The Tentacle Homepage">
</TD>
<TD WIDTH="34%" VALIGN="middle" ALIGN="center">
<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"> 
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</TD>
</TR>
</TABLE>


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.

Don't forget to save your file (index.html).

[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