How to display an image on your web page

Before you can use an image as a link you first have to know how to display an image on your web page. The first thing that you need to do is create an image file. Place your images in this file, name the file "images", and upload it to your root directory.

Images have a name and a type. The most common types of images are jpg, gif and more recently png. Examples are:
cat.jpg
bird.png
dog.gif
So, we have a file images with images with names and the images are types.
Now we can tell the browser where the image is located or the source of the image.
<img src="images/name.type">
This is the syntax to display a jpg image from my images file named boots.
<img src="images/boots.jpg" />

 

How to connect to an image outside your url

To link to an image from a different website such as Photo Bucket use this code
<img src="http://i240.photobucket.com/albums/acen8s.jpg">
Example: <img src="http://i240.photobucket.com/albums/acen8s.jpg" />

The alt tag

The alt tag (alternative) is a description of the image. It is part of the accessibility standard set by w3 schools for the impaired. If you hold your pointer over the image you will see a description.

The Firefox browser does not support mouse-over comments on images alt tags. To remedy this problem, change the alt tags to title tags.

Accessibility

Important: Go to The Alt tag and Web accessibility for more must read information on accessibility and Alt tags.

The dimensions

The dimensions of the image should also be included. The proper xhtml syntax to display this image would be
<img src="images/boots.jpg" alt="image example old boots" height="21" width="75" />

How to use an image as a link

Using an image as a link is very simple. The key is where you put the closing </a> tag. The syntax to use an image as a link is
<a href="/index.html"><img src="images/boots.jpg" alt="image example blue star" height="21" width="75" /></a> Click on the boots image to see example.

Images are a great way to make your web site more interesting and to give it a little pizzazz, but, they should be used sparingly. Images are large files and the larger the file the slower your page will load. Most people won't wait for a slow page to load. So, keep your images small.

WARNING Don't use those annoying flashing images, they just make people want to kill you.