Beginning HTML, XHTML, CSS, and JavaScript®

Chapter 3. Images, Audio, and Video

In this chapter, you'll learn how to add images, animations, audio, and video to your site. This should start to breathe some life into the pages we've been creating so far.

You will start by learning how to add images to your documents using the <img> element. You also learn how to make an image a link, and even how to divide an image up into sections so that different parts of the image link to different pages — this is known as an image map.

Then we'll take a look at some of the main image formats that are used on the Web (JPEG, GIF, and PNG) and learn which image format to use for different types of images. This is very important because it can greatly affect the speed with which your web pages load (and as we all know, slow web sites frustrate users).

Once we have finished with images, we'll go on to look at how to add some more multimedia content to your site in the form of Flash, video, and audio. In doing so, we will meet the <object>, <param>, and <embed> elements. As you will see, Flash is used to embed more video and audio into web pages than any other technology.

By the end of the chapter, your pages should be looking a lot more exciting.

Adding Images Using the <img> Element

Images are added to a site using the <img> element, which has to carry at least two attributes: the src attribute, indicating the source of the image, and an alt attribute, which provides a description of the image.

For example, the following line would add the image ...