+ Page 1 +
-----------------------------------------------------------------
The Public-Access Computer Systems Review
Volume 5, Number 5 (1994) ISSN 1048-6542
-----------------------------------------------------------------
To retrieve an article file as an e-mail message, send the GET
command given after the article information to
listserv@uhupvm1.uh.edu. (Files are also available from the
University of Houston Libraries' Gopher server: info.lib.uh.edu,
port 70.)
CONTENTS
COMMUNICATIONS
The HyperText Markup Language (HTML) and the World-Wide Web:
Raising ASCII Text to a New Level of Usability
By Jeff Barry (pp. 5-62)
To retrieve this file: GET BARRY PRV5N5 F=MAIL
Since the release of the first NCSA Mosaic clients in 1993, the
World-Wide Web (also known as the Web) has become an increasingly
popular tool for disseminating information over the Internet.
The HyperText Markup Language (HTML) is used to structure and
format documents for presentation on the Web. HTML enhances
ASCII files with markup tags that permit the display of a variety
of fonts, images, and highlighting options; designate structural
elements such as headers, lists, and paragraphs; and provide
hypertext links to other documents on the Internet. This
tutorial describes HTML tags, provides examples of their use,
offers guidelines for organizing hypertext documents, suggests
what types of documents are suitable for the Web, and explores
the future of HTML.
COLUMNS
Public-Access Provocations: An Informal Column
And Only Half of What You See, Part II: Skeletons in the
Catalog
By Walt Crawford (pp. 63-66)
To retrieve this file: GET CRAWFORD PRV5N5 F=MAIL
+ Page 2 +
-----------------------------------------------------------------
The Public-Access Computer Systems Review
-----------------------------------------------------------------
Editor-in-Chief
Charles W. Bailey, Jr.
University Libraries
University of Houston
Houston, TX 77204-2091
(713) 743-9804
Internet: lib3@uhupvm1.uh.edu
Associate Editors
Columns: Leslie Pearse, OCLC
Communications: Dana Rooks, University of Houston
Editorial Board
Ralph Alberico, University of Texas, Austin
George H. Brett II, Clearinghouse for Networked Information
Discovery and Retrieval
Priscilla Caplan, University of Chicago
Steve Cisler, Apple Computer, Inc.
Walt Crawford, Research Libraries Group
Lorcan Dempsey, University of Bath
Pat Ensor, University of Houston
Nancy Evans, Pennsylvania State University, Ogontz
Charles Hildreth, READ, Ltd.
Ronald Larsen, University of Maryland
Clifford Lynch, Division of Library Automation,
University of California
David R. McDonald, Tufts University
R. Bruce Miller, University of California, San Diego
Paul Evan Peters, Coalition for Networked Information
Mike Ridley, University of Waterloo
Peggy Seiden, Skidmore College
Peter Stone, University of Sussex
John E. Ulmschneider, North Carolina State University
+ Page 3 +
Technical Support
Tahereh Jafari, University of Houston
Publication Information
Published on an irregular basis by the University Libraries,
University of Houston. Technical support is provided by the
Information Technology Division, University of Houston.
Circulation: 8,229 subscribers in 64 countries (PACS-L) and 2,652
subscribers in 51 countries (PACS-P).
Back issues are available from listserv@uhupvm1.uh.edu. To
retrieve a cumulative index to the journal, send the following e-
mail message to the list server: GET INDEX PR F=MAIL.
Back issues are also available from the University of Houston
Libraries' Gopher server. Point your Gopher client at
info.lib.uh.edu, port 70, and follow this menu path:
Looking for Articles
Electronic Journals
University of Houston Libraries E-Journals
The Public-Access Computer Systems Review
The journal's URL is gopher://info.lib.uh.edu:70/11/articles/e-
journals/uhlibrary/pacsreview.
The first three volumes of The Public-Access Computer Systems
Review are also available in book form from the American Library
Association's Library and Information Technology Association
(LITA). The price of each volume is $17 for LITA members and $20
for non-LITA members. All three volumes can be ordered as a set
for $45 (indicate that you want the PACS Review set, order number
7712-X). To order, contact: ALA Publishing Services, Order
Department, 50 East Huron Street, Chicago, IL 60611-2729, (800)
545-2433.
+ Page 4 +
-----------------------------------------------------------------
The Public-Access Computer Systems Review is an electronic
journal that is distributed on the Internet and on other computer
networks. There is no subscription fee.
To subscribe, send an e-mail message to
listserv@uhupvm1.uh.edu that says: SUBSCRIBE PACS-P First Name
Last Name.
The Public-Access Computer Systems Review is Copyright (C)
1994 by the University Libraries, University of Houston. All
Rights Reserved.
Copying is permitted for noncommercial use by academic
computer centers, computer conferences, individual scholars, and
libraries. Libraries are authorized to add the journal to their
collection, in electronic or printed form, at no charge. This
message must appear on all copied material. All commercial use
requires permission.
-----------------------------------------------------------------
+ Page 5 +
-----------------------------------------------------------------
Barry, Jeff. "The HyperText Markup Language (HTML) and the
World-Wide Web: Raising ASCII Text to a New Level of Usability."
The Public-Access Computer Systems Review 5, no. 5 (1994): 5-62.
To retrieve this file, send the following e-mail message to
listserv@uhupvm1.uh.edu: GET BARRY PRV5N5 F=MAIL. (The file is
also available from the University of Houston Libraries' Gopher
server: info.lib.uh.edu, port 70.)
-----------------------------------------------------------------
1.0 Introduction
Since the release of the first NCSA Mosaic clients in 1993, the
World-Wide Web (also known as the Web) has become an increasingly
popular tool for disseminating information over the Internet.
The HyperText Markup Language (HTML) is used to structure and
format documents for presentation on the Web. HTML enhances
ASCII files with markup tags that permit the display of a variety
of fonts, images, and highlighting options; designate structural
elements such as headers, lists, and paragraphs; and provide
hypertext links to other documents on the Internet. This
tutorial describes HTML tags, provides examples of their use,
offers guidelines for organizing hypertext documents, suggests
what types of documents are suitable for the Web, and explores
the future of HTML.
2.0 Background of the Web
The World-Wide Web initiative originated with the European
Laboratory for Particle Physics (CERN) in 1989 as an attempt to
electronically distribute the literature of high-energy physics
to researchers. [1] The World-Wide Web initiative was based on
the hypertext concept. By creating computer linkages from the
citations of an article to the corresponding source documents,
users would be able to navigate through a body of related
literature online simply by following the "electronic footnotes."
In order to realize such a system, computer protocols and
standards had to be created for describing the structure of
documents, specification of links, and the transmission of
documents over a computer network.
+ Page 6 +
As the World-Wide Web developed, key supporting technologies were
established. The HyperText Markup Language (HTML) describes the
organization of a document so that certain structural elements
can be uniquely identified and accessed over the Internet.
Within an HTML document, links to other information on the
Internet are specified through the use of Uniform Resource
Locators (URLs). The actual process of transferring HTML
documents over the network in the Web is accomplished by
computers employing the HyperText Transfer Protocol (HTTP); the
computers that deliver HTML documents to users of the Net are
usually referred to as "Web servers." Individuals access
documents on Web servers through client software on their local
machines, such as Mosaic, Cello, and Lynx. Since the hypertext
nature of the Web facilitates the browsing of networked
resources, Web client software has generically come to be known
as "browsers." Although it is important to the operation of the
Web, authors of HTML documents don't need understand the details
of the HTTP protocol.
The Web has evolved beyond being just a hypertext tool: it
is now a hypermedia environment that incorporates images, sound,
and even video. In fact, the diversity of documents found in the
World-Wide Web has fostered the need for ongoing revisions of
HTML. This process is largely supported by ad hoc volunteer
efforts by many individuals around the world who are dedicated to
seeing the Web evolve into a more mature and stable networked
communications tool. As individuals have tried to apply the HTML
tags to a variety of document types, the limitations of HTML have
become very clear. An excellent overview of these limitations
can be found in a recent paper by John Price-Wilkin. [2]
Nevertheless, the Web is a precursor of the networked environment
that will permeate libraries in the future. As HTML tags are
explained in this tutorial, areas that might change with the next
HTML specification are identified.
+ Page 7 +
3.0 Structure of HTML Documents
An HTML document is simply an ASCII text file that has been
marked up with standardized tags in order to provide structure to
the text (see Section 11 for a discussion of HTML's relationship
to SGML). One of the disadvantages of plain ASCII files is that
they do not provide the reader with information about document
structure or formatting. Whenever you convert a file created in
a word processor to ASCII, the fonts, bullets, bold, italics, and
other formatting information are lost during the conversion.
Although it utilizes ASCII files, HTML provides information
about a document's structure (e.g., title, headings, and
paragraphs) and format (e.g., bold and italics) through the use
of standardized markup tags.
In HTML terminology, a document is composed of "elements."
In simple terms, an element can be viewed as being either a part
of a document, such as a title; a formatting code, such as bold;
a hypertext link; or an image. In turn, elements are identified
by markup tags. In general, this paper will simplify HTML
terminology and use "tag" to refer to both elements and actual
markup tags. For the details of HTML's complex document
structure, consult the HyperText Markup Language (HTML), Version
2.0 specification. [3]
For example, the tag to begin a title is , the tag to
begin a first-level heading is <H1>, and the tag to begin a
paragraph is <P>. The beginning tag is followed by the text of
the title, heading, or paragraph respectively. Most HTML tags
are used in pairs, although some tags can be used singularly.
The beginning tag is usually called the "start tag." The ending
tag is usually called the "end tag." Except for the addition of
a forward slash, the end tag is the same as the start tag. For
example, the tag to end a title is , the tag to end a
first-level heading is , and the tag to end a paragraph is
.
Figure 1 presents an example of an HTML document.
-----------------------------------------------------------------
Figure 1. Example HTML Document
-----------------------------------------------------------------
The Title of Your Document is Entered Here
The Heading of Your Document is Entered Here
The text of the first paragraph of your document is entered
here.
-----------------------------------------------------------------
+ Page 8 +
All HTML tags have the same general format shown in Figure 2.
-----------------------------------------------------------------
Figure 2. General HTML Tag Format
-----------------------------------------------------------------
text
| | |
Start Tag | |
Content |
End Tag
-----------------------------------------------------------------
Tags are not case sensitive. For example, is equivalent
to <TITLE>. (For the convenience of the reader of this paper,
tag names, actual tags, and tag attributes are shown in
uppercase.)
HTML documents can be created using either:
1. Regular text editors in which the author enters the
markup tags by hand or by means of a macro.
2. Specialized HTML editors that automatically insert the
appropriate markup tags at locations designated by the
author.
3. Conversion programs that take a word processing file
and translate it into HTML.
Since HTML document editors and conversion programs are still
being developed, the most common method of creating HTML
documents has been to use a text editor and to manually insert
markup tags. Since a relatively small number of tags are used in
HTML, this method is not as tedious as it sounds. Regardless of
the means used to create the document, a solid understanding of
HTML tags is essential for authors preparing documents for the
Web. The simplicity of HTML and the ability to generate such
documents without specialized tools facilitates the ease of entry
into the world of networked hypermedia.
In this tutorial, an example of creating a "home page" in
HTML will be provided. A home page commonly refers to the first
document a user sees when starting a Web browser. Many users
create their own home pages for organizing information about
their favorite Internet sites. By following the examples in this
tutorial, you should be able to create your own home page.
+ Page 9 +
4.0 Structural Elements
An HTML document consists of at least three essential elements: a
title, a heading, and the text that forms the body of the
document. The body of the document can be in the form of
paragraphs, lists, images, or a combination of elements. Figure
3 presents an example home page.
-----------------------------------------------------------------
Figure 3. Example Home Page
-----------------------------------------------------------------
<TITLE>Jeff's Home Page
Jeff's Home on the Net
Your "home page" may include links to other information
sources on the network, information about yourself, and even
your photograph. HTML provides the flexibility of crafting a
toolbox of networked resources that meets your needs.
-----------------------------------------------------------------
4.1 TITLE Tag ()
The TITLE tag (<TITLE>) describes the content of the document.
Rather than displaying the text of the TITLE tag as part of the
document, Web browsers usually display it in an area above the
document window; different types of browsers may display the
title differently.
The TITLE tag should both describe the content of a document
and provide the reader with an indication of the context of the
document. If the HTML document is part of a multi-document work,
then the parent document might also be part of the TITLE tag.
For example, the following title would be meaningless on its
own: <TITLE>Introduction. A better title would include
the context of the document, such as: Dead Sea Scrolls
Exhibit--Introduction.
Providing meaningful titles to hypertext documents
facilitates the web-like linkage of congruent resources. In
HTML, the TITLE tag serves not only as a concise description of a
document, but it also helps users to navigate among a set of
documents that, in actuality, might exist on a number of
different Web servers throughout the world.
While no limit is placed on the length of this tag, titles
should be kept brief. Since documents may be displayed or
utilized by many different types of client software, there is no
guarantee that lengthy titles will not be truncated, possibly
resulting in the loss of information. A "rule of thumb" is to
keep document titles to less than 64 characters.
+ Page 10 +
4.2 HEADING Tags (
to
)
HTML provides for six different levels of HEADING tags:
,
,
,
,
, and
. The most prominent heading is
assigned the
tag. A subsection would be marked with the
tag. A section within the subsection would be designated
with the
tag.
The Web browser supplies the appropriate sized font for each
heading level. The font used for an
heading is more
prominent than the font for an
heading, whereas the font
used for an
heading is more prominent than the font used for
an
heading.
Heading numbers should not be mixed. For example,
Jeff's Home on the Net
would not be a valid heading
because the number of the end tag is not the same as the number
for the start tag.
Since headings, unlike titles, are displayed by browsers
with the text of the HTML document itself, the
heading is
the most visually prominent text displayed.
The use of a HEADING tag implies a paragraph break before
and after the tag. When a heading is displayed in a Web browser,
adequate white space will be added around the text of the heading
in order to form the paragraph break.
Try to choose the appropriate level heading based upon the
section's place within the document and not based upon the
appearance of the heading when displayed in a browser.
4.3 PARAGRAPH Tag (
)
A mild controversy exists among HTML authors about the PARAGRAPH
tag (
). Early HTML specifications used the PARAGRAPH tag to
indicate a paragraph break. However, using the tag in this
manner only provided formatting information to browsers (i.e.,
when to add blank space around text). Many HTML users viewed the
PARAGRAPH tag as a start tag "containing" a block of text that
functioned as a paragraph, just as a HEADING tag contained text
that functioned as a header.
The latest revision of the HTML specification indicates that
the PARAGRAPH tag represents a paragraph and not a paragraph
break. The value of viewing the PARAGRAPH tag as a container,
rather than a separator, is that a containing tag conveys
structural information, whereas a separating tag simply implies
formatting. Think of the PARAGRAPH tag as containing a block of
text that functions as a paragraph and not as a tag that only
separates one text block from another.
+ Page 11 +
To keep documents in conformance with current HTML practice,
it is best to place the
tag at the beginning of each
paragraph.
Note that the end tag (
) is optional and is usually left
out.
The use of the PARAGRAPH tag to force the addition of white
space around text that is not a paragraph is strongly
discouraged.
5.0 Presentation Tags
One of the primary hurdles that authors face in preparing HTML
documents is moving from a presentation perspective to a
structural one. Word processors focus the author's energies on
the presentation of a document. When preparing documents in a
word processor, the author considers fonts and other presentation
characteristics such as bold, underlining, italics, and bullets.
HTML was initially designed to allow the author to focus on
a document's content rather than its presentation. The software
that displays HTML documents is responsible for rendering the
document for the appropriate display device. The intention of
HTML, as with other structural markup languages, is to relieve
the author from presentation considerations. HTML documents
should be platform independent: the same HTML document should
look just as good with NCSA Mosaic for the Macintosh as with NCSA
Mosaic for Microsoft Windows.
One of the problems that many people have in learning HTML
is that all Web browsers do not support the same conventions.
For example, early versions of NCSA Mosaic for Microsoft Windows
only supported a limited set of tags. When creating HTML
documents, the author must trade off the present inconvenience
that, if all HTML tags are used, some browsers may only display a
subset of them against the future inconvenience that HTML markup
that is restricted to accommodate current Web browser limitations
will need to be upgraded as these browsers become more
sophisticated.
+ Page 12 +
HTML presentation elements are divided into two sets:
logical style and physical style. Logical tags describe the role
that the text plays in a document, such as a citation, a
definition, or an emphasized statement. Physical tags simply
indicate the desired appearance of text, such as bold or italics.
While it is natural in a word processor to indicate when text
should be in bold or italics, the author of an HTML document
should use logical rather than physical elements whenever
possible. As Coombs et al. note:
Using descriptive markup to identify the logical elements of
a document not only simplifies composition, maintenance,
collaboration, and publication, it also enables authors to
apply a wide range of tools for composition assistance.
This feature must be exploited if text processing is going
to fulfill its original promise to significantly assist
scholarly composition and become more than just improved
typing. [4]
5.1 Logical Tags
Table 1 describes the major HTML logical tags.
-----------------------------------------------------------------
Table 1. Major Logical Tags
-----------------------------------------------------------------
Emphasis, usually italics.
Strong emphasis, usually bold.
Definition term, usually bold.
Citation, usually italics.
Quotation, usually italics.
-----------------------------------------------------------------
+ Page 13 +
To see how logical tags are used, let's add a couple of them to
the example home page from Figure 3. Figure 4 shows the modified
home page.
-----------------------------------------------------------------
Figure 4. Home Page With Logical Tags
-----------------------------------------------------------------
Jeff's Home Page
Jeff's Home on the Net
Your home page may include links to other
information sources on the network, information about
yourself, and even your photograph. HTML provides the
flexibility of crafting a toolbox of networked
resources that meets your needs.
If a man does not keep pace with his companions,
perhaps it is because he hears a different drummer. Let him
step to the music which he hears, however measured or far
away.
Henry David Thoreau. Walden, 1854.
-----------------------------------------------------------------
Additional logical tags that provide information about the text
contained in the tagged element are for examples of
computer programming code, for examples of text typed from
a keyboard, to indicate a sample sequence of characters,
and to specify the enclosed text as the name of a variable.
Appendix A describes these tags.
5.2 Physical Tags
The BOLD tag (), which is a physical tag, most closely
corresponds to the STRONG tag (), which is a logical tag;
and the ITALICS tag (), which is a physical tag, corresponds
to the EMPHASIS tag (), which is a logical tag. However, it
should not be assumed that text marked with the EMPHASIS tag will
be in italics. The physical tags can be used to force the
desired type of presentation. Of course, the display device must
be capable of presenting characters in the designated format.
For instance, on a character-screen terminal, text marked with
the ITALICS tag may actually be rendered as bold because italics
cannot be displayed on such a monitor.
Whenever a Web browser encounters tags that it does not
understand, those tags will be ignored; however, the text within
the tags will still be displayed. Some primitive Web browsers do
not understand logical tags and simply display text enclosed
within logical tags without any highlighting.
+ Page 14 +
The seemingly conflicting recommendation to use logical tags
over physical tags--even when all Web browsers do not yet support
the former--reflects the early stage of development of HTML and
the Web itself. As Web technology matures, more scalable
solutions will evolve. The movement away from physical tags
towards logical tags reflects this ongoing evolution.
5.3 PREFORMATTED TEXT Tag (
)
The PREFORMATTED TEXT tag (
) instructs Web browsers to
preserve the formatting (i.e., character and line spacing) of the
enclosed text and present it in a standard, monospace font. This
tag is used for text that would become unintelligible if
displayed in a proportional font. Because HTML does not
currently provide for the display of tables or matrices, the
preformatted text element serves as an easy way to display
tabular information in HTML documents.
Since the PREFORMATTED TEXT tag retains the hard returns of
the original ASCII text, neither the PARAGRAPH tag nor any of the
highlighting tags should be used within preformatted text;
however, hypertext links may be included.
Actually, the easiest way to create an HTML document is
through the use of the PREFORMATTED TEXT tag. By inserting
at the beginning of a document and
at the end of a
document, you can create an HTML file. This quick and dirty
approach creates correspondingly unattractive, but readable,
documents. As with all HTML documents, the file extension must
be ".html" (or ".htm" if the documents are being served from a
Microsoft DOS or Windows machine).
5.4 LINE BREAK Tag ( )
It's often difficult for new HTML users to figure out how to
control the line spacing of a document. Many tags, such as
HEADING tags, add an extra space below their end tags. If you
simply want to simulate the appearance of a carriage return, use
the LINE BREAK tag ( ). Figure 5 illustrates the use of the
LINE BREAK tag.
+ Page 15 +
-----------------------------------------------------------------
Figure 5. LINE BREAK Tag Example
-----------------------------------------------------------------
Jeff Barry
Cooperative Information Services Librarian
The University of Tennessee Libraries
Knoxville, Tennessee
-----------------------------------------------------------------
The LINE BREAK tag is useful in displaying addresses. Notice
that if the LINE BREAK tag was omitted, the Web client would
display the lines as if they flowed together without any
separation. Inserting a regular carriage return in an ASCII text
file has no significance on the way an HTML document is displayed
(except in preformatted text).
5.5 HORIZONTAL RULE Tag (
)
Many document authors take advantage of the HORIZONTAL RULE tag
() to provide a visual means of dividing their documents.
Whenever a Web browser encounters a HORIZONTAL RULE tag, it
displays a horizontal divider line across the screen.
Figure 6 presents an example of the HORIZONTAL RULE tag.
-----------------------------------------------------------------
Figure 6. HORIZONTAL RULE Tag Example
-----------------------------------------------------------------
Jeff's Home Page
Jeff's Home on the Net
Your home page may include links to other
information sources on the network, information about
yourself, and even your photograph. HTML provides the
flexibility of crafting a toolbox of networked
resources that meets your needs.
-----------------------------------------------------------------
+ Page 16 +
6.0 Creating Hypertext Links
One of the most exciting aspects of HTML is its ability to create
hypertext links. Links can be created to items within the same
document, to other documents on the same server, or to any
document on the Internet. Links are used to relate one document
to another. The format for specifying a hypertext link consists
of at least three parts: the ANCHOR tag, the network address of
the document to be linked, and the text to be displayed in the
formatted document. Links are anchored to specific text within a
document.
6.1 ANCHOR Tag ()
The first step in creating a hypertext link is to determine the
text that will represent the link. The text provided for the
link should give the user an indication about the content of the
link.
Since many HTML documents also serve as printed
documentation, hypertext links should provide meaning and
readability in the context of the surrounding text without
incorporating computer specific actions such as clicking a mouse.
Don't create a link that says: "For a hypermedia interface to the
Library of Congress' 1492: An Ongoing Voyage Exhibit, click
here." Rather, make a link that says: "A hypermedia interface to
the Library of Congress' 1492: An Ongoing Voyage Exhibit is
available."
Enclose text within an ANCHOR tag to designate it as a
hypertext link. The text between the starting tag () and
ending tag () will be displayed by the Web browser with
special emphasis, usually underlined and in a separate color from
the other text. Using the ANCHOR tag alone, however, does not
constitute a valid link. A network address, in the form of a
Uniform Resource Locator (URL), that specifies the document to be
retrieved must be included as part of the hypertext link.
In HTML, many start tags can have optional attributes (a
description of attributes for all tags is provided in Appendix
A). An attribute consists of a name, followed by an equal sign,
followed by a value for that attribute. The value of the
attribute should be enclosed in double quotes. An important
attribute of the starting ANCHOR tag is named HREF (think of
hypertext reference). The value of HREF is the location of the
document to be retrieved.
+ Page 17 +
Figure 7 shows an example of an ANCHOR tag with a HREF.
-----------------------------------------------------------------
Figure 7. ANCHOR Tag Example
-----------------------------------------------------------------
1492: An Ongoing Voyage
-----------------------------------------------------------------
Notice that the value of the HREF attribute is always in the form
of a URL.
6.2 Uniform Resource Locators (URLs)
The Web uses Uniform Resource Locators (URLs) as its standard way
of referencing information on the Internet. The use of a
standard addressing scheme by authors of HTML documents allows
computer programs to interpret the address, use the appropriate
Internet protocol (e.g., FTP, Telnet, and HTTP), and automate the
retrieval of the specified item with the "click of a button."
Two forms of specifying URL syntax are available to authors:
absolute URLs that contain the full addressing syntax and partial
URLs.
6.2.1 Absolute URLs
Absolute URLs are the most common type of URL, and they should
always be used to link to documents on Gopher servers. A URL is
divided into three parts: the protocol, the machine name, and the
path (i.e., protocol://machine.name[:port]/path). The first part
of the URL names the Internet protocol used for accessing the
document, such as "ftp," "gopher," "http," "telnet," and other
supported protocols. The second part of the URL identifies the
name of the document server, such as "sunsite.unc.edu." (Some
servers run protocols on nonstandard ports; if so, the alternate
port number, preceded by a colon, follows the machine name.) The
final part of the URL represents the path of the document to be
retrieved. Separating the protocol from the machine name in the
URL is a colon (:) and two forward slashes (//). Separating the
machine name from the path is one forward slash (/).
Figure 8 presents an example of a URL.
+ Page 18 +
-----------------------------------------------------------------
Figure 8. Example URL
-----------------------------------------------------------------
http://sunsite.unc.edu/expo/1492.exhibit/Intro.html
| | | | |
| | | | |
| +--------------+ +--------------------------+
| | |
Protocol Machine Name Path
-----------------------------------------------------------------
Occasionally, a reference to a URL has no path (e.g.,
http://www.cityscape.co.uk/). In most instances, this will be an
acceptable URL. Depending upon the configuration of the
particular Web server at that destination, either an index of
files in the server's root directory will be generated or an HTML
document named "index.html" will be retrieved. The document
named "index.html" may not be an index per se, but a default home
page that is delivered whenever a path is not specified.
6.2.1.1 HTTP URL
The URL in Figure 9 specifies the protocol as the HyperText
Transfer Protocol ("http"). The document is located on the
machine with the host name of "sunsite.unc.edu." The
"expo/1492.exhibit/Intro.html" part of the URL represents the
path of that document on the Web server.
-----------------------------------------------------------------
Figure 9. Example HTTP URL
-----------------------------------------------------------------
http://sunsite.unc.edu/expo/1492.exhibit/Intro.html
-----------------------------------------------------------------
+ Page 19 +
6.2.1.2 Gopher URL
Figure 10 is an example of a URL pointing to a Gopher server.
This particular server is hosted by the University of Tennessee
Libraries. The URL points to the Smoky Mountain Database, which
contains information about biodiversity and environmental issues
in the Appalachians.
-----------------------------------------------------------------
Figure 10. Example Gopher URL
-----------------------------------------------------------------
gopher://www.lib.utk.edu/11/Information-by-Subject/S%3a/smokies
| | | | |
| | | | |
| +-------------+ +------------------------------------+
| | |
Protocol Machine Name Path
-----------------------------------------------------------------
6.2.1.3 Telnet URL
Since the Telnet protocol opens an interactive terminal session,
a path is not needed. The URL in Figure 11 connects via Telnet
to the CARL UnCover system.
-----------------------------------------------------------------
Figure 11. Example Telnet URL
-----------------------------------------------------------------
telnet://database.carl.org/
| | |
| | |
| +-----------------+
| |
Protocol Machine Name
-----------------------------------------------------------------
+ Page 20 +
6.2.1.4 Anonymous FTP URL
Documents that reside an anonymous FTP servers can be accessed by
use of a URL like the one in Figure 12.
-----------------------------------------------------------------
Figure 12. Example Anonymous FTP URL
-----------------------------------------------------------------
ftp://ftp.cni.org/pub/LITA/tiip-forum/proceedings.html
| | | | |
| | | | |
| +---------+ +----------------------------------+
| | |
Protocol Machine Name Path
-----------------------------------------------------------------
It is also possible to link to subdirectories rather than to a
specific document. For example, the URL in Figure 13 links to a
subdirectory that contains the document Principles for the
Development of the National Information Infrastructure in various
formats. The HTML document returned by this link is an index of
the files in that subdirectory. Each file name in the directory
listing becomes a link to the specific document. In this manner,
the Web provides an easy way of retrieving documents from
anonymous FTP servers.
-----------------------------------------------------------------
Figure 13. Example Anonymous FTP Subdirectory URL
-----------------------------------------------------------------
The proceedings Principles for the Development of the
National Information Infrastructure from ALA's
Telecommunications and Information Infrastructure Policy Forum
are available on the Internet.
-----------------------------------------------------------------
+ Page 21 +
6.2.2 Partial (or Relative) URLs
A partial URL specifies the path of a link relative to the
originating document. When encountering a partial URL, the Web
software assumes that the protocol and the machine name for the
destination of the hypertext link are the same as that of the
document that contains the link. (See section 6.3 for examples
of partial URLs.)
6.3 Linking to Other Documents on the Same Server
Hypertext documents on the Web often consist of links among
multiple files on the same server. The following example shows
how partial URLs can be used to create hypertext links to
documents on the same server. The originating document, the
homepage.html file, is in the webfiles directory. The
destination links are the htmlguides.html file, which is also in
the webfiles directory; the editors.html file, which is in the
tools subdirectory of webfiles; and the userguide.html file,
which is in the lbryfiles directory. (Note that the lbryfiles
directory is not a subdirectory of webfiles). The directory
structure for the files is shown in Figure 14, and the marked up
text of the homepage.html file is shown in Figure 15.
-----------------------------------------------------------------
Figure 14. Example Directory Structure
-----------------------------------------------------------------
+---------------------------------------+
| |
webfiles lbryfiles
| |
+------------+-----------------+ userguide.html
| | |
| | |
homepage.html htmlguides.html tools
|
editors.html
-----------------------------------------------------------------
+ Page 22 +
-----------------------------------------------------------------
Figure 15. Contents of Homepage.html
-----------------------------------------------------------------
More text could go here. Notice how fragment identifiers can
be used to create footnotes.
James H. Coombs, Allen H. Renear, and Steven
J. DeRose , "Markup Systems and the Future of Scholarly Text
Processing," Communications of the ACM 30 (November 1987): 933-
947.
-----------------------------------------------------------------
7.0 IMG Tag ()
One of the most distinctive aspects of many HTML documents is the
use of images as hypertext links and as decorative accents.
Images that are placed within HTML documents are called "in-lined
images." Supported image formats include GIF, JPEG, and bitmaps.
Images can be scanned photos or original graphics created with a
paint program.
+ Page 24 +
The IMG tag () indicates that an image should be
included in an HTML document. The IMG tag has three attributes.
The most important attribute is SRC (think of source), which has
as its value the URL of the image. The SRC value may be a
partial or absolute URL depending upon the location of the image.
The second attribute of the IMG tag is ALT. The value of ALT is
the text that should be displayed in web browsers that do not
support in-lined images, such as Lynx. The third attribute is
ALIGN, which indicates whether to align the text alongside the
top, middle, or bottom of the image when the document is
displayed. Legal values for ALIGN are "top," "middle," or
"bottom"; the default is "bottom."
Figure 17 shows the use of the IMG tag.
-----------------------------------------------------------------
Figure 17. Example IMG Tag
-----------------------------------------------------------------
-----------------------------------------------------------------
When using an image as a link, the IMG tag is inserted alongside
or in place of the text of the anchor. For example, Figure 18
presents anchor links from a small image to a larger photo of
that image.
-----------------------------------------------------------------
Figure 18. Example In-lined Image Linked to a Larger Image
-----------------------------------------------------------------
Ruins at Machu Pitthu, Peru
-----------------------------------------------------------------
Whenever a user clicks the small image, the link retrieves the
larger one. Notice that the text is also a link to the image so
that the user may click on either the image or the text to
activate the link. Browsers usually display images functioning
as links with a thicker border than those that surround
decorative images. A frequent mistake that HTML authors make
with this kind of link is to forget to add the ending ANCHOR tag
(
).
+ Page 25 +
The thumbnail images that are an essential part of so many
Web documents can be created with a number of tools. Most image
viewers include a way to reduce the size of an image. If
scanning from a photo, one might want to consider using a Kodak
Photo CD, which provides five different resolutions (one of which
is excellent for Web documents).
8.0 Lists
The hierarchical structure of the Gopher software has proven to
be very useful, and authors can retain a hierarchical menu when
creating Web documents. A drawback of Gopher is that only
limited information can be provided within the hierarchical menu
itself. Readers normally have to select a Gopher menu item and
then view a README file (or some other documenting file) to
determine the system's scope. Since HTML provides the capability
for hypertext links to be included within text, it's easy to
provide some descriptive information about a document before the
link is selected. In some ways, one can look at the Web as
simply extending the capabilities of Gopher to the next logical
level.
A good example of using related text with a hypertext link
is NCSA's "What's New" pages (see http://www.ncsa.uiuc.edu/
SDG/Software/Mosaic/Docs/whats-new.html). The entries on the
"What's New" page are simply separated into paragraphs in order
to create a list. Another approach would be to use the HTML list
tags.
8.1 UNORDERED LIST Tag (
)
In HTML, lists are simply sequences of paragraphs that may be
prefaced with special characters. A common means of organizing
home pages is to separate the different items into an UNORDERED
LIST. A bullet preceding each item calls attention to that item.
The tag to begin an UNORDERED LIST is
. Think of "UL"
as representing "unordered list." The tag to end an UNORDERED
LIST is
. Each item in a list must be preceded by an
tag. This tag represents the list entry. A list can contain
many separate items. The
tag does not require an end tag.
In Figure 19, hypertext links to documents on the Internet
are presented as a UNORDERED LIST.
+ Page 26 +
-----------------------------------------------------------------
Figure 19. Example UNORDERED LIST
-----------------------------------------------------------------
Visit the 1492:
An Ongoing Voyage Exhibit by the Library of Congress to learn
about the early exploration of the Western Hemisphere.
Biodiversity and environmental issues in the Appalachians
are the themes of the Smoky Mountain Database.
The CARL
Corporation provides an excellent interactive service
accessible over the Internet.
-----------------------------------------------------------------
When using an image as a link, the IMG tag is inserted alongside
or in place of the text of the anchor. For example, Figure 18
presents anchor links from a small image to a larger photo of
that image.
-----------------------------------------------------------------
Figure 18. Example In-lined Image Linked to a Larger Image
-----------------------------------------------------------------
Ruins at Machu Pitthu, Peru