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.
<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> 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:
- The HTML file, with an extension
- The image file, with an extension
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:
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.
src is the most important attribute of the
<img> tag, but there are others. One is the
alt attribute. You should add it to every image. It gives a text alternative to the tag when the image can’t be shown.
<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 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:
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.)
- Use the
<img>tag to show images.
- Use the
altattribute to give a text alternative for each image.
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.