EXAMPLE PAGE 5

Example Page 5

Now we get to the fun part, adding a background and pictures. Open the HTML file you saved in Example Page 3 in your text editor (If you followed the instructions in Example Page 3 the file name should be index.html). I have decided to go with a dungeon theme for my personal home page. Decide on a theme for your page and save all the images to the same directory you have saved your HTML document in. If you are not the artistic type then go to the following web page: Moyra's Jewel Mines, this is great page with loads of backgrounds and images to download and use for free. This is my background, feel free to use it if you want, to save it, just right click on the picture and select "save image..." from the popup menu.

bricks.jpg (6979 bytes)

I have also created a logo for my web page and I'm going to use it as my title.

hmpgtitl.jpg (15569 bytes)

And the final touch is an animated GIF image of a flame with an image of a torch underneath it. To get the flame to display correctly on the torch you have to center both the images on the page. As you can see the images below do not quite fit over each other, that is because the flame image is smaller in width than the torch.

torch.gif (1394 bytes)

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>
<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">
</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).

I have also added the background to my about page. Open the HTML file you saved in Example Page 4 in your text editor (If you followed the instructions in Example Page 4 the file name should be about.html). Using my normal background I have had to change the color of my text, since the black doesn't show very well on my dark background, so I have changed my text color to a light green.

And this is what your code should look like:

<HTML>
<HEAD>
<TITLE>The Green Tentacle Homepage</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
Hi, my name is Green Tentacle and I live in sunny South Africa. And as the infamous thoughts of Pinky while Brain is talking: "Blah blah blaaah, blah blah, big word, blah blaaah". You get the idea, right?
 
My hobbies include:
<UL>
<LI>Movies
<LI>Computer games
<LI>Reading
</UL>

</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