HTML images

With images, you can display graphical content on webpages.

This lesson focuses on:

The <img> tag
Using an image as a link

The <img> tag

To place images on a webpage, you will be using the <img> tag. The <img> tag has no end tag.

Attributes of the <img> tag:

src
The source attribute. This attribute denotes where an image can be found. This is the only attribute of the <img> tag that is required.
width
This attribute denotes the width (in pixels) of the image.
height
This attribute denotes the height (in pixels) of the image.
alt
This attribute denotes a text alternative to the image. The text specified with this attribute will be displayed if the image cannot load for some reason such as the server cannot find it, or the user is using a text only browser.
border
This attribute is a numeric value and denotes the size of the border around the image.

Example:

<img src="animals.jpg" width="280" height="70" alt="Animals" 
border="0" />

Output:

Using an image as a link

You can use an image as a link. To do so, sorround the image with the <a> tag and its closing tag </a> pointing to where ever it is you want to link to, just as you would make a text link.

Example:

<a href="http://www.urbanext.uiuc.edu/apples/" 
target="_blank">
<img src="apple.jpg" alt="Apple" border="0" />
</a>

Output:

Click on the image to visit another page (will open in a new window)

Examples

Displaying an image
This example demonstrates displaying images on a webpage that are in the same directory as the webpage.

Displaying an image from another directory or website
This example demonstrates displaying an image from another directory or website than the webpage is in.

Setting an image as the background of a webpage
This example demonstrates setting an image as the background of a webpage.

Setting an image to different sizes
This example demonstrates setting an image to different sizes.

See more HTML images examples

Exercises

Create a page with five different images. Skip two lines between each image. Each image should have a description. [See solution]

Create a page with an image that has a border of size 2, a width of 200, and a height of 200. [See solution]

See more HTML images exercises