This article presents the techniques for adding graphics, sounds, and video elements to your Web pages. You find out how to add images and image maps to your Web pages, link and embed sound and video files, and use a background sound that plays when your Web page displays.

File Formats for Image, Sound, and Video

You can choose from many different file formats for images, sounds, and videos. Fortunately, you can construct most Web pages using only the formats that we describe in the following sections.

Image file formats

Although dozens of different image file formats exist, only two are widely used for Web page images: GIF and JPEG. GIF images: GIF, which stands for Graphics Interchange Format, was originally used on the CompuServe online network and is now widely used throughout the Internet. GIF image files have the following characteristics:

 -  GIF images can have a maximum of 256 different colors.  

-  GIF files are compressed to reduce their size. The compression method GIF uses doesn’t reduce the image quality.

 -  A GIF image can include a transparent color, which, when displayed in a Web browser, allows the background of the Web page to show through.

 -  GIF images can be interlaced, which allows the Web browser to quickly display a crude version of the image and then display progressively better versions of the image.  

-  GIF supports a simple animation technique that enables you to store several distinct images in the same file. The Web browser displays the animation by displaying the images one after the other in sequence. The GIF format is the best choice for most Web graphics that were created with drawing or paint programs and that do not contain a large number of different colors. It is ideal for icons, buttons, background textures, bullets, rules, and line art. A format called PNG (Portable Network Graphics) was developed in 1995 as a successor to the GIF format. PNG (pronounced ping) supports all the features of GIF and then some, and supports more colors than GIF. PNG hasn’t really caught on, though, so GIF remains the most widely used image format.

JPEG images: JPEG, a format developed by the Joint Photographic Experts Group, is designed for photographic-quality images. It has the following characteristics:  

-  JPEG images can have either 16.7 million or 2 billion colors. Most JPEG images use 16.7 million colors, which provide excellent representation of photographic images.  

-  To reduce image size, JPEG uses a special compression technique that slightly reduces the quality of the image while greatly reducing its size. In most cases, you have to carefully compare the original uncompressed image with the compressed image to see the difference.

 -  JPEG supports progressive images that are similar to GIF interlaced images.

 -  JPEG doesn’t support transparent background colors as GIF does.

 -  JPEG doesn’t support animation.

Other image file formats: Many other image file formats exist. Here are just a few:

-  BMP: Windows bitmap

-  PCX: Another bitmap format

-  TIF: Tagged Image File

-  PIC: Macintosh picture file

Sound file formats

Following are the most commonly used sound file formats:

-  WAV: The Windows standard for sound recordings. WAV stands for Wave.

-  SND: The Macintosh standard for sound recordings. SND stands for Sound.

-  AU: The Unix standard for sound recordings. AU stands for Audio.

-  MID: MIDI files, which aren’t actually sound recordings. MIDI files are music stored in a form that a sound card’s synthesizer can play. MIDI stands for Musical Instrument Digital Interface. Don’t confuse sound files with sound you can listen to in real time over the Internet, known as streaming audio. The most popular format for streaming audio is RealAudio. RealAudio enables you to listen to a sound as it is being downloaded to your computer, so you don’t have to wait for the entire file to be downloaded before you can listen to it. To listen to RealAudio sound, you must first install a RealAudio player in your Web browser. (You can download it from www.real.com.)

Video file formats

Three popular formats for video clips are used on the Web:

-  AVI: The Windows video standard. AVI stands for Audio Video Interleaved.

-  QuickTime: The Macintosh video standard. QuickTime files usually have the extension MOV.

-  MPEG or MP3: An independent standard. MPEG stands for Motion Picture Experts Group. MP3 is short for MPEG level 3, an adaptation of MPEG used to send music files over the Net. Although AVI is known as a Windows video format and QuickTime is a Macintosh format, both formats as well as MPEG and MP3 have become cross-platform standards. Both Netscape Navigator and Microsoft Internet Explorer can play AVI, QuickTime, and MPEG videos.

Working with Graphics

