Images, media, and scripts can really add spice to your Web site and give it a functionality otherwise missing. Find out how and when to add these elements to your Web site to provide that extra flair.

This chapter is from the book

This chapter is from the book

Images, media, and scripting help a site become "dynamic and rich." This is called dynamic because many of these features offer the opportunity for the site visitor to interact in an active way with the site. It's rich because the site becomes richer visually and in terms of content. Images in this chapter refers specifically to images you'll be adding to your page as part of the design itself or as a means of enhancing the content, such as with photos. Images must be processed in a specific way for the Web, using a good image editor; you can quickly learn the details.

Web graphics can be created by a wide range of programs, but typically you're going to want to have a decent image editor, such as Photoshop (if your wallet is a little smaller, you can try Jasc's Paint Shop Pro). There are numerous other web graphic programs; you can find them by searching for "web graphics software" at your favorite search engine.

Two primary types of web graphic formats exist: GIF and JPEG. The GIF file format is best for images with few, flat colors and line drawings; JPEGs are best for images with many colors and color gradients, such as photos. A third type of web graphic format is PNG, but the lack of support for PNG in some browsers makes it a less stable choice.

Multimedia on the Web can refer to a number of things, including animated GIFs, Flash animations, audio, video, and Java applets. Scripts in this chapter refers to JavaScript and DHTML effects that you can add to your documents, creating a richer user experience.

Although images, media, and scripting can bring more options to your site, they also can add unnecessary clutter and download time. I like to think of most content of this nature to be decorative. Just as you wouldn't want to overdecorate a house, think about how less can be more when it comes to your page.

The img Element

When working with images, the element you'll be using is img. This is an empty element—in 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.

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).