It's also considered good form to provide multiple types of multimedia to download because not all media types are usable on all platforms: Input Apollo Multimedia Archive Apollo
Trang 1It's also considered good form to provide multiple types of multimedia to download because not all media types are usable on all platforms:
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>Apollo Multimedia Archive </title>
</head>
<body>
<div align="center">
<h1>Apollo 17 Videos</h1>
<p>Astronauts placing the flag on the Moon</p>
<table border="0">
<tr>
<td rowspan="3"><img src="Apollo_17_Flag.gif" width="160"
height="120" alt="Apollo 17 flag"/></td>
<td><a href="Apollo_17_Flag.qt">QuickTime</a>[2.75Mb]</td>
</tr>
<tr>
<td><a href="Apollo_17_Flag.mpg">MPEG</a> [2.45Mb]</td>
</tr>
<tr>
<td><a href="Apollo_17_Flag.avi">AVI </a> [3.11Mb]</td>
</tr>
</table>
<br />
Trang 2<a href="http://www.apple.com/quicktime"><img
src="getquicktime4.gif" width="88" border="0" alt="Get QuickTime"
vspace="7" /></a><br />
<a href="http://microsoft.com/windows/mediaplayer/download/default.asp">
<img src="getmedia_white.gif" width="65" height="57" border="0"
alt="Get Windows Media Player" vspace="7" /></a>
</div>
</body>
</html>
Figure 11.2 shows the resulting web page
Output
Figure 11.2 When linking sound and video, provide multiple formats if
possible.
[View full size image]
Task: Exercise 11.1 Creating a Family History Multimedia Archive
Trang 3One 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="present.gif" height="150" width="200"
alt="Opening presents" /></td>
</tr>
<tr>
<td width="80">Mother holding child.</td>
<td><img src="with_baby.gif" height=""150 width="200"
alt="Mother and child" /></td>
Trang 4<tr>
<td width="80">House in the snow.</td>
<td><img src="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.
[View full size image]
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:
Trang 5
<tr>
<td width="80">Nephew opening a present.</td>
<td><a href="present_big.gif"><img src="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="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="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.
[View full size image]
Trang 6If 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="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="with_baby.gif" height=""150 width="200"
alt="Mother and child" /></a>
</td>
</tr>
<tr>
<td width="80">House in the snow [158k]</td>
Trang 7<td><a href="snowy_house_big.jpg">
<img src="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.
[View full size 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
Trang 8to 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="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="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="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.
[View full size image]
Trang 9Finally, 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="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="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
Trang 10Figure 11.7 The video section of our multimedia archive.
[View full size image]
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