You’ve decided which graphics to include on your Web pages, so what’s next? This section shows you how to insert your graphics files and how to use image maps. First, here are some guidelines for using images:

 -  Don’t add so many images or such large images that your page takes too long to download.

 -  Use the ALT attribute with the <IMG> tag to provide text for users who view your page with images turned off. For example:

   <IMG  SRC=”chicken.gif” ALT=”Picture of a chicken”>

 -  Use the HEIGHT and WIDTH attributes with the <IMG> tag to preformat your pages for the correct image dimensions.

   <IMG  SRC=”chicken.gif” HEIGHT=”100” WIDTH=”50”>

 -  Use BORDER=”0” in the <IMG> tag to eliminate the border that appears around your images (unless you want the borders to appear), like this:

   <IMG  SRC=”chicken.gif” BORDER=”0”>

 -  Use transparent GIFs to create images that blend seamlessly with your page background. (See the sidebar, “Using transparent GIF images,” later in this article.)  -  If you want to make large image files available for download on your Web site, provide smaller, thumbnail versions of the images that people can preview before deciding whether to download the full-size image.  -  Keep in mind that many of the images you see displayed on the Web are copyrighted materials that you can’t simply copy and use on your own Web site without permission from the copyright holder. Similarly, photographs, artwork, and other images that appear in magazines and books are copyrighted. You can’t legally scan copyrighted images and post them on your Web site without the copyright owner’s permission.

Inserting a graphic

To insert an image on a Web page, follow these steps:

1. Obtain an image file that you want to include on your page. If necessary, use a graphics program to convert the file to the format that you want to use (probably GIF or JPEG). Store the image file in the same directory as the HTML document that displays the image. Alternatively, you may prefer to store all images for your Web site together in a separate Images folder.

2. In the HTML file, add the <IMG> tag at the point in the document where you want the image to appear. Use the SRC (source) attribute to provide the name of the image file. For example:

   <IMG  SRC=”image1.gif”>
 

3. (Optional) To remove the border around the image, add a BORDER attribute, as follows:

   <IMG SRC=”image1.gif”  BORDER=”0”>
 

4. (Optional) To provide text that will be displayed for users who have turned off graphics in their Web browsers, use an ALT attribute:

   <IMG SRC=”image1.gif”  BORDER=”0” ALT=”Mountains”>
 

5. (Optional) To preformat the Web page with the correct dimensions of the image, use the HEIGHT and WIDTH attributes, as follows:

   <IMG SRC=”image1.gif”  BORDER=”0” ALT=”Mountains”
   HEIGHT=”200”  WIDTH=”100”>

Using image maps

An image map is a graphic in which specific regions of the graphic serve as links to other Web pages. For example, if you’re creating a Web site about The Wizard of Oz, you can use an image map showing the characters to link to pages about these characters. To create an image map, you must use several HTML tags: <MAP> and its companion </MAP>, <AREA>, and <IMG>. To create an image map, follow these steps:

1. Find or create a graphic that can serve as an image map. The image should have distinct regions that will serve as the map’s links.

2. Use a graphics program to display the image; then determine the rectangular boundaries.

3. Type a set of <MAP> and </MAP> tags. In the <MAP> tag, use the NAME attribute to provide a name for the image map, like this:

   <MAP  NAME=”IMGMAP1”>
   </MAP>
 

4. Between the <MAP> and </MAP> tags, type an <AREA> tag for each rectangular area of the image that will serve as a link. In the <AREA> tag, include the following attributes:

   SHAPE=”RECT”
   COORDS=”start left,  start top, end x from left, end x
   from top”
   HREF=”url”
    For  example:
 <MAP  NAME=”IMGMAP1”>
 <AREA SHAPE=”RECT”  COORDS=”0,40,39,79”
 HREF=”egg.html”>
 <AREA SHAPE=”RECT”  COORDS=”40,0,109,79”
 HREF=”chick.html”>
 </MAP>
 

5. Type an <IMG> tag. Use the SRC attribute to name the image file and the USEMAP attribute to provide the name of the image map listed in the <MAP> attribute, like this:

   <IMG  SRC=”chickegg.gif” USEMAP=”#imgmap1”>

