Images

Adding Images

< img >

To add an image into the page you need to use an < img > element. This is an empty element (which means there is no closing tag). It must carry the following two attributes.

src

This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. (Here you can see that the images are in a child folder called images

alt

This provides a text description of the image which describes the image if you cannot see it.

Height & Width of Images

• height: This specifies the height of the image in pixels.

• width: This specifies the width of the image in pixels.

Three Rules for Creating Images

There are three rules to remember when you are creating images for your website which are summarized below.

1- Save images in the right format

2-Save images at the right size

3- Use the correct resolution

Figure and Figure Caption < figure > < figcaption >

Images often come with captions. HTML5 has introduced a new < figure > element to contain images and their caption so that the two are associated. You can have more than one image inside the < figure> element as long as they all share the same caption.

The < figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image. Before these elements were created there was no way to associate an < img> element with its caption.