Page 76 - TP_Play_V2.1_class8
P. 76
Some commonly used CSS properties associated with the <img> tag are as follows:
CSS Property Description Example
WIDTH Sets the width of the image. IMG { WIDTH: 300px; }
HEIGHT Sets the height of the image. IMG { HEIGHT: 200px; }
BORDER Adds a border around the image. IMG { BORDER: 2px SOLID
BLACK; }
BORDER-RADIUS Rounds the corners of the image. IMG { BORDER-RADIUS: 10px; }
FLOAT Aligns the image to the left or IMG { FLOAT: left; }
right.
MARGIN Adds space around the image. IMG { MARGIN: 10px; }
PADDING Adds space inside the border of IMG { PADDING: 5px; }
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>
Output
</HTML>
Make sure to save the image you want to insert on the web page in the same location as your
HTML file. If we want to insert an image from any other location, we need to provide the complete
path of the image to the SRC attribute. For example, if our image is saved in the D: drive of
computer, then the path of the image will be D:\lily.jpg.
Clickipedia
Some of the image formats supported by HTML are Joint Photographic Experts Group (JPEG),
Graphics Interchange Format (GIF) and Portable Network Graphics (PNG).
74 Play (Ver. 2.1)-VIII

