How to add an image to your website

Adding an image to your website is simple. It can be done with HTML alone and will take you no longer than a minute to do! We're now going to show you the code required to do this.

First of all you will need a HTML document, whether it be blank or full of content already. If you have followed any of the tutorials on the introduction page you should have one already, otherwise you can go ahead an create one now. If you prefer you can download a blank HTML document by clicking here. You will need WinRar to extract the file.

To add an image to your web-page, find an image you wish to use and browse to the folder containing your HTML file. It is usually considered good practise to create an 'images' folder which will hold all images used on your site. This does make things easier to manage and I would recommend it.

Code

If you put the image in the same folder as your HTML file:

<img src="imagename.gif" alt="description here">

If you created a folder named 'Images', in the same location as your HTML file:

<img src="images/imagename.gif" alt="description here">

Just so you know, the 'alt' tag is used by the browser when the image cannot be found or displayed, for whatever reason. If the image cannot be displayed the 'alt' text will replace it. This makes your web-page more accessible to those using a screen reader.

Things to remember

1. The 'img' tag is considered empty, and therefore does not require a closing tag. As you can see from the example above, we have not used a </img> tag at all.
2. The 'src' part of the code stands for source. The source is used to point the web browser to the required image. The value of the 'src' attribute should come after the '=' and between double quotation marks.
3. Remember, images do require bandwidth and can slow your site down if not used carefully.