How to Add Images, Media, and Scripts to Your Web Site
This chapter is from the book
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.
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.
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.
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>Chapter 3</title>
</head>
<body>
<img src="images/photo.jpg" />
</body>
</html>
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