|
LILLY ROBOT |
Images
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"/>
Displays
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"/>
Displays
Attribute:alt
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
Image not Displayed
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"/>
Displays
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"/>
Displays
