HTML: Images

In the basics tutorial, I showed you how to link to external files.  In the example, I linked to an image outside of the page.  But sometimes you don't just want to link to external image files.  In fact, you want to display them on your page.  In this tutorial we are going to look at the different properties of images and how they can be displayed.

So, in this first example we are going to display an image on the page:

This will give us:

Me, looking smug because I can do HTML! 

Now isn't that simple!  All you have to do is change the tag from a link (A) and the attribute from a page reference (HREF) = A HREF to an image (IMG) tag and source (SRC) attribute = IMG SRC.

Images sometimes don't show up.  Usually this is because the URL is incorrect, but sometimes it just happens.  If this is the case, you can add alternative text that will display if the image doesn't show.  If the images do show, you can hover your mouse over them and the text will display.  Here's how to do it:

After writing the image code, before closing the tag, add ALT="your text" then close the tag.  It should look like this:

<IMG SRC="http://www.little-miss-alien.co.uk/images/shelley_grin.jpg" ALT="Shelley's goofy grin">

This will give this if the image doesn't show:

And this if it does (hover your mouse over it!):

You can also specify if your image should have a border or not.  Usually, by default images being used as links (see links section) have a 1px border in the colour of your other links.  If you want your images to have borders then you can specify the size of your border or even if you have one at all!  Here's what to do, new code is in bold.

<IMG SRC="http://www.little-miss-alien.co.uk/images/shelley_grin.jpg" alt="Shelley's goofy grin" border="x">  The x can be any number you choose.  For example:

0px
1px
2px
3px

And so on!  Please note you cannot change the border colour.  This is why I rarely give my images borders.

When your images load, if their size is not specified, the browser must load the image in order to judge the space required.  This slows loading down.  If want them to load more quickly then you can specify their size so the browser doesn't have to take time to figure out the size.  This is done by adding to our image code once again:

<IMG SRC="http://www.little-miss-alien.co.uk/images/shelley_grin.jpg" alt="Shelley's goofy grin" border="x" width="58" height="59">

You can discover the width and height values of your image by opening any graphics program, right clicking on the image and selecting 'properties' (note: Windows only, I don't know about Macs).

The image will look no different, but it will load faster depending on the type of modem you use.

As you can see from the code we have done, you can add multiple attributes to the IMG tag.  In order to make them work properly make sure you put a space between each attribute.