HTML HELP - Displaying images on your website

This is a tutorial for people wanting to learn how to display an image on their webpage using HTML.

Step One: Filename & Image uploading

Whatever image you want to display on your website, take note of it's filename - for example imagename.jpg

Upload the image to your website's main directory. If you prefer to organise it into a special folder on your website then remember the folders name. When we link to it later, it will come in front of the image name like so: Images/imagename.jpg

Step Two: Starting with HTML code

To display an image on a webpage, you need html code saying (for example) :

<img src="URL/filename">

so to display your image, you will need to replace the words in bold. If my image was named 'imagename.jpg' then I would need to replace 'filename' with this:

<img src="http://imagename.jpg">

then, I would need to replace the word 'URL' with my actual web URL (your website address) - otherwise the code doesn't know where to load the pets image from! This will be (in my case):

<img src="http://www.chickensmoothie.com/imagename.jpg">

Make sure you include the 'http://' bit!

Step Three: Aligning your image to the left/right/centre

Once you've sorted your code, you can easily set your image to allign itself to the left, right, or center of your page

This is the code I need to display my bunny image, but you can replace this section with the code relevant to your own image and site URL (the same code you developed using step 2 and 3):

<img src="http://www.chickensmoothie.com/bunny.gif">

She will be aligned to the left of the screen by default, but to align her to the right, I just need to add ' align=right' just before the closing > tag, like so:

<img src="http://www.chickensmoothie.com/bunny.gif" align=right>

This will put her over to the other side of the page--->

 

 

To align her to the center, you need to add slightly different code, add the tags <div align="center"> and </div> like so:

<div align="center"><img src="http://www.chickensmoothie.com/bunny.gif"></div>

 

Step Four: Hyperlink or linking 'clickable' images

To make your image link to something when you click it, you need to add a few more tags to your image code. This bunny links to my homepage.

To set this up, you first get your image code, eg:

<img src="http://www.chickensmoothie.com/bunny.gif">

and you enclose it in a link tag, eg:

<a href="URL you want to link to"><img src="http://www.chickensmoothie.com/bunny.gif"></a>

(don't forget the </a> at the end!)

if you wanted to link to http://www.chickensmoothie.com for example, you would do this:

<a href="http://www.chickensmoothie.com"><img src="http://www.chickensmoothie.com/bunny.gif"></a>

but if you use this code, your image will have an ugly link border around it like so:

to get rid of the border you need to add " border=0" inside the img tag, like so:

<a href="http://www.chickensmoothie.com"><img src="http://www.chickensmoothie.com/bunny.gif" border=0></a>

  Wah lah! A clickable image with no ugly border :)

If you have problems getting this to display the image properly or link properly, make sure you didn't mix up the link with the image URL. Make sure your URL's include the http:// at the start.