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
   71   72   73   74   75   76   77   78   79   80   81