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:
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.
<img />
Example 3-1. Adding the image into the document body
NOTEYou'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).
<!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>Chapter 3</title>
</head>
<body>
<img src="/image/library/english/10233_photo.jpg" />
</body>
</html>
Figure 3-1. The image appears within the browser window.
Chapter 8, "Working with Color and Images Using CSS," you'll learn more advanced methods to control an image's presentation using CSS.