HTML 4.0 Sourcebook:Introduction to the HyperText Markup Language

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

Exercises for Example 2

As a first exercise, disable image loading on your browser and then access Web pages containing lots of images. If possible, do this from sites where you have a slow connection. Note how confusing sites can be when the designers do not bother with ALT attributes, and how slowly the page appears if the author did not include HEIGHT and WIDTH attributes on the IMG elements.

For the second exercise, create some hypertext-linked HTML files using partial URLs to link the pages together. Create these files on your personal computer’s hard disk—your browser can access these files directly from the disk, without the need for a Web server. You can do this via the “File Open” tool, usually located below the “File” menu. Note that this means that you can create and test Web pages on any computer, without using a Web serveror even having an Internet connection.

Once you are satisfied with your pages, they can be copied onto a machine running an HTTP server, and from there make them accessible via the Web. And, because they were entered as partial URLs, the hypertext links will still work on the Web server—the files are still “next to” each other, even if they are on a different machine.

Example 3: Home Pages—Headings, ADDRESS, and Anchors

This example, illustrated in Figures 1.15 through 1.19, looks again at the A (anchor) and heading elements and introduces the ADDRESS (address information) element, all in the context of a practical document design problem, namely the construction of a document collection home page. A home page is designed to be the first document seen by visitors to a site and serves as the introduction for guests. It is most often used to direct people to other interesting resources at the site, and to provide an overview of the site content. This particular example is based on a page constructed for the Instructional and Research Computing Group at the University of Toronto. Figures 1.15 and 1.16 illustrate bad design features (don’t imitate this page!), while Figures 1.17 through 1.19 exemplify good design. In terms of layout, however, both designs are rather simple—but then, they do not use any of the fancy structural and layout tools possible with advanced HTML tags. The more advanced layout tools will be discussed in the next chapter.

Figure 1.17 shows the example home page for the Instructional and Research Computing Group at the University of Toronto, while Figures 1.18 and 1.19 show how this page looks using the Netscape Navigator 4 and UNIX lynx browsers.

Appropriate Use of Heading Elements

Let’s begin with the TITLE and H1 headings in Figure 1.17. In both cases, these are clearly descriptive of the content and origin of this document or document collection. As mentioned previously, a TITLE should always be clearly descriptive of a page’s content, since it is used to reference a page when a user bookmarks the location. You have much more flexibility with headings, but, in general, the main heading of a home page should also clearly reflect the contents of the collection, as this quickly lets your visitors know that they have reached the right place.

Figure 1.15 HTML document listing for the file home_bad.html, which contains a poorly designed home page. Figure 1.16 shows the rendering of this by the Microsoft Internet Explorer 4 browser.

<HTML> <HEAD>

<TITLE> Instructional and Research Computing </TITLE>
</HEAD> <BODY>

<h1 ALIGN=“center”> Instructional and Research Computing </H1>

<P>this is the home page of the Instructional and Research Computing
   Group <strong>(IRC)</STRONG>, one of seven departments of the Division
   of Computing and Communications.  The IRC group provides support for
   <A HREF=“MulVis/intro.html”> multimedia and visualization techniques</A>,
   access to and support for <A HREF=“HPC/intro.html”>high performance
   computing</A>, and support for <A HREF=“AdTech/intro.html”>adaptive
   technology</A>.  (aids for the physically challenged).  We also have
   some interesting links to <A HREF=“Lists/Lists.html”>WWW Starting
   Points</A>, a big list of <A HREF=“Lists/Lists.html”>www Search
   Tools</A>, another list of hypertext pointers to
   <A HREF=“Lists/Libraries.html”>Libraries</A> resources, and a
   link to the  <A HREF=“<http://www.utoronto.ca/uoft.html”>Main
   University Home Page </A>.

<P>If you become lost in our documents use the navigation icons.
   The <EM> home </EM> icon brings you back here, while the <EM> up </EM>
   icon takes you up one level in the document hierarchy.  <EM> Info </EM>
   and <EM> help </EM> are also useful, while the <EM> letter</EM> icon
   lets you send us a message, and the <EM> search </EM> icon allows you
   to do a text search of our pages.
<HR SIZE=“1” NOSHADE>
  <A HREF=“home.html”><IMG SRC=“home.gif”    ALIGN=“TOP”></A>
  <A HREF=“help.html”><IMG SRC=“ic_help.gif” ALIGN=“TOP”></A>
  <A HREF=“info.html”><IMG SRC=“ic_info.gif” ALIGN=“TOP”></A>
  <A HREF=“/cgi-bin/mail.pl”><IMG SRC=“ic_mail.gif” ALIGN=“TOP”></A>
  <A HREF=“home.html”><IMG SRC=“ic_up.gif”   ALIGN=“TOP”></A> . . .
  <A HREF=“cgi-bin/doc-search.pl”> <IMG SRC=“ic_find.gif” ALIGN=“TOP”></A>
<HR SIZE=“1” NOSHADE>
<ADDRESS>
<A HREF=“Staff/web_admin.html”[email protected]</A>
</ADDRESS>

</BODY></HTML>

Figure 1.16 Microsoft Internet Explorer 4 rendering of the HTML document home_bad.html.

As mentioned earlier, headings can range from H1 through to H6, in decreasing order of importance. In designing a collection of documents, you should use heading elements that retain this sense of relative importance, as it helps to build organizational structure within and between documents. There are useful programs that can build a table of contents for a large collection of HTML documents based on the contents and relative levels of the heading elements. This, of course, will work only if the headings elements were used correctly (i.e., H1 for major sections, H2 for subsections, H3 for sub-subsections, and so on). Similarly, some of the Web indexing tools (such as AltaVista, Lycos, or Excite) weight heading element content as more important than regular text. This, of course, will result in useful indexing only if the document’s headings contain sensible content.

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.