HTML The Definitive Guide (15 page)

Chapter 2

HTML Quick Start

2.7 Hyperlinks

While text may be the meat and bones of an HTML document, its heart is hypertext. Hypertext gives users the ability to retrieve and display a different document in your own or someone else's collection simply by a click of the keyboard or mouse on an associated word or phrase (
hyperlink
) in your HTML document. Use these interactive hyperlinks to help readers easily navigate and find information - in your own, or others' collections - of otherwise separate documents in a variety of formats, including multimedia, HTML, and plain ASCII text. Hyperlinks literally bring the wealth of knowledge on the whole Internet to the tip of the mouse pointer.

To include a hyperlink to some other document in your own collection or on a server in Timbuktu, all you need to know is the document's unique address and how to drop an
anchor
into your HTML

document.

2.7.1 URLs

While it is hard to believe, given the millions, perhaps billions, of them out there, every document and resource on the Internet has a unique address known as its
uniform resource locator
(URL; commonly pronounced "you-are-ell"). A URL consists of the document's name preceded by the hierarchy of directory names in which the file is stored (
pathname
), the Internet
domain name
of the server that hosts the file, and the software and manner by which the browser and the document's host server communicate to exchange the document (
protocol
):
protocol://server_domain_name/pathname
Here are some sample URLs:

http://www.kumquat.com/docs/catalog /price_list.html
price_list.html

http://www.kumquat.com/

ftp://ftp.netcom.com/pub/

The first example is what's known as an
absolute
or complete URL. It includes every part of the URL

format - protocol, server, and the pathname of the document.

While absolute URLs leave nothing to the imagination, they can lead to big headaches when you move documents to another directory or server. Fortunately, browsers also let you use
relative
URLs and automatically fill in any missing portions with respective parts from the current document's
base
URL. The second example is the simplest relative URL of all; with it, the browser assumes that the
price_list.html
document is located on the same server, in the same directory as the current document, and uses the same network protocol.

Relative URLs are also useful if you don't know a directory or document's name. The third URL

example, for instance, points to
kumquat.com
's web home page. It leaves it up to the kumquat server to decide what file to send along. Typically, the server delivers the first file in the directory, one named
index.html
, or simply a listing of the directory's contents.

Although appearances may deceive, the last FTP example URL actually is absolute; it points directly at the contents of the
/pub
directory.

2.7.2 Anchors

The anchor () tag is the HTML feature for defining both the source and the destination of a hyperlink.[
4
] You'll most often see and use the tag with its href attribute to define a source hyperlink. The value of the attribute is the URL of the destination.

[4] The nomenclature here is a bit unfortunate: the "anchor" tag should mark just a destination, not the jumping off point of a hyperlink, too. You "drop anchor"; you don't jump off one. We won't even mention the atrociously confusing terminology the HTML

standard uses for the various parts of a hyperlink except to say that someone got things all "bass ackwards."

The contents of the source tag - the words and/or images between it and its end tag - is the portion of the HTML document that is specially activated in the browser display and that users select to take a hyperlink. These
anchor
contents usually look different from the surrounding content (text in a different color or underlined, images with specially colored borders, or other effects), and the mouse pointer icon changes when passed over them. The tag contents, therefore, should be text or an image (icons are great) that explicitly or intuitively tells users where the hyperlink will take them.

[The Tag, 7.3.1]

For instance, the browser will specially display and change the mouse pointer when it passes over the "Kumquat Archive" text in the following example: For more information on kumquats, visit our Kumquat Archive

If the user clicks the mouse button on that text, the browser automatically retrieves from the server
www.kumquat.com
a web
(http:
) page named
archive.html
, and then displays it for the user.

2.7.3 Hyperlink Names and Navigation

Pointing to another document in some collection somewhere on the other side of the world is not only cool, but it also supports your own HTML documents. Yet the hyperlinks' chief duty is to help users navigate your collection in their search for valuable information. Hence, the concept of the home page and supporting HTML documents has arisen.

None of your HTML documents should run on and on. First, there's a serious performance issue: the value of your work suffers, no matter how rich it is, if the document takes forever to download, and if once retrieved, users must endlessly scroll up and down through the display to find a particular section.

Rather, design your work as a collection of several compact and succinct pages, like chapters in a book, each focused to a particular topic for quick selection and browsing by the user. Then use hyperlinks to organize that collection.

For instance, use your home page - the leading document of the collection - as a master index full of brief descriptions and respective hyperlinks to the rest of your collection.

You should also use the special attribute of the tag called name. Or, when the popular browsers come to support the new HTML 4.0 feature, use the id attribute to specially name and identify nearly any tagged section of your document, including the anchor tag. Tag ids and anchors with the name attribute serve as internal hyperlink targets in your HTML documents. Normally, the browser displays a freshly downloaded document at the beginning. Name anchors let you begin the display at the section of interest further down. Simply include them anywhere that they make sense as a hyperlink target. They do not change the appearance of enclosed or surrounding content.

Thereafter, you may append the name, after a separating pound sign (#), as a suffix in the URL of a hyperlink that references that specific place in your document. For instance, to reference a specific topic in an archive, such as "Kumquat Stew Recipes" in our example Kumquat Archive, you mark that section with a name anchor: ... preceding content...

Kumquat Stew Recipes

In the same or another document, you prepare a source hyperlink that points directly to those recipes by including the section's anchor name as a suffix to the document's URL, separated by a pound sign: For more information on kumquats, visit our Kumquat Archive,

and perhaps try one or two of our

Kumquat Stew Recipes.

If selected by the user, the latter hyperlink causes the browser to download the
archive.html
document and start the display at our "Stews" anchor.

2.7.4 Anchors Beyond HTML

HTML hyperlinks are not limited to other HTML documents. Anchors let you point to nearly any type of document available over the Internet, including other Internet services.

However, "let" and "enable" are two different things. Browsers can manage the various Internet services, like FTP and Gopher, so that users can download non-HTML documents. They don't yet fully or gracefully handle multimedia.

Today, there are few standards for the many types and formats of multimedia. Computer systems connected to the Web vary wildly in their abilities to display those sound and video formats. Except for some graphics images, standard HTML gives you no specific provision for display of multimedia

documents except the ability to reference one in an anchor. The browser, which retrieves the multimedia document, must activate a special
helper
application, download and execute an associated
applet
, or have a
plug-in
accessory installed to decode and display it for the user right within the document's display.

Although HTML and most web browsers currently avoid the confusion by sidestepping it, that doesn't mean you can't or shouldn't exploit multimedia in your HTML documents: just be aware of the limitations.

2.6 HTML and Text

2.8 Images Are Special