Page 113 - TP_Plus_v2.2_Class_8
P. 113
WIDTH: It specifies the width of the image in the web page. For example,
<IMG SRC="lily.jpg" WIDTH="50%">
HEIGHT: It specifies the height of the image in the web page. For example,
<IMG SRC="lily.jpg" HEIGHT="60%">
ALT: It specifies the alternate text to be displayed in the web browser, if the provided image is not
found. For example,
<IMG SRC="lily.jpg" ALT="Describing the flower">
Some commonly used CSS properties associated with the <img> tag are as follows:
Option Description Examples
WIDTH Sets the width of the image. IMG { WIDTH: 300px; }
HEIGHT Sets the height of the image. IMG { HEIGHT: 200px; }
Adds a border around the
BORDER IMG { BORDER: 2px SOLID BLACK; }
image.
Rounds the corners of the
BORDER-RADIUS IMG { BORDER-RADIUS: 10px; }
image.
Aligns the image to the left or
FLOAT IMG { FLOAT: left; }
right.
MARGIN Adds space around the image. IMG { MARGIN: 10px; }
Adds space inside the border
PADDING IMG { PADDING: 5px; }
of the image.
Let us use the <IMG> tag to insert an image on the web page in the following way:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Inserting Image</TITLE>
</HEAD>
<BODY>
<B>Inserting image on the web page</B>
<IMG SRC="lily.jpg" WIDTH="200" HEIGHT="200" STYLE="float: right; border:
2px solid black;">
</BODY>
</HTML>
Images, Links and Frames in HTML5 111

