Webpage Lessons #4

Back To the Last Page

Step....I forget: Images

Of course your page will look plain with just text....and considering you said you wanted one to put up scanned in photos, I think telling you how to add images would make sense.

First thing is first, lets use this image below:

This is a poor photo of me due to Boki moving her head in front of mine at the last minute, but we'll use it anyways.

Ok, you'll want to save the photo to the CatsPage Directory that the htm file is saved in. Done? Good.

Putting an image in is simple:

<img src="X">

Where X is the name of the image, in this case, example.jpg

So, lets add it:


<center> 
Catherine's Page 

<img src="example.jpg">
</center> 
 
Hello, I am Catherine, I am Great. 
Welcome to my webpage.


So, lets see what it looks like:

Catherine's Page

Hello, I am Catherine, I am Great.
Welcome to my webpage.

Thats just about all the essentials, only one main thing remains:

Step БОВ: Linking

Unless your webpage is going to be one, single page, Linking is an important thing to learn.

<a href="X"></a>

Where X is the file you are linking to. This file can be another webpage, an image, an mp3, just about anything.

Lets start by downloading a file for you to use:

Click here, then from the File menu, save to the CatsPage Directory.

Very good, lets get started then. If the thing you are linking to is in the same directory as the current page, then it is only necessary to put:

<a href="example.htm"></a>

But, lets say for instance, you decided to create another directory in CatsPage called, ...lets say, Images and saved example.htm there, then you would need to put:

<a href="Images\example.htm"></a>

Or, you decided to link to another webpage, rather than a file in your own webpage, then you'd need to put:

<a href="http://www.yahoo.com"></a>

Everything you put in between the <a href="X"> and the </a> becomes the link. It can be words or pictures, so lets add some links to your page:

Lets turn the big image of the bowling alley into a link first

<a href="example.htm"><img src="example.jpg"></a>

And, lets add another link, to another webpage...hmm, which webpage shall we choose? I know! How about mine!

<a href="http://novasplace.tripod.com"> Ryan's Great Page!</a>

So, lets put those in your page:


<center> 
Catherine's Page 

<a href="example.htm"><img src="example.jpg"></a>
</center> 
 
Hello, I am Catherine, I am Great. 
Welcome to my webpage. 
<a href="http://novasplace.tripod.com"> Ryan's Great Page!</a>


If it's looking a little crowded, you can space it out if you like. Lets see what it looks like:

Catherine's Page

Hello, I am Catherine, I am Great.
Welcome to my webpage.
Ryan's Great Page!

Now would be a very good time to save.

Go To Next Page