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
   108   109   110   111   112   113   114   115   116   117   118