Now that you've seen in detail the ways you can mark up text for emphasis and add images to your Web pages, it's time to take the leap into making these pages useful on the World Wide Web by adding hypertext links. The anchor tag for hypertext links is simple to add to your already-formatted pages. You'll see how URLs are useful for creating hypermedia links and links to other Internet services.
The basic link for creating hypertext and hypermedia links is the <A>, or anchor, tag. This tag is a container, which requires an </A> to signal the end of the text, images, and HTML tags that are to be considered to be part of the hypertext link. Here's the basic format for a text link:
<A HREF="URL">Text describing link</A>
Be aware that HREF, although it's something that you'll use with nearly every anchor tag you create, is simply an attribute for the <A> tag. Displayed in a browser, the words Text describing link would appear underlined and in another color (on a color monitor) to indicate that clicking that text initiates the hypertext link.
The following is an example of a relative link:
<A HREF="products.html">Our Product Information</A>
If the HTML document to which you want a link is located elsewhere on the Internet, you simply need a more complete, absolute URL, such as the following:
<A HREF="http://www.bignet.net/realcorp/products.html">Our Product Information</A>
In either case, things end up looking the same in a browser (see fig. 10.1).
Figure 10.1 : These are the hypertext links that you've created.
Aside from creating hypertext links to documents on your local computer or elsewhere on the Internet, you can create links to other parts of the same document in which the link appears. These "section" links are useful for moving people to a new section that appears on the same Web page without forcing them to scroll down the entire page.
Doing this, though, requires two instances of the anchor tag-one that serves as the hypertext link and another that acts as a reference point for that link, following this format:
<A HREF="#section_name">Link
to another section of this document</A>
<A NAME="section_name">Beginning of new section</A>
Notice that the anchor tag that creates the hyperlink is similar to the anchor tags that you have used previously. The only difference is the pound sign (#) used at the beginning of the HREF text. This sign tells the anchor that it is looking for a section within the current document, as opposed to within an external HTML document.
The NAME attribute is used
to create the actual section within the current HTML document.
The text that the NAME attribute
contains is relatively unimportant, and it won't be highlighted
or underlined in any way when displayed by a browser. NAME
is nothing more than an internal reference; without it, though,
the link won't work.
| Note |
Remember to use the pound sign (#) only for the actual hypertext link, not the NAME anchor. Also, realize that the NAME text is case-sensitive and that the associated HREF text should use the same case for all letters as does the NAME. If the HREF calls for Section_ONE, and the NAME is actually Section_One, the link will not work. |
In Chapter 8, "Displaying Text in Lists," you worked with the definition list tags available to use in HTML and, in some cases, actually used them for a list of definitions. You do that again in this section, but this time you use section links to move directly to the words that interest you.
Load the HTML template into your text editor, and choose the Save As command in your text editor to create a new file. In the body of your HTML document, type Listing 10.1 or something similar.
Listing 10.1 listlink.html Creating a Definition List
<BODY>
<H2>The Definition List</H2>
<P>Click one of the following words to move to its definition in the list:
<BR>
<A HREF="#EPITHET">epithet</A><BR>
<A HREF="#EPITOME">epitome</A><BR>
<A HREF="#EPOCH">epoch</A><BR>
<A HREF="#EPOXY">epoxy</A><BR>
<A HREF="#EQUAL">equal</A><BR>
</P>
<HR>
<DL>
<DT><A NAME="EPITHET"><B>ep i thet</B></A>
<DD><EM>noun.</EM> a descriptive, often contemptuous word or phrase
<DT><A NAME="EPITOME"><B>ep it o me</B></A>
<DD><EM>noun.</EM> someone who embodies a particular quality
<DT><A NAME="EPOCH"><B>ep och</B></A>
<DD><EM>noun.</EM> a division in time; a period in history or geology
<DT><A NAME="EPOXY"><B>ep ox y</B></A>
<DD><EM>noun.</EM> a synthetic, heat-sensitive resin used in adhesives
<DT><A NAME="EQUAL"><B>e qual</B></A>
<DD><EM>adj.</EM> having the same quality or status; having enough strength, courage, and so on.
<DD><EM>noun.</EM> a person or thing that is equal to another; a person
with similar rights or status
</DL>
</BODY>
In the example, clicking one of the words that appears as a hyperlink in the first section of the paragraph moves the browser window down to that link's associated NAME anchor, so that the definition becomes the focal point of the user's attention. Obviously, using section links would be of greater use in a larger list. Consider the implications for turning an entire dictionary into HTML documents.
Also notice that anchors can be placed within the confines other HTML tags, as in the first paragraph container and in the definition lists of the example. In general, anchor tags can be acted on by other HTML tags as though they were regular text. In the case of hyperlinked text, the underlining and change in color in graphical browsers take precedence, but the hyperlinked text also has any other qualities of the surrounding text (for example, indenting with the rest of the definition text).
In figure 10.2, notice which anchors cause the text to become a hyperlink and how the anchor tags respond within other container tags.
Figure 10.2 : Anchor tags are used to define and move between sections of an HTML document.
Go back and look at the hypertext links that we discussed at the beginning of this chapter (as opposed to section links). In most cases, the URL referenced by the HREF attribute within the anchor tag needs to be an absolute URL, unless it references a file located in the same directory as the current HTML document.
But consider the case of a well-organized Web site, as set out in Chapter 5, "What You Need for a Web Site." That chapter discussed the fact that it's not always the best idea to drop all your Web site's files into the same directory, especially for large sites that contain many graphics or pages. How do you create links to files that may be on the same server but not in the same directory?
One obvious way is to use an absolute URL for every link in your Web site. If the current page is http://www.fakecorp.com/index.html, and you want to access a specific page that you organized into your products directory, you could simply create a link like the following, using an absolute URL:
<A HREF="http://www.fakecorp.com/products/new_prods.html>Our new
products</A>
These absolute URLs can get rather tedious, not to mention the fact that if you happen to change the name of your Web server or move your site to another basic URL, you'll probably have to edit every page in your site to reflect the new URLs.
The <BASE> tag is used to establish the absolute base for relative URLs used in your document's hypertext links. This tag is especially useful when your Web pages may appear in different subdirectories of a single main directory, as in some of the organizational types discussed in Chapter 5. The format of the <BASE> tag is as follows:
<BASE HREF="absolute URL">
Note that the <BASE> tag is designed to appear only between the <HEAD> tags.
It may be helpful to think of <BASE> as doing something similar in function to a DOS path statement. The <BASE> tag tells the browser that relative URLs within this particular Web document are based on the URL defined in the <BASE> tag. The browser then assumes that relative URLs derive from the URL given in the <BASE> tag and not necessarily from the current directory of the HTML document.
Consider a document named http://www.fakecorp.com/products/list.html that looks something like this:
<HEAD>
<TITLE>Page One</TITLE>
</HEAD>
<BODY>
<A HREF="index.html">Back to Index</A>
</BODY>
In this example, the browser tries to find a document named index.html in the directory products, because the browser assumes that all relative addresses are derived from the current directory. Using the <BASE> tag, however, changes this example a bit, as follows:
<HEAD>
<BASE HREF="http://www.fakecorp.com/">
<TITLE>Page One</TITLE>
</HEAD>
<BODY>
<A HREF="index.html">Back to Index</A>
</BODY>
Now the browser looks for the file index.html
in the main directory of this server, regardless of where the
current document is stored (such as in the products
directory). The browser interprets the relative URL in the anchor
tag as though the complete URL were http://www.fakecorp.com/index.html.
| Tip |
If you plan to create a large Web site, you may want to add the <BASE> tag (complete with the base URL) to your HTML template file. |
Using the <BASE> tag to point to your Web site's main directory allows you to create the different types of organization systems described in Chapter 5 by using relative URL statements to access HTML documents in different subdirectories.
Chapter 5 discussed the hybrid style of Web site organization, which allows you to put some common files (such as often-used graphics) in separate directories and to organize unique files with their related HTML pages.
In this example, you create an HTML document called products.html, located at the URL http://www.fakecorp.com/products/products.html. Some of your graphics are maintained in a subdirectory of the main directory of this Web site; the subdirectory is called graphics/. You also have links to other pages in the main directory and in a subdirectory called about/. Figure 10.3 shows this graphically.
Figure 10.3 : Graphical look at your fictitious Web site's organization.
For this example, you create only one Web page. To test the page, however, you want to create a directory structure similar to the previously outlined directory structure and include all the files mentioned.
Begin by saving your template file as products.html. Then, in your text editor, enter Listing 10.2.
Listing 10.2 basetag.html Creating a Directory Structure
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE HREF="http://www.fakecorp.com/">
</HEAD>
<BODY>
<IMG SRC="products/prod_ban.gif">
<H2>Our Products</H2>
<P>Here's a listing of the various product types we have available. Click
the name of the product category for more information:</P>
<DL>
<DT>
<DD><IMG SRC="graphics/bullet.gif"> <A HREF="products/pc_soft.html">
PC Software</A>
<DD><IMG SRC="graphics/bullet.gif"> <A HREF="products/mac_soft.html">
Macintosh Software</A>
<DD><IMG SRC="graphics/bullet.gif"> <A HREF="products/pc_hard.html">
PC Hardware</A>
<DD><IMG SRC="graphics/bullet.gif"> <A HREF="products/mac_soft.html">
Macinotsh Hardware</A>
</DL>
<HR>
<A HREF="index.html">Return to Main</A>
</BODY>
</HTML>
Notice that all the hypertext link HREF commands are pointing to pages that are relative to the <BASE> URL, which is set for the main directory of the Web site. With <BASE> set, it's no longer appropriate simply to enter a filename for your relative URL, even if the file is in the current directory (for example, products/). If all goes well and all your references hold up, your page is displayed as shown in figure 10.4.
Figure 10.4 : Your Products page, complete with relative links to other parts of the Web site.
| Note |
Notice that the <BASE> HREF also affects graphics placed with the <IMG> tag. Remember to use relative addresses for images that take the <BASE> address into account. Only HTTP documents and images are affected by <BASE>, though, and not other URL types (like ftp:// and gopher://). |
Here's where the real power of URLs comes into play. Remember that an URL can be used to describe almost any document or function that's available on the Internet? If something can be described in an URL, a hyperlink can be created for it. In the following section, you start with e-mail.
Creating a hyperlinked e-mail address is simple. Using the mailto: type of URL, you can create the following link:
<A HREF="mailto:tstauffer@aol.com">Send me e-mail</A>
In many graphical browsers, this URL often loads an e-mail window, which allows you to enter the subject and body of an e-mail message and then send it via your Internet account (see fig. 10.5). Even many of the major online services support this hyperlink with their built-in e-mail systems.
Figure 10.5 : Clicking a mailto : link bring up an e-mail message window in Netscape.
Not all Web browsers accept the mailto: style of URL, however, and most of those don't return an error message. If you use this type of link, you may want to warn users. Something like the following text should work well for users of nongraphical browsers:
<P>If your browser supports the mailto: command, click <A HREF="mailto:tstauffer@aol.com">here</A> to send me an e-mail message.
</P>
Using the various types of URLs discussed in Chapter 3, you can create links to nearly all other types of Internet services as well. For Gopher sites, for example, a hypertext link might look like the following example:
<A HREF="gopher://marvel.loc.gov/">the Library of Congress Gopher</A>
Most Web browsers can display Gopher menus. In most cases, clicking a gopher link points the browser at the Gopher site, and the Gopher menu appears in the browser window.
You can create links that cause the Web browser to download a file from an FTP server, as follows:
<P>You can also <A HREF="ftp://ftp.fakecorp.com/pub/newsoft.zip">download</A>the latest version of our software.
When the connection to the FTP server has been negotiated, the file begins to download to the user's computer (see fig. 10.6). Depending on the Web browser, this file may not be formatted correctly. Each browser needs to be set up to accept files of a certain type (such as the PKZip format file in the preceding example).
Figure 10.6 : Netscape is downloading a file from an FTP server.
| Note |
Most browsers can accept hyperlinks only to anonymous FTP servers. You generally should not include in your HTML documents links to FTP servers that require usernames and passwords. |
Again, most browsers have some mechanism (sometimes built into the browser window) for reading UseNet newsgroups. Some browsers launch a separate program to read UseNet groups. In either case, you can create a link like the following:
<A HREF="news:news.answers">UseNet Help Newsgroup</A>
This link loads whatever UseNet reading features the browser employs and displays the specified newsgroup (see fig. 10.7). As discussed in Chapter 3, the news: URL type does not require a particular Internet server address to function. Each browser should be set up with its own links to the user's news server.
Figure 10.7 : MS Internet Explorer after clicking a link to the newsgroup news.answers.
You can create a couple more tags in the <HEAD> section of your HTML documents. These tags are of varying levels of real-world usefulness, so you may want to read this section quickly and refer to it again later if you have a question. The two tags discussed in the following sections are <LINK> and <ISINDEX>.
The <LINK> tag is designed to establish a hypertext relationship between the current document and another URL. Most of the time, the <LINK> tag does not create a clickable hypertext link in the user's Web viewer window. It's a little beyond the scope of this book, but programs can be written to take advantage of the <LINK> tag, such as a program that creates a toolbar that makes use of the relationship defined.
The <LINK> tag generally has either of the following formats:
<LINK HREF="URL" REL="relationship">
or
<LINK HREF="URL" REV="relationship">
For the most part, <LINK> is used to create an author-defined structure to other HTML documents on a Web site. The attribute REL, for example, defines the relationship of the HREF URL to the current document. Conversely, REV defines the relationship between the current document and the HREF'ed URL.
Following are two examples of <LINK> statements:
<LINK HREF="http://www.fakecorp.com/index.html" REL="PARENT">
<LINK HREF="http://www.fakecorp.com/product2.html" REV="CHILD">
In the HTML 2.0 standard, these definitions are relatively irrelevant-at least publicly on the Web. You more commonly find these statements used within certain organizations (perhaps companies employing an intranet), especially for advanced Web-based documentation efforts and for efforts that use HTML and SGML (as discussed in Chapter 1, "What is HTML?") together.
HTML 3.0 more than likely will introduce more widespread use of the <LINK> statement and other <HEAD> tags for more tangible benefits.
You may want to use one <LINK> frequently: the REV="MADE" link, which tells users who created the HTML page. Although this use of <LINK> doesn't actually call up a mailto: link in most browsers, some may recognize it eventually. In the meantime, it gives people who view your source code the e-mail address of the author, as in the following example:
<LINK HREF="mailto:tstauffer@aol.com" REV="MADE" REL="AUTHOR">
You also should include a mailto:
anchor tag in the body of your document to allow people to respond
to your Web page. Using both is encouraged, but it's ultimately
up to you.
| Tip |
You can find more information about <LINK>, and the various values for REL/REV, at http://www.sq.com/papers/Relationships.html. |
Adding the <ISINDEX> tag to the <HEAD> of your document allows some Web-server search engines to search your Web pages for keywords. If your Web server offers such a search engine and the user's browser supports these searches, the user will be presented with a simple search box when this page is loaded. The user can then enter the text he or she wants to search for on your page.
The tag itself is very straightforward and requires no further attributes, as the following example shows:
<HEAD>
<ISINDEX>
</HEAD>
| Note |
If someone else runs your Web server, you may want to ask that person whether you should include the <ISINDEX> tag. If the administrator offers a server-based search engine, he or she may have you use the <ISINDEX> tag, or he or she may insert it into your document himself or herself. |
The <A> (anchor) tag is the basis for creating hyperlinks on your Web pages. This tag is fairly straightforward; you can use it in conjunction with other tags (such as definition lists) to make hypertext links easy to understand and presentable to the user.
You also can create links to other parts of the same document: relative links and links for special services, such as e-mail. In the case of some of these links (especially relative links), you must seriously consider the way in which your Web site is organized.
The head section of your HTML page can accept several other link-related tags. To keep relative links in check, you can use the <BASE> tag. The <LINK> tag is used mainly for internal reference, and the <ISINDEX> tag can be used on Web servers that provide search engines for your Web pages.