Home » ClientCore: Pages in browsers » A Web page with images

Showing images on a page

See more about:
Table of Contents
  1. Where are we?
  2. This page’s goals
  3. The <img> tag
  4. Relative and absolute URLs
  5. The alt attribute
  6. Summary
  7. What now?

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 page’s goals

By the end of this page, 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

Give the <img> tag the file to show, in the src attribute, and there it is. You can see the page.

<img> is an inline tag. It usually appears inside a block tag container like <p>.

Relative and absolute URLs

Here’s another version of the same page.

<!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="http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/food_love_happiness.png"></p>
  </body>
</html>

Figure 2. Absolute happiness

You can see this page as well.

You won’t see any difference the way the pages are rendered.

The only difference in the code is at line 10. Let’s look at what’s going on.

Take the version in Figure 2 first. The browser downloads the HTML. It finds the <img> tag, and knows it needs to grab another file from the server. It takes the URL from the src attribute:

http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/food_love_happiness.png

This is an absolute URL, also called a fully-qualified URL. It contains all the information the browser needs to get the image file.

What does the browser do? It contacts the server named in the URL – coredogs.com – and asks for the file /content_media/lessons/clientcore/web_page_with_images/food_love_happiness.png. The server sends the file, and shows it.

Now, let’s look at the same line in Figure 1:

<img src="food_love_happiness.png">

The browser knows that it has to download the file with the image. For that it needs a URL. But the src attribute contains only part of a URL. Where’s the name of the server? Where’s the file path?

When a browser sees a partial URL like this in an HTML page, it does the following:

  1. Take the URL of the page containing the <img> tag.
  2. Strip off the name of the HTML file.
  3. Append the contents of the src attribute.

Let’s see what that does in our case.

1. Take the URL of the page containing the <img> tag.

That would be:

http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/happiness.html

That’s what you’ll see in the browser’s address bar if you look at the page.

Page URL

Figure 3. Page URL

OK, on to the next step.

2. Strip off the name of the HTML file.

The HTML file is happiness.html, so that would leave:

http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/

3. Append the contents of the src attribute.

The src attribute is food_love_happiness.png, so we end up with:

http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/food_love_happiness.png

That’s the complete URL of the image. You can verify this if you copy it and paste it into your browser’s address bar:

Image URL

Figure 4. Image URL

A URL like the one in src="food_love_happiness.png" is called a relative URL, because it’s relative to the HTML page the URL is in. When a browser gets an <img> tag with a URL containing just a file name, it asks the server for a file in the same directory as the HTML file containing the <img> tag.

Webers almost always use relative URLs, not absolute URLs. It makes sites easier to manage. Let’s say I wanted to rename the ClientCore book, and call it BrowserCore. The new location of the image would be:

http://coredogs.com/content_media/lessons/browsercore/web_page_with_images/food_love_happiness.png

If I used an absolute URL, as in this tag from Figure 2:

<img src="http://coredogs.com/content_media/lessons/clientcore/web_page_with_images/food_love_happiness.png">

then the page would be broken. I would have to fix the HTML. No problem for one page, but CoreDogs has hundreds of pages. Ack!

But if I has used a relative URL, like this tag from Figure 1:

<img src="food_love_happiness.png">

I wouldn’t need to change anything, as long as the image file was still in the same directory as the HTML file.

That’s why Webers almost always use relative URLs. They can move files around, without breaking things.

We’ll talk more about relative and absolute tags in the next lesson.

The alt attribute

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

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. This is particularly important for informational images.

You should use the alt tag for two reasons. First, 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.

Second, pages containing <img> tags without alt attributes do not validate, that is, they don’t comply with the HTML 4.01 standard we use in CoreDogs. If you read about the img tag in the HTML 4.01 standard, you’ll see this:

User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

“User agents” are usually browsers, though there can be more exotic things. Anyway, you can see that the alt tag is required.

Why would you care about this? Because search engines prefer pages that validate. And that makes your pages easier to find.

Exercise: Showing your drawing

You created a drawing in a previous exercise. Now create an HTML page that shows the image. Use a relative URL.

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.
  • You can use relative or absolute URLs, though you should use relative URLs most of the time.
  • 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.


Lessons

User login


Dogs