• Choose a category
• All
• Classic-Fiction

♦ They don’t preview the image. The user has only the text description to figure out what the picture might be.

♦ They interrupt the flow. If the page contains a series of images, the user has to keep leaving the page to view images.

♦ The user must back up to return to the main page. The image looks like a Web page, but it isn’t. No link or other explanatory text in the image indicates how to get back to the Web page. Most users know to click the browser’s Back button, but don’t assume all users know what to do.

Adding inline images using the tag

The alternative to providing links to images is to embed your images into the page. Figure 6-3 displays an example of this technique.

The code shows how this image was included into the page:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

The Susan B. Constant

height = “480“

width = “640“

alt = “Susan B. Constant“ />

The Susan B. Constant was flagship of the

fleet of three small ships that brought settlers to Jamestown, the first

successful English Colony in the new world. This is a replica housed

near Jamestown, Virginia.

The image (img) tag is the star of this page. This tag allows you to grab an image file and incorporate it into the page directly. The image tag is a one-shot tag. It doesn’t end with . Instead, use the /> characters at the end of the img definition to indicate that this tag doesn’t have content.

You might have noticed that I italicized Susan B. Constant in the page, and I used the tag to get this effect. stands for emphasis, and means strong emphasis. By default, any text within an pair is italicized, and text is boldfaced. Of course, you can change this behavior with CSS.

Figure 6-3: The ship image is embedded into the page.

The image tag has a number of important attributes, which I discuss in the following sections.

src (source)

The src attribute allows you to indicate the URL (Uniform Resource Locator) of the image. This can be an absolute or relative reference. Linking to an image in your own directory structure is generally best because you can’t be sure an external image will still be there when the user gets to the page. (For more on reference types, turn to Chapter 5 of this minibook.)

height and width

The height and width attributes are used to indicate the size of the image. The browser uses this information to indicate how much space to reserve on the page.

Using height and width attributes to change the size of an image on a Web page is tempting, but it’s a bad idea. Change the image size with your image editor (I show you how later in this chapter). If you use the height and width attributes, the user has to wait for the full image, even if she’ll see a smaller version. Don’t make the user wait for information she won’t see. If you use these attributes to make the image larger than its default size, the resulting image has poor resolution. Find the image’s actual size by looking at it in your image tool and use these values. If you leave out height and width, the browser determines the size automatically, but you aren’t guaranteed to see the text until all the images have downloaded. Adding these attributes lets the browser format the page without waiting for the images.

alt (alternate text)

The alt attribute gives you an opportunity to specify alternate text describing the image. Alternate text information is used when the user has images turned off and by screen-readers. Internet Explorer (IE) automatically creates a ToolTip (floating text) based on the alternate text.

You can actually add a floating ToolTip to any element using the title attribute. This