Page 90 - 2611_SmartGPT Pro V(5.0) C-7
P. 90

In this chapter, we will learn how to add images and create links and forms in HTML5. These tools                         </BODY>
                  will help you make your web pages more engaging and interactive.                                                          </HTML>




                            IMAGES IN HTML

                  Images  enhance the look  of a web page  and make  it  attractive.  These are used  to  convey
                  information and catch the attention of website visitors. The most widely used image formats
                  supported by HTML are GIF, JPEG and PNG. The images on a web page can be inserted using the
                  <IMG> tag, which is an empty tag. It has the following attributes:




                       Attribute                     Value                          Description

                                                                                                                                                               If HTML is a canvas and you are an artist, how would you design web pages and layout
                                          URL (or location) of the       SRC  stands  for source.  It  specifies  the                                          to express your creativity and style?
                   SRC
                                          image                          location of the image.

                                                                         ALT stands  for alternate  text.  It  specifies
                   ALT                    Text                           which alternative text should be displayed                                    IMAGES WITH CSS
                                                                         if selected image is not displayed.
                                                                                                                                            We can use CSS to control the display of the image. To control the display of the image we can set
                  Except for SRC attribute, all other attributes are optional in the <IMG> tag.                                             the following image properties using CSS:

                  Syntax of <IMG> tag:                                                                                                         Border: To set the width of an image border.

                  <IMG SRC=“URL of the image” ALT=“alternate text” WIDTH=“500” HEIGHT=“600”>                                                   Height: To set the height of an image.
                  ALT = “Alternate Text”                                                                                                       Width: To set the width of an image.

                  WIDTH = “Value of width in pixels”                                                                                        Write HTML code to set properties of an image using CSS.

                  HEIGHT = “Value of height in pixels”                                                                                      <!DOCTYPE HTML>
                  Write HTML code for inserting an image on a web page.                                                                     <HTML>

                                                                                                                                            <HEAD>
                  <!DOCTYPE HTML>
                                                                                                                                            <TITLE> Images - CSS </TITLE>
                  <HTML>
                                                                                                                                            </HEAD>
                  <HEAD>
                                                                                                                                            <BODY>
                  <TITLE> Inserting Images </TITLE>
                                                                                                                                            <H1 STYLE = "text-align:center">Valley of Flowers </H1>
                  </HEAD>
                                                                                                                                            <IMG STYLE = "Border:10px Solid Black; Height:200px; Width:250px;"
                  <BODY>                                                                                                                    SRC = "D:\Valley_of_Flower.jpg" >

                  <H1 STYLE = "text-align:center"> Valley of Flowers </H1>                                                                  <P> Valley of Flowers National Park is an Indian national park, located
                  <IMG SRC = "D:\Valley_of_Flower.jpg">                                                                                     in North Chamoli and Pithoragarh, in the state of Uttarakhand and is
                  <P> Valley of Flowers National Park is an Indian national park, located                                                   known for its meadows of endemic alpine flowers and the variety of flora.
                  in North Chamoli and Pithoragarh, in the state of Uttarakhand and is                                                      </P>
                  known for its meadows of endemic alpine flowers and the variety of flora.                                                 </BODY>
                  </P>                                                                                                                      </HTML>



                   88   Computer Science (V5.0)-VII
   85   86   87   88   89   90   91   92   93   94   95