11. Adding Images

Images are added with the <img> tag. The src attribute is used to indicate which particular image we want to use. The src is short for source and is the path to the image we wish to use. The path to the image can be absolute or relative.

Add the following to the index.html page.

<p>
	<img src="images/dishOne.jpg">
</p>

Other attributes that you are likely to use with an image include width, height and alt. The width and height indicate the dimensions of the image to be referenced and help speed up page loading. The alt attribute is used to provide alternate text for users who cannot see the image. It is also useful for improving your page’s search engine ranking.

 Attributes can be placed in any order but must be separated from each other by a single space. Therefore, a fuller example of the HTML required to insert an image would be:

<img src="images/dishOne.jpg" width="900" height="200" alt="Jodrell Bank">

The values for width and height are in pixels. You do not need to explicitly declare them as been in pixels. As stated above the actual order of attributes does not matter but generally web designers will place src first as this is the most important attribute to use with the <img> tag.