NHS Designs - Web Design - HTML

HTML 16: The <img> Element

We've held off on the introductions long enough. As you can see, there's more to dealing with images than just the HTML markup. Anyway, enough of that for now...it's time to meet the <img> element.

Let's start by taking a closer look at the element (although you've probably picked up on most of how <img> works by now):

Here's the <img> element. The src attribute specifies the location of an image file to be included in the display of the Web page. You already know <img> is an empty element.

So, is that it? Not quite. There are a couple of attributes you'll want to know about. And of course you'll also want to use the <img> element to reference images on the Web that aren't on your own site. But really, you already know the basics of using the <img> element.

Let's work through a few of the finer points of using the <img> element, and then put all this knowledge to work.

It's Not Just Relative Links Anymore

The src attribute can be used for more than just relative links; you can aslo put a URL in your src attribute. Images are stored on Web servers right alongside HTML pages, so every image on the Web has its own URL, just like Web pages do.

You'll generally want to use a URL for an image if you're pointing to an image at a different Web site (remember, for links and images on the same site, it's better to use relative paths).

Here's how you link an image using a URL:

To include an image using its URL, just put the whole URL of the image in the src attribute. The URL is the path to the image, so the filename at the end is always the filename of an image. There's no such thing as a default image like there is for Web pages.

Exercise 1

Here's an exercise that involves a bit of trivia:

Given a typical, brand-new pencil, if you drew one continuous line with it, using the entire pencil up, how long would the line be?

What's that got to do with images? To find the answer, you're going to have to write some HTML. The answer to this trivia is contained in the image that is at the URL: http://www.headfirstlabs.com/trivia/pencil.gif.

Your job is to add an image to this HTML and retrieve the answer.

First type in the HTML you see below.
Then insert an <img> element with the URL above in between the second set of tags (where the yellow rectangle is).

<html>
<head>
 <title>Sharpen your pencil trivia</title>
</head>
<body>
 
 How long a line can you draw with the
 typical pencil?
 
 

 
</body>
</html>

Save your file as "pencil.html" inside a new folder called lastnamefirstinitial_HTML16.
Test it in a browser to see the answer. Keep the answer to yourself!

Always Provide an Alternative

One thing you can be sure of on the Web is that you never know exactly which browsers and devices will be used to view your pages. Visitors are likely to show up with mobile devices, creen readers for the visually impaired, browsers that are running over very slow Internet connections (and maybe retrieve only the text, not images, of a site), cell phones, Internet-enabled taosters... who knows?

But in the middle of all this uncertainty you can be prepared. Even if a browser can't display the images on your image, there's an alternative. You can give the visitor some indication of what information is in the image using the <img> element's alt attribute.

Here's how it works:

The alt attribute just requires a short bit of text that describes the image. If the image can't be displayed, then this text is used in its place.

Exercise 2

In this exercise you're going to see how your browser handles the alt attribute when you have a broken image. The theory goes that if an image can't be found, the alt attribute is displayed instead. But not all browsers implement this, so your results may vary. Here's what you need to do:

Take your "pencil.html" from the previous exercise.
File > Save As, and save the file as "broken.html" in the same HTML16 folder.
Update the image element to include the alt attribute "Pencil line 35 miles long", like you see above.
In the src attribute, change the image name of "pencil.gif" to "broken.gif". This image doesn't actaully exist, so you'll get a broken image.
Save the file and test it in your browser.
Try it in another browser and see if you get a different result.

Sizing Up Your Images

There's one last attribute of the <img> element you should know about - actually, they're a pair of attributes: width and height. You can use these attributes to tell the browser, up front, the size of an image in your page.

Here's how you use width and height:

The width attribute tells the browser how wide the image should appear in the page. The height attribute tells the browser how tall the image should appear in the page.

Both width and height are specified using the number of pixels. If you are not familiar with pixels, we'll go into what they are in a little more detail later on.

You can add width and height attributes to any image; if you'd don't, the browser will automatically determine the size of the image before displaying it on the page.

Why use these attributes if the browser just figures it out anyway? On many browsers, if you supply the width and height in your HTML, the browser can get a head start laying out the page before displaying it. If you don't, the browser often has to readjust the page layout after it knows the size of the image. Remember, the browser can't know the size of the images before it downloads them unless you tell it in the HTML.

You can also supply width and height values that are larger or smaller than the size of the image and the browser will scale the image to fit those dimensions. Many people do this when they need to display an existing image at a size that is larger or smaller than its original dimensions. As you'll see, however, there are many reasons not to use width and height for this purpose.

Exercise 3

Let's try out the width and height attributes.

Reopen your "pencil.html" file in Notepad.
File > Save As, and save the file as "sizing.html" in the same HTML16 folder.
Add the following to your <img> element:

Now, make a duplicate of the entire  element which icludes the <img> element. Put it right above the </body> tag, like this:

<html>
<head>
 <title>Sharpen your pencil trivia</title>
</head>
<body>
 
 How long a line can you draw with the
 typical pencil?
 
 
 <img
 src="http://www.headfirstlabs.com/trivia/pencil.gif" alt="Pencil line 35 miles long" width="581" height="185">
 
 
 <img
 src="http://www.headfirstlabs.com/trivia/pencil.gif" alt="Pencil line 35 miles long" width="581" height="185">
 
</body>
</html>

For the second image, change the width attribute to "290". Change the height attribute to "92".
Save the file and test it in a browser. How is the quality of the second image?

Turn in Your Files

Turn in your HTML16 folder containing all the HTML files from this lesson.

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman