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

In some cases, you might want to make the entire document collection available as an archive. Then, users who make extensive use of the documents can copy down the entire HTML collection and install it on their own machines, reducing the load on your server and increasing the speed with which they can access the material. If you are using a PC, you might make such an archive using the programs PKZIP or WinZip. This lets you archive multiple files and directories in a single compressed file, usually with the filename extension .zip. For example, you could archive all the files from a collection in a file named alldocs.zip. On Macintoshes, the StuffIt program serves a similar function: StuffIt creates archive files with the filename extension .sit. UNIX users will use a program called tar (for tape archiver), which could yield the archive file alldocs.tar. UNIX also has two programs for compressing programs: compress, which places a .Z at the end of the compressed filename, and gzip, which places a .z or .gz at the end of the compressed filename. This would yield the compressed archive files alldocs.tar.Z (using compress) or alldocs.tar.gz (using gzip), sometimes shortened to alldocs.tgz. If you were generous in preparing archives for multiple platforms, you might prepare a document section pointing to these files. An example of such a document is shown in Figures 2.5 and 2.6.

Most HTTP servers let you restrict access to certain files or directories on the server. You can then choose to control access to archives, should there be copyright problems associated with the archive content.

Figure 2.5 Example HTML document src_link.html that contains links to alternative formats of a document collection. Clicking on the items retrieves the archives to the client’s machine.

<HTML>
<HEAD><TITLE> Archives of this Documentation </TITLE></HEAD>
<BODY>
<H2> Document Archives </H2>
<p> Archives of the document collection are available in the following
formats:
<OL>
<LI><A HREF=“alldocs.zip”>alldocs.zip</A>   (138 Kbytes) –– <EM> DOS PKZIP  </EM>
<LI><A HREF=“alldocs.sit”>alldocs.sit</A>   (532 Kbytes) –– <EM> Macintosh
     Stuffit</EM>
<LI><A HREF=“alldocs.tar”>alldocs.tar</A>   (527 Kbytes) –– <EM> UNIX tar </EM>
<LI><A HREF=“alldocs.tar.Z”>alldocs.tar.Z</A> (133 Kbytes) –– <EM> UNIX tar
    (compressed)</EM>
<LI><A HREF=“alldocs.tar.z”>alldocs.tar.z</A> (104 Kbytes) –– <EM> UNIX tar
    (gnuzipped) </EM>
<LI><A HREF=“alldocs.html”>alldocs.html </A> (523 Kbytes) –– <EM> Concatenated
     HTML documents </EM>
     <UL>
       <LI><EM>This is a concatenation of the HTML documents, suitable for
           printing from a browser. The Hypertext links have been removed.</EM>
     </UL>
</OL>
<HR NOSHADE>

Figure 2.6 Rendering of the HTML document src_link.html (shown in Figure 2.5) by the Internet Explorer 3 browser.

<B>Last Update:</B> <EM>12 July 1996</EM> ––
&lt;<A HREF=“mailto:prof.plum@clue.com”>prof.plum@clue.com</a>&gt;
</BODY></HTML>

Nesting of List Elements

As a final HTML aside, note that Figure 2.6 illustrates how different types of lists can be nested. Here, an unordered list element (UL) is nested inside an ordered list (OL):

<OL>
    <LI><A HREF=“alldocs.zip”>.........
     .
     .
   <LI><A HREF=“alldocs.html”>alldocs.html</A> (523 Kbytes) .....
         Concatenated HTML documents </EM>
   <UL>
      <LI>(This is a concatenation of the .....
   </UL>
</OL>

The browser does exactly what you would expect, and simply nests one list inside the other. In HTML, any type of list can be nested within another list. Recall, however, that you cannot put lists inside headings or headings inside lists.

Lessons from Example 4

1. PRE surrounds blocks of preformatted text: This is displayed with a fixed–width font and preserves the spaces, tabs, and line breaks of the actual text. Text emphasis and anchor elements are allowed inside PRE; other elements, such as Hn and IMG, are not permitted.

2. BLOCKQUOTE is for block quotations, and usually displayed by browsers with indented margins. This element is often used to produce indented text.

3. Collections of documents should have a consistent design to make them easy to navigate. Where appropriate, you should create a hypertext table of contents. There are programs available that can help you do this, some of which are discussed in “Web Management and Maintenance Tools” on the companion Web site.

4. Use navigation icons (or text keywords instead of pictures) as hypertext links to help the user navigate through the document collection. However, if you use icons, make sure that you provide a text–only navigation option (use that ALT attribute!) for users with nongraphical browsers.

5. Single HTML documents should be small and self–contained. Larger documents should be broken up into smaller documents to best take advantage of the hypertext facilities.

6. Sometimes it is desirable to have a flat, printable text version of a collection. You can concatenate your HTML files together to make such a document and create a hypertext link from your collection to this document. But, be sure to include information about the size of this file (if it is large) so that the user knows what to expect.

Exercises for Example 4

There are several examples of book–like document collections—have a look at them, and see how they compare with the model described here. Some examples are:

www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html info.med.yale.edu/caim/manual/

Navigation icons are found in almost all document collections, not just book–like ones. Look for them the next time you are on the Web and note how their presence makes it easy to navigate within the collection.

Example 5: Linking to Data—Images, Movies, and Audio

As mentioned earlier, Web browsers can only display certain image formats and sometimes restrict GIF images to fewer than 50 or so displayed colors per image. Further, small images are advantageous, since large images can take a long time to download and are often irritating for that reason alone.

However, sometimes these image format restrictions are unreasonable. Often you need to include a large image that is an important part of your material—for example, a still from a movie (for a film publicity site), or a campus map that can be clicked on to access information about various campus buildings. For both of these cases, a tiny image is unacceptable. Furthermore, you may have truly high–quality GIF images containing 256 colors, or perhaps non–GIF format images, and want to make them available for viewing. Perhaps you even have movie or sound files. How can these options be included in a document and presented to your clients?

Large Images—Small Files

If you need a large image on a main page, the key is to make the image file small. Remember that GIF and JPEG store images in a compressed format and as a result, you can often process an image so that the file is small, even if the image itself is very large. Chapter 3 discusses these and other issues associated with processing images for use on the Web.

Linking to Large Images

If you have secondary pages containing large image files, the key to good design is simply to warn the user of what to expect and to place this warning near the hypertext anchors pointing to these secondary pages. This gives the user several options: accessing the page as is; disabling image loading when accessing the page; or not accessing the document altogether.

Thumbnail Sketches

A thumbnail sketch is a particularly useful way of linking to a large image. A thumbnail is just a reduced size icon of the actual image or of some characteristic portion of the image. Thumbnails are easy to make with any commercial or public–domain image editing program. You can then include the thumbnail in your document, and make a hypertext link from the thumbnail to the document containing the large image. This is done in Figure 2.7, where the small images are links to larger images or to movie files. In this example, the thumbnail of the larger GIF image is only 1,500 bytes in size, one–tenth the size of the original file. Note that sizes of the linked documents are also given—these are big files! Extra information such as this is useful to readers, as it lets them know what to expect.

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.