Be sure to type a number sign (#) before the image map name in the <IMG> tag’s USEMAP attribute. But don’t use the # symbol when you create the name in the <MAP> tag’s NAME attribute. Putting it all together, here is a complete HTML document to set up an image map:

   <BODY>
   <H1>Which came  first?</H1>
   <MAP NAME=”IMGMAP1”>
   <AREA SHAPE=”RECT”  COORDS=”0,40,39,79” HREF=”egg.html”>
   <AREA SHAPE=”RECT”  COORDS=”40,0,109,79”
   HREF=”chick.html”>
   </MAP>
   <IMG  SRC=”chickegg.gif” USEMAP=”#imgmap1”>

Use the TITLE attribute in the <AREA> tags to create ToolTips that are displayed when the user pauses the mouse pointer briefly over an image map area. For example:

   <AREA SHAPE=”RECT”  COORDS=”0,40,39,79” HREF=”egg.html”
   TITLE=”The Egg”>
   <AREA SHAPE=”RECT”  COORDS=”40,0,109,79” HREF=”chick.html”
   TITLE=”The Chicken”>

Remember that some people configure their browsers so that they don’t download and display images. Whenever you use an image map, be sure to also provide text links as an alternative to the image map. Otherwise, users who visit your page with images turned off won’t be able to navigate your site.

Adding Sounds

You can insert a sound file on a Web page as a link, as an embedded sound, or as a part of the page’s background (so that the sound is played automatically whenever the page is displayed). The following sections show you how to use the HTML tags necessary for each method.

Inserting a link to a sound file

The advantage of linking to a sound file is that the sound file is not downloaded to the user’s computer until the user clicks the sound file link. To insert a link to a sound file, follow these steps:

1. Obtain a sound file that you want to link to your Web site and place the sound file in the same directory as the HTML document that will contain the link. Alternatively, you may prefer to store all sound files for your Web site in their own folder.

2. Add an <A> tag, some descriptive text, and an </A> tag to the HTML file as follows:

   <A  HREF=”sound.wav”>Click here to play the sound.</A>

Be sure to type the name of your sound file in the HREF attribute.

Embedding a sound file

You can embed a sound on a Web page by using an <EMBED> tag:

   <EMBED  SRC=”sound.wav”>

The SRC attribute provides the name of the sound file. The Web browser displays the sound controls necessary to enable the user to play the sound.

Using background sounds

A background sound is played automatically whenever a user displays your Web page. To add a background sound to a page, follow these steps:

1. Obtain a sound file that you want to use as a background sound and place the sound file in the same directory as the HTML file.

2. Add a <BGSOUND> attribute following the <BODY> tag. Use the SRC attribute to name the sound file that you want to be played:

   <BODY>
   <BGSOUND  SRC=”music.mid”>
 

3. If you want the sound to repeat several times, add the LOOP attribute like this:

   <BGSOUND  SRC=”music.mid” LOOP=”3”>

You can type any number in the LOOP attribute to indicate how many times the sound should be repeated. Or you can type LOOP=”INFINITE” to play the sound repeatedly as long as the page is displayed. Some people would rather listen to fingernails dragged across a chalkboard than annoying background sounds that play over and over again. If you want people to visit your site more than once, avoid using LOOP=”INFINITE”.

Working with Videos

You can insert a video file on a Web page as a link or as an embedded object. The following sections show you each method.

Inserting a link to a video file

To insert a link to a video file, follow these steps:

1. Locate a video file that you want to add a link to on your Web page.

2. Add an <A> tag, some descriptive text, and an </A> tag to the HTML file as follows:

   <A  HREF=”movie.avi”>Click here to download a movie.</A>

Provide the name of the video file in the <A> tag’s HREF attribute. When the user clicks the link, the Web browser downloads the file and plays the video.

Embedding a video

Use the <EMBED> tag to embed a video on a Web page. Follow these steps:

1. Locate a video file that you want to embed on a Web page.

2. In the HTML document for the Web page, add an <EMBED> tag specifying the name of the video file in the SRC attribute, like this:

   <EMBED  SRC=”movie.avi”>
 

3. If you want to change the size of the area used to display the video, add the HEIGHT and WIDTH attributes, like this:

   <EMBED  SRC=”movie.avi” HEIGHT=”200” WIDTH=”200”>
 

4. If you want the video to play automatically as soon as it finishes downloading, add AUTOSTART=”TRUE” to the <EMBED> tag:

   <EMBED  SRC=”movie.avi” AUTOSTART=”TRUE”>