Add Images to Page

The <img> tag is used to add images to a web page. It has two attributes: src and alt. In this tutorial you will insert image into your web page.

Image takes two attributes: src and alt. src specifies the source of the image. If the image does not load, then altenative text needs to be displayed. This alternative text is stored in alt attribute.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <meta name = "viewport" 
    content="width=device-width,initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Images</title>
  </head>
  <body>
  <img src ="logo.png" alt="Image 1"/>
  </body>
</html>

The output of the above program is shown below.

output of the program. displaying image
output of the program. displaying image

If the image does not get displayed, then the text gets displayed as shown below.

Image 1 displayed
Image 1 displayed

You can get lot of non-copyright images from pexels. You can get free stock photos and videos. So, in the src, you can enter the url for the image and get the image.

<img src="url_Of_image" alt="image from internet" />

Now, if the images are big in size, you can always adjust the size using height and width attribute. There is another way and it is using CSS, which we will use later.

<img src ="logo.png" alt="Image 1" width="260px"/>

The height will automatically get adjusted, if you adjust width. If you wan’t to specifically adust height you can give height attribute.

<img src ="logo.png" alt="Image 1" width="260px" height="250px"/>

It is better to place all the images in a folder. When your project gets big, you should have CSS, JS, Images, Fonts and Config files in different folders, as shown below

Arrangement of files and folders
Arrangement of files and folders

One Reply to “Add Images to Page”

Leave a Reply

Your email address will not be published. Required fields are marked *