The image tag <img src =""/> has no closing tag. It has an attribute called src, which stands for source. The source states the name of the image and specifies the location of the picture. The extension for a picture can be jpg/jpeg or gif.

In the example below the folder called images contains a picture called cakes.

<img src="images/cakes.jpg"/>


Width and Height Attributes

The width and height attributes helps to size the image, which is in pixels.

<img src="images/cakes.jpg width="80" height="20"/>



The attribute alt, which stands for alternative, gives a text explanation about the image. Sometimes, the browser might have problems locating the image. Therefore, the alt attribute helps the viewers understand what the image was about.

<img src="images/star1.jg" width="80" height="40" alt="A star"/>

Image Displayed

A star

Image not Displayed

A star

Aligning Images

The 'align' attribute aligns images to the left or right. However, once you have learnt CSS you will be using the float property to align the images to the left and right.

<img src="images/star1.jpg" align="left"/>
<img src="images/star2.jpg" align="right"/>


Are you wondering what about aligning images to the center? The attribute align=center does not work but there are several ways to align an image to the center using CSS. Have a look at the example below.

<img src="images/star1.jpg" style="float:left"/>
<img src="images/star2.jpg" style="float:right"/>
<img src="images/star3.jpg" style="display:block;margin:auto"/>


Now do the Exercise!