| One of the common types of pages available on the Web is a media archive. A media archive is a web page that serves no purpose other than to provide quick access to images or other multimedia files for viewing and downloading. It seems like everybody who knows the first thing about publishing on the Web sets up a media archive when they have a child. People oftentimes have family members flung all over the country, and with minimal HTML skills and a digital camera, you can quickly set up an online photo album or multimedia archive that enables everyone to see the new bundle of joy. If you're one of those people who's always emailing out photos of the kids to a huge list of people, putting up a media archive might be a smart choice. (And if you want to keep strangers from peeking in, skip ahead to Lesson 19, "Taking Advantage of the Server," where I explain how to protect your web pages with a password.) By using inline images as thumbnails and splitting up sound and video files into small sample clips with larger files, you can create a multimedia archive on the Web that is far easy to use and enables users to download exactly what they want, without wasting time. In this exercise, you'll create a simple multimedia archive with several GIF and JPEG images, WAV sounds, and a mixture of MPEG and AVI video. Using your favorite image editor, you can create thumbnails of each of your pictures to represent them in the archive. First, start with the framework for the archive and then add a table for the thumbnail images, as follows: Input <!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"> <head> <title>Family Multimedia Archive</title> </head> <body> <div align="center"> <table border="0"> <tr> <td width="80"> <h2>Images</h2> </td> <td> <p>Select an image to view it in a larger size.</p> </td> </tr> <tr> <td width="80">Nephew opening a present.</td> <td><img src="/books/2/631/1/html/2/present.gif" height="150" width="200" alt="Opening presents" /></td> </tr> <tr> <td width="80">Mother holding child.</td> <td><img src="/books/2/631/1/html/2/with_baby.gif" height=""150 width="200" alt="Mother and child" /></td> </tr> <tr> <td width="80">House in the snow.</td> <td><img src="/books/2/631/1/html/2/snowy_house.gif" height="150" width="200" alt="House in the snow" /></td> </tr> </table> </div> </body> </html>
Figure 11.3 shows how the page looks so far. Output Figure 11.3. The web page with the image archive almost completed. 
The next step is to create the hyperlinks to each image that point to the larger file. Here's the HTML code that links to the images: Input ... <tr> <td width="80">Nephew opening a present.</td> <td><a href="present_big.gif"><img src="/books/2/631/1/html/2/present.gif" height="150" width="200" alt="Opening presents" /></a></td> </tr> <tr> <td width="80">Mother holding child.</td> <td><a href="with_baby_big.jpg"> <img src="/books/2/631/1/html/2/with_baby.gif" height=""150 width="200" alt="Mother and child" /></a></td> </tr> <tr> <td width="80">House in the snow.</td> <td><a href="snowy_house_big.jpg"> <img src="/books/2/631/1/html/2/snowy_house.gif" height="150" width="200" alt="House in the snow" /></a></td> </tr> ...
Figure 11.4 shows the result. Output Figure 11.4. The image now linked to larger images. 
If I leave the archive like this, it looks nice, but I'm breaking one of my own rules: I haven't noted how large each file is. Here, you have several choices for formatting, but the easiest is to simply add the file size after the description of each picture, as follows: Input <tr> <td width="80">Nephew opening a present. [105k]</td> <td><a href="present_big.gif"> <img src="/books/2/631/1/html/2/present.gif" height="150" width="200" alt="Opening presents" /></a> </td> </tr> <tr> <td width="80">Mother holding child. [211k]</td> <td><a href="with_baby_big.jpg"> <img src="/books/2/631/1/html/2/with_baby.gif" height=""150 width="200" alt="Mother and child" /></a> </td> </tr> <tr> <td width="80">House in the snow. [158k]</td> <td><a href="snowy_house_big.jpg"> <img src="/books/2/631/1/html/2/snowy_house.gif" height="150" width="200" alt="House in the snow" /></a> </td> </tr>
Figure 11.5 shows this result. Output Figure 11.5. Adding file sizes to the description of each image enables people to determine how long it will take to load the image. 
Now, let's move on to the sound and video sections. There are two approaches to formatting these sections. You can add the material in the same table that contains the images or you can create two new tableseither way is fine. For this exercise, you're going to create new tables that are virtually identical to the table that held the images. Start by adding three sound and two video files. Because the sound files can't be reduced to a simple thumbnail image, you should provide a good description. With video files, you can often use your video player to copy one frame of the clip and provide that as a thumbnail. I've included icons with the links to the sound files. Following is the code for the sound portion of your archive: Input <div align="center"> <table border="0" summary="Sound files for download."> <tr> <td> <h2>Sound Bites</h2> </td> <td> <p>Select a sound bite to download or listen to it.</p> </td> </tr> <tr> <td>An oral family history describing how we survived the tornado of 1903. [1192k]</td> <td><a href="tornado.wav"><img src="/books/2/631/1/html/2/audio.jpg" alt="download tornado.wav"></a></td> </tr> <tr> <td>Don describing his first job. [1004k]</td> <td><a href="donjob.wav"><img src="/books/2/631/1/html/2/audio.jpg" alt="download donjob.wav"></a></td> </tr> <tr> <td>Grandma Jo telling how she came to America. [2459k]</td> <td><a href="jo.wav"><img src="/books/2/631/1/html/2/audio.jpg" alt="download jo.wav"></a></td> </tr> </table> </div>
Figure 11.6 shows how the linked sounds look on the web page. Output Figure 11.6. Linked sound files in a family history archive. 
Finally, add the video clip section just as you have for the previous two. It's getting easier! Input <div align="center"> <table border="0"> <tr> <td width="100"> <h2>Video Clips</h2> </td> <td> <p>Select a video clip to download it.</p> </td> </tr> <tr> <td width="100">A video of a Christmas gathering. [2492k]</td> <td><a href="presents.mpeg"><img src="/books/2/631/1/html/2/present.gif" height="150" width="200" alt="Opening presents" /></a></td> </tr> <tr> <td width="100">Massachussetts in winter. [3614k]</td> <td><a href="winter.mpeg"><img src="/books/2/631/1/html/2/snowy_house.gif" height="120" width="180" alt="Winter snow" /></a></td> </tr> </table> </div>
Figure 11.7 shows how the linked videos with thumbnails look on the web page. Output Figure 11.7. The video section of our multimedia archive. 
Your multimedia archive is finished. Creating one is simple with the combination of inline images and external files. With the use of the alt attribute, you can even use it reasonably well in text-only browsers. | 
