Images

A picture is worth a thousands words

Images can greatly enhance the appearance of web page

Large images can also slow down the website, so images have to be chosen carefully

<img> Element is used to define images in HTML

<img> is an empty element and doesnot require closing/ending tag.

Src, Alt Text, Height and Width

(Difficulty Level - Beginner)

The src attribute specifies the location of image

The images can be in the same folder, in another folder or on another website

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <img
                       src= 
                       "rose.jpg" 
                      >

                      <img
                       src= 
                        "https://www.nobelprize.org/nobel_prizes/physics/laureates/
                      1921/einstein_group_photo.jpg" 
                      >

                      </body>

                       </html>

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

The Alt Text Attribute

(Difficulty Level - Beginner)

The alt text attribue describes the image

The alt text attribute is used to diplay the text incase the image cannot be found

The alt text also improves the search engine ranking (SEO) and is recommended to be used with every image

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <img
                       src= 
                       "no_rose.jpg" 
                      
                       alt= 
                       "The beautiful picture of red rose" 
                      
                      >

                      </body>

                       </html>

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

The Image Size

The image size is specified with Width and Height attribues

The height and width attributes always specify the meaurements in pixels

The style can also be used to specify the height and width

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <img
                       src= 
                       "rose.jpg" 
                      
                       height= 
                       "200" 
                      
                       width= 
                       "200" 
                      
                      >

                      </body>

                       </html>

You can also use "style".(The Result will be same)

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <img
                       src= 
                       "rose.jpg" 
                      
                      style=
                       "height:200px; width:200px;"
                      
                      >

                      </body>

                       </html>

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

Both the width, height, and style attributes are valid in HTML5.

However, using the style attribute provides more flexibility and CSS can be used to alter
the sizes as per the requirement.

Image Links

The image can be used as link

To use an image as a link, put the <img> element inside the <a> element

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <a
                       href= 
                       "http://www.gooogle.com" 
                      >
                      <img
                       src= 
                       "rose.jpg"       
                      >
                      </a>

                      </body>

                       </html>

Floating an Image

CSS float property is used to let the image float to the right or to the left of a text

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                      
                      <p>
                      <img
                       src= 
                       "rose.jpg"    
                      style=
                       "height:50px; width:50px; float:right;"
                      >
                      The image will float to the right of the text. The image will float to the right of the text.
  
                      </p>

                      
                      <br>

  
                      <p>
                      <img
                       src= 
                       "rose.jpg"    
                      style=
                       "height:50px; width:50px; float:left;"
                      >
                      The image will float to the left of the text. The image will float to the left of the text.
  
                      </p>


           
                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

Image as Background

CSS background-image property is used to add image as background to any HTML Element

It can be used for any HTML Element even the Body Element

The default behaviour of the the background image is to repeat itself if it is smaller than the element where it is specified.

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                      
                      <p    
                      style=
                       "background-image:url('kitten.jpg')"
                      > We can use background image of any HTML Element. 
                      <br>By default, the background-image will always repeat itself
                      <br>in the direction where it is smaller in size 
                      <br>than the element where it is put in the background.
                      <br>We can use background image of any HTML Element. 
                      <br>By default, the background-image will always repeat itself
                      <br>in the direction where it is smaller in size 
                      <br>than the element where it is put in the background.
                
                      </p>

                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

❮ Prev Next ❯