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

Chapter 2
HTML and Document Design

Chapter 1 introduced the philosophy and design behind the HTML language. It also included example documents to illustrate the basic markup elements, such as headings, lists, character highlighting, images, horizontal rule dividers, and—most important—hypertext anchors. In this chapter, we look again at these elements, focusing on advanced features and document design issues. We also introduce the other important HTML elements—such as BLOCKQUOTE, OL (ordered list), FORM, and TABLE elements—that significantly enrich the vocabulary of HTML document authors.

The examples are designed to illustrate the proper use of these elements and to point out some common mistakes. Since most browsers do not check for incorrect HTML, it is easy to write badly formed HTML documents that look fine on one browser, but awful on another—document authors need to be careful to avoid this problem. In addition, these examples reflect design issues that are important when creating a page. For example, what are the best ways to include hypertext anchors or image files? Although there are no universal strategies, these examples help illustrate the characteristics and limitations of the Web, thereby showing why some design choices are often better than others.

This chapter is designed as a tutorial in HTML design, so the examples are relatively simple. Chapter 5 presents a discussion of Web site implementation and planning and includes several examples of page design that make use of more advanced aspects of HTML coding. In addition, Chapters 6 and 7, which provide detailed specifications for all HTML elements, also present advanced HTML coding examples.

Example 4: Linear Hypertext—PRE and BLOCKQUOTE

This example, illustrated in Figures 2.1 through 2.6, looks at a hypertext collection of text–based documents. One common use of HTML is to prepare on–line documentation or on–line collections of reference materials. These can be very large collections of documents, not only with some overall hierarchical structure (such as sections and subsections), but also with many hypertext links cross–linking these documents and linking them to other resources on the Internet. Frequently, the root structure of these documents is linear, reflecting their origins as a printed manual or their logical presentation as a readable, linear collection. This is not necessarily a bad thing—after all, books are a very successful form of communication. Furthermore, while hypertext allows for nonlinear representations of information, this does not mean that a nonlinear model is always more appropriate! Linear models may be the best match for user needs.

The PRE Element

Figures 2.1 and 2.2 introduce the PRE element. This element contains preformatted text for presentation as is, preserving the space characters and carriage returns typed into the HTML document and displaying the characters using a fixed–width typewriter font. You can use PRE to display computer codes, text examples, or verbatim text sequences. This is also one way you can create tables for display in an HTML document, since this element preserves the horizontal whitespaces needed to align columns.

You can include character emphasis within a PRE, and thus you can use STRONG and EM to emphasize text. You can also include hypertext anchors. Note that tags do not add width to the text, so you can use them to add highlighting or hypertext anchors without changing the vertical alignment of the text. The usefulness of the PRE element in this context is illustrated in Figures 6.15 and 6.16 (Chapter 6), where PRE is used to display both program code and a small table.

Anchors and text highlighting elements are the only HTML elements allowed within a PRE; other elements, such as IMG, P, heading elements, list elements, BLOCKQUOTE (for quotations), or ADDRESS elements, are prohibited.

The BLOCKQUOTE Element

Figures 2.1 and 2.2, as well as Figures 2.13 and 2.14, illustrate another element, BLOCKQUOTE. This element denotes block quotations, such as an extract from a book, or a speech. Since blockquoted text is often indented by browsers, Web authors often use this element to indent text (as done in the examples). This is not the true intent of BLOCKQUOTE—but it does work, and it is one of the few ways you can currently create indented sections. In the long run, the new cascading style sheets (CSS) language is the better way for applying indentation or other styles to paragraphs or other blocks of text. Style sheets are discussed in Chapter 7.

Document Collections: Some Design Issues

The design of document collections is discussed in more detail in the next chapter. However, some major points are apparent in this example, so it makes sense to discuss them here.

Each document should be small. Each document should display no more than two or three screens full of data. The advantage of the hypertext model lies in the linking of various components of the document web. This advantage is often lost if you are viewing a single, huge document containing hundreds or thousands of lines of displayed text. Although you can build hypertext links within a document to other points inside the same document, this is generally more difficult to navigate than a collection of smaller files.

Each document should have navigation tools. These are simply hypertext links that connect the document to other documents in the hierarchy and to general navigation points within the collection. Thus, each page should have links to next and previous documents (if there is an obvious order to the pages) and to a table of contents or the section heading. If the document is big, say more than two or three screens full of text, then it might be a good idea to place the navigation icons at both the top and bottom of the document to make them easier to find.

Every document should use a consistent presentation style. The documents should be consistently designed, with the same heading structure, the same navigation icons, and similar content outlines. This makes it easy to get the feel for the collection and also makes it possible to index or catalog the collection using programs that take advantage of this structure.

Artistic license is, of course, encouraged! But these general guidelines will help to make your work more pleasing and easier to use.

Figure 2.2 (the HTML listing is in Figure 2.1) shows an example HTML document from a large collection of related files. This particular example is one of approximately 80 documents that discuss various aspects of the HTML language. This collection of documents can be accessed at:

www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html