Website Building → Tutorials → HTML: Using Images (Part 5)

Images are a very important part of any website, the one you are looking at now is full of them! They make websites more interesting, normally more attractive and often are useful for selling a product. After all, if you can see a picture of something you are probably 10x more likely to purchase it that having just looked at a text description...

The basic image code:

<img src="sampleimg.gif">

More attributes include:

<img src="image1.gif" border="0" height="50" width="50" alt="picture description here">

Remember links have no closing tag! You can also combine links and images as follows:

<a href="food.html"><img src="sampleimg.gif" border="0"></a>

Note: If you do not define the width and height of the image in the '<img>' tag it will display the image at its actual size.

The image here has been floated to the right of the text for a nice wrapping effect. It was done using: <img src="sampleimg.gif" style="float:right">

I have begun this paragraph with the <p style="clear: right"> so that it is not part of the above float, this is how to end a 'floated section'.

→ Lists, lists & more lists! →

0. Introduction
1. The Basics
2. HREF Linking
3. Colors & Backgrounds
4. Hexadecimal Color Codes
5. Using Images
6. Lists, lists & more lists!
7. Tables
8. More HTML Tags!