HTML and CSS —

The img Element

When working with images, the element you'll be using is img. This is an empty elementin other words, it does not contain any text content. As a result, it doesn't require a closing tag. It's written in XHTML as follows:

<img />

Placed all by itself within the body of your document, this will do nothing at all. So along with the img element itself, you'll need to point to the location of the image. This is done using the src attribute, which stands for "source."

In the value of the source attribute, you'll add the location and the name of the actual web graphic file, along with its extension. Example 3-1 shows a complete document with the image source included.

Example 3-1. Adding the image into the document body

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>tutorial 3</title>

</head>

<body>

<img src="images/photo.jpg" />

</body>
</html>

NOTE

You'll notice that I've used a subdirectory called images in which to store my web graphics. It's conventional to place images in a subdirectory beneath the documents that use them or, if you have a fairly small site, in one image location off the root directory.


This causes the image to appear in your browser window (see Figure 3-1).

Figure 3-1. The image appears within the browser window.

Without any content in the document, the image automatically is placed in the upper-left corner. You'll ultimately be doing a lot more with this image to make it more useful:

  • Assist browsers with better rendering

  • Provide helpful information to those who might not be able to view the image

  • Link the image

NOTE

You'll explore how to do these things using XHTML first, but in tutorial 8, "Working with Color and Images Using CSS," you'll learn more advanced methods to control an image's presentation using CSS.