Learning Web Design, 3rd Edition

CHAPTER 7 ADDING IMAGES

IN THIS CHAPTER

Adding images to a web page

Using the src, alt, width, and height attributes

Creating an imagemap

A web page with all text and no pictures isn’t much fun. The Web’s explosion into mass popularity is due in part to the fact that there are images on the page. Before the Web, the Internet was a text-only tundra.

Images appear on web pages in two ways: as part of the inline content or as tiling background images. Background images are added using Cascading Style Sheets and are talked about at length in Chapter 13, Colors and Backgrounds. In this chapter, we’ll focus on adding image content to the document using the inline img element.

Inline images may be used on web pages in several ways:

As a simple image.  An image can be used on a web page much as it is used in print, as a static image that adds information, such as a company logo or an illustration.

As a link.  As we saw in the previous chapter, an image can be used as a link to another document by placing it in the anchor element.

As an imagemap.  An imagemap is a single image that contains multiple links (“hotspots”) that link to other documents. We’ll look at the markup used to add clickable areas to images in this chapter as well.

With the emergence of standards-driven design and its mission to keep all matters of presentation out of the document structure, there has been a shift away from using inline images for purely decorative purposes. See the sidebar, Decorative Images Move on ...