Adding images to a webpage

This tutorial explains how to add images to your web pages using the HTML <img> tag. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should aways use alt text in case the image cannot be loaded in the user’s browser

    This is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.

  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the width and height of the image in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
<head>
 <title>My webpage</title>
 <meta charset="utf-8"/>
</head>
<body>
<img src="batman.png" alt="Batman" width="400" height="400"/>

<!-- Make sure you include the full file path of an image if it is located in a different folder eg. folder2/batman.png 
-->
</body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘other_page.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="other_page.html"><img src="your_image.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.