Showing images on a page

Where are we?

You know how to find images for your Web pages, and how to create your own. Now you’ll learn how to show the images on Web pages.

This lesson’s goals

By the end of this lesson, you should know how to use the <img> tag to show images.

The <img> tag

Use the <img> tag to show images on a Web page. Like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Happiness</title>
  </head>
  <body>
    <h1>Happiness</h1>
    <p>What makes a dog happy?</p>
    <p><img src="food_love_happiness.png"></p>
  </body>
</html>

Figure 1. Happiness

Line 10 shows the <img> tag at work:

<img src="food_love_happiness.png">

Give the <img> tag the name of the file to show, in the src attribute. You can see this page in your browser.

Notice that your browser needs two files to show this page:

  1. The HTML file, with an extension .html.
  2. The image file, with an extension .png.

So image data are not stored in HTML files. Image data are stored in separate files. HTML files are always just plain text.

For now, we’ll keep all of our files in the same directory on the hard disk. So the directory for the page in Figure 1 might look like this:

Directory with HTML and image files

Figure 2. Directory with HTML and image files

When you upload the files to your server, upload both files, and keep them together.

It’s not always good practice to keep the files together. But we’ll deal with that later.

The alt attribute

src is the most important attribute of the <img> tag, but there are others. One is the alt attribute. You should add to every image. It gives a text alternative to the tag when the image can’t be shown.

So the <img> tag about should really be something like:

<img src="food_love_happiness.png" alt="Food, exercise, and love = a happy dog">

There are two reasons you should use the alt tag.

First, the alt attribute is used by screen readers. That’s software used by visually impaired people. As you might guess from the name, screen readers read out the text of a Web page. If the alt attribute is empty, visually impaired users will not know what the image shows.

Federal government Web sites in the US must use the alt tag to comply with the section 508 amendment to the Rehabilitation Act of 1973.

There’s a second reason you should use the alt tag: it helps search engines know what the image is about. People are more likely to find your page if you add alt attributes to your images.

Exercise: Show a drawing

Here a drawing of someone geeking out:

Geek

Download the image to your computer. Create an HTML page that shows the image. Use a relative URL for the image file.

Upload the image and your HTML page to your server. Put the URL of the page below.

(Log in to enter your solution to this exercise.)

Summary

  • Use the <img> tag to show images.
  • Use the alt attribute to give a text alternative for each image.

What now?

Now you know how to show an image on a page. Let’s see how you can style image boundaries, like add a color border.