HTML 4.0 Sourcebook:HTML and Document Design

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Linking to Other Data Types

You may also want to indicate the data type of the file; in Figure 2.8, for example, the text indicates that the linked image file is a GIF and that the linked movie is in MPEG format. Anchors can indicate links to anything—not just HTML documents or images. There are many different audio, movie, multimedia, and image formats, and most browsers are capable of displaying only a few of them. Therefore, it is a good idea to indicate the format of large data files, so that users can avoid accessing files they cannot view or use.

Figure 2.7 The HTML document vortex.html, showing links from image icons to full–size images and video sequences. Figure 2.8 shows the rendering of this document by the Mosaic for X–Windows browser.

<HTML>
<HEAD>
<TITLE>Simulated Vortex Dynamics in a Porous–Body Wake</TITLE>
</HEAD>
<BODY>
<H1>Simulated Vortex Dynamics in a Porous–Body Wake</H1>
<P>This video presents the result of a numerical simulation on the wake
generated by a porous body.  The wake flow is simulated by inserting
small–scale discrete vortices into a uniform stream,  and  the colors
in the video represent the magnitude of vorticity.   The initial flow
field is subjected to a small perturbation based on experimental data.
The evolution of the wake flow is  manifested  by the merging  and
interactions of the small–scale vortices.
<P>The objective of this investigation is to study the merging and
inter–action processes of vortices and the formation of large eddies in
the flow.  Such an investigation is of importance to many flow–related
industrial and environmental problems, such as mixing, cooling,
combustion and dispersion of air–borne or water–borne contaminants.<P>
<HR>
<B> <A HREF=“legend.gif”><IMG SRC=“legicon.gif” 
ALIGN=Bottom> Initial flow</A> and color legend for vorticity.</B>
(14.5 KB gif image)<p>
<HR>
<B> <A HREF=“flow.mpeg”><IMG SRC=“vortex.gif” ALT=“[movie icon]” 
ALIGN=Bottom> Visualization</A> of the evolution of the wake flow.</B>
(0.38 MB mpeg–1 movie)<p>
</BODY></HTML>

Helper Applications

So far our hypertext links have been to HTML documents or to HTML documents containing images via the IMG element. What happens if these links connect instead to other media, such as movies or sound files, or image files in special formats? Many Web browsers are not capable of displaying these data formats. So, what do they do?

Figure 2.8 Mosaic for X–Windows rendering of the document listed in Figure 2.7, showing thumbnail image icons linked to full–size image, movie, and sound files. The image overlaid on the browser (bottom left) resulted from clicking on the image icon at the top of the screen, while the movie–playing window (bottom right) was launched by pressing on the icon at the bottom of the screen.*

* This page and the associated images and movies are courtesy of Rudy Ziegler of the University of Toronto’s Centre for Academic Technology, while the data yielding the displayed image and movie frame were provided by Z. Huang, J. G. Kawall, and J. F. Keffer of the Department of Mechanical Engineering at the University of Toronto.

With hypertext anchors, the answer lies in so–called helper or viewer applications. These are programs on the user’s computer that can display images, movies, or sounds that cannot be handled by the browser itself. Thus, in Figure 2.8, the large–screen image was produced by clicking on the upper image icon in the browser window, which caused the browser to retrieve the data accessed by this link, acknowledge the data to be an image file, and launch the appropriate helper application to display the image (in this case, the UNIX image viewing program xv). In the case of the movie file, the browser recognized the data as an MPEG movie, so it started up the program mpeg_play to display the video information.

Downloaded Data and MIME Types

How does the browser know what a file contains, and what to do with it? Whenever data are retrieved from an HTTP server, the server, as part of the HTTP protocol, explicitly tells the browser the type of data being sent. It does this with a special message, sent to the browser just ahead of the actual data, called a MIME content–type header. The messages for GIF image files and MPEG movies, respectively, look like

Content–Type: image/gif 
Content–Type: video/mpeg

When the browser receives this information, and if the browser cannot itself display the data, it searches in its database of helper applications to find a program that matches the indicated MIME type. If it finds such a program, the browser passes the data to the program and lets the helper do its job.

If the data comes from an FTP server, or if the browser is accessing the file from the local machine and not from an HTTP server, then the browser has to guess at the data content. It does this from the filename extension. Each browser has a database that matches filename extensions to the appropriate MIME type and uses this database to determine the MIME types of files accessed locally or via FTP. In general, this database will map the .gif suffix to the image/gif MIME type, the suffixes .jpeg or .jpg to JPEG images, and the suffixes .mpeg, .mpg, or .mpe to the video/mpeg MIME type. These lists have to be updated if you add a new filename extension. With Macintosh and Microsoft Windows browsers, the lists can be edited from a pull–down menu.

There are literally dozens of MIME types for data ranging from still images, audio, and video to compressed archives and executable programs. A detailed description of MIME types is given on the companion Web site in Appendix B, while the usage of MIME types is discussed in detail in Chapter 9.

Lessons from Example 5

1. Warn users when you present a link to a large image document or file, so that they can estimate how long it will take to download the data.

2. Identify the data format in any links to large image, audio, movie, or data archive files so that the users can tell if the file is in a format they can actually use.

3. You can use icons to link to larger image or movie files. This lets the users know what to expect and is often a good graphical addition to your document.

Exercises for Example 5

While you are Web surfing, try and keep track of how long it takes for a file to arrive—if you have a watch, actually measure this time. You will no doubt grow frustrated after only a few seconds. Now imagine how users will feel if they decide to download one of your files only to discover that they will need to wait several minutes for the data to arrive and be displayed. . . .

Example 6: Internal Links Within a Document

Up until now, we have looked at hypertext links that either connect one document to another or connect a document to other data resources. When these links are accessed, the browser retrieves the linked object and displays it, starting at the top of the HTML document or the beginning of the data file.

With HTML documents, this is not always desired. Sometimes, a document is quite long, and you want to link to a particular point in the document and not the beginning. Alternatively, you may want to link between different places in the same document—for example, from a short list of sections to the beginning of each section or to the top of the page. This is possible with HTML, but requires the use of an additional feature of the anchor element—the NAME attribute.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.