HTML Tutorial - Images

Adding images to your webpage is easy. 1 tag is required and has a number of attributes available to it.
Common image file extensions include .gif .jpg .bmp and .png.
The Image Tag
<img> (The 'img' tag only has an opening tag.)

Add an Image
To add an image we use the src="" attribute.
src="image.gif"
eg: <img src="image.gif">

Image Border
An image can have a border or not.
border=0
border=2
eg: <img src="image.gif" border=2>

Image Width and Height
You may change the width and height of the image.
width=200
height=120
eg: <img src="image.gif" width=200 height=120>

Alt Tag
Adding the 'alt' attribute will display text when the mouse hovers over the image.
alt="Description of image."
eg: <img src="image.gif" alt="Description of image.">
Hover your mouse over the image below.
Guitar Man.

Combine Attributes
Any or all attributes may be combined into the 'img' tag.
eg: <img src="image.gif" width=100 height=60 alt="Description of image." border=0>

Linking an Image
You can have an image link to a webpage.
You do this by including the image tag inside a hyperlink tag.
eg: <a href="http://www.berm.co.nz"><img src="image.gif"></a>

HTML Tutorial Home