The Old Standby: Linking


The sure-fire way to include multimedia files on your website is to provide a hyperlink to them. Hyperlinks are supported by all versions of all browsers. The browser will handle the file appropriately if the right supporting applications are installed, or users will be able to decide for themselves what they want to do with the file. A common technique is to link to the multimedia file and provide a thumbnail preview of the multimedia clip, a description, and the file size. This is considered common courtesy so that people can estimate the download time. You also should provide links to any players required so that people can download the appropriate player, should they need it.

For example, if I have a QuickTime video that I want to share, I might use the following code:

Input

<div align="center"> <h1>Apollo 17 Videos</h1> <p><a href="Apollo_17_Flag.qt">Astronauts placing the flag on the Moon</a><br />  [2.75Mb]</p> <p><img src="/books/2/631/1/html/2/Apollo_17_Flag.gif" width="160" height="120" alt="Apollo 17 flag" /></p> <p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is required to view this movie. <a href="http://www.apple.com/quicktime"><img src="/books/2/631/1/html/2/getquicktime4.gif" border="0" width="88" alt="Get QuickTime 4" /></a></p> </div>


Figure 11.1 shows the resulting web page.

Output

Figure 11.1. Linking to files is easy and effective.


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

<!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="/books/2/631/1/html/2/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 /> <a href="http://www.apple.com/quicktime"><img src="/books/2/631/1/html/2/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="/books/2/631/1/html/2/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.


Task: Exercise 11.1. Creating a Family History Multimedia Archive

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.




Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net