Creating links to other local and distance HTML documents is a relatively straightforward process, as Chapter 10, "Hypertext and Creating Links," showed. But you also can include links within and together with other HTML tags to make them more interesting, better organized, and more accessible to your users.
As you read this chapter, it may strike you that very little new information about HTML is presented. That's done somewhat purposefully. The point of most of this chapter is simply to explore the various ways that hypertext links can be added to fully formatted HTML documents.
In this chapter, you'll take what you know about hypertext links and integrate them more completely into your Web pages. You'll also look at how to create graphical links-links that are initiated by allowing the user to click images in your documents, instead of just text. You'll also create menubar links (a series of graphical links) in an effort to design an attractive interface for your Web sites. And, you'll see how to call multimedia files using hypertext links.
You can include the anchor tag (<A>) for hypertext links inside or with nearly any other HTML formatting tags. Although it's important to remember that anything inside the actual <A HREF> statement needs to remain intact, the <A> tag acts almost exactly like the <P> tag (except that it doesn't insert a return). Entire sentences, paragraphs, and even lists and headers can be a single hypertext link. Although this would be unsightly and bad HTML design, it is possible.
You can also include links within nearly all other HTML container tags. Even emphasis tags, such as <EM> and <B>, can accept an entire anchor container within their confines; they still allow the hypertext link to be created and the descriptive text to be emphasized. The following section shows how this might work.
The first, most obvious example of using emphasis tags and hyperlinks involves emphasizing the descriptive text of the link within the <A> tag itself. What if you need to create a link that is also the title of a book and that, as such, must be italicized? You could actually do this in either of the following two ways:
<A HREF="book1.html"><I>The Young and the Dirty</I></A>
<I><A HREF="book2.html">The Old and the Unkempt</A></I>
Either method is acceptable, although the first probably makes a bit more sense to someone viewing your source document.
As usual, the best practice is to finish inside tags first and then close off outside tags. In the first example shown earlier in this section, the closing </I> tag should come before the </A> tag, because the italics tag is the interior tag and the <A> tag is acting as a container for the entire line.
The <EM>, <STRONG>, <BOLD>, and <TT> tags can be used the same way with hypertext links. The <U> (underline) tag, although legal, is redundant, because most browsers display hyperlinks by turning them a different color and underlining the descriptive text.
Hyperlinks can appear within the confines of any of the container tags that this book has described so far. The <PRE> tag, header tags, the special formatting tags (such as <ADDRESS>, <CITE>, and <CODE>), and the <P> tag can contain hyperlinks.
This example shows you a few more ways to use emphasis tags with hyperlinks in an HTML document. For this example, give your HTML template a new name, and type Listing 11.1 between the <BODY> tags.
Listing 11.1 links.html Creating Hyperlinks
<BODY>
<H2>The Page of Links</H2>
<ADDRESS>
Todd Stauffer<BR>
Colorado Springs<BR>
<A HREF="mailto:TStauffer@aol.com">TStauffer@aol.com</a><BR>
</ADDRESS>
<P>On the following pages, I offer a series of <A HREF="
http://www.ncsa.uiuc.edu/demoweb/html-primer.html#A1.3.3";> links </A>
to WWW sites that I think you may find interesting.<BR>
<B>Also, if you haven't yet read <A HREF="
hhttp://home.netscape.com/escapes/whats_cool.html";>
<I>The Cool Links Page</I></A> from Netscape Corp., you can't imagine how much you're missing on the Web.</B></P>
<HR>
<P>The following table will lead you to some of my favorite links on a
variety of topics:
<PRE>
My Favorite Corporate Web Sites By Topic:
<B>Topic Site</B>
Windows <A HREF="http://www.microsoft.com/windows/";>The Microsoft
Windows95 Site</A>
Macintosh <A HREF="http://www.apple.com/">Apple Corp. Home Pages</A>
OS/2 <A HREF="http://www.austin.ibm.com/pspinfo/os2.html">
IBM's OS/2 Warp Web Site</A>
</PRE>
</P>
<CITE>Some of the addresses in this Web site are based on results obtained from the <A HREF="http://guide.infoseek.com/">Infoseek Web Search Pages</A>.</CITE>
</BODY>
When displayed in a browser, all the links should appear properly formatted and ready for the user to click (see fig. 11.1).
Figure 11.1 : Hypertext links formatted with other HTML tags.
In Chapter 10, you saw an example of using the <DL> (definition list) tag to create a better organization for section links within a hypertext document. But, like other types of HTML container tags, HTML lists can easily accept any sort of hypertext link as a <LI> (list item), <DT> (definition term), or <DD> (definition).
Any HTML list type that accepts the <LI> tag to create a new list item can include a hypertext link. An unordered (bullet-style) list can easily accept hypertext links by themselves, as the following example shows:
<UL>
<LI> <A HREF="http://www.microsoft.com/">Microsoft Corp.</A>
<LI> <A HREF="http://www.apple.com/index.html">Apple Corp.</A>
<LI> <A HREF="http://www.ibm.com/index.html">IBM Corp.</A>
</UL>
Or even hypertext links mixed with other text (see fig. 11.2):
Figure 11.2 : Hypertext links in unordered links.
<UL>
<LI> For a discussion of Windows 95, try <A HREF="http://www.microsoft.com/">
Microsoft Corp.</A>.
<LI> Mac users might check out the <A HREF="http://www.apple.com/index.html"> Apple Corp.</A> Web site.
<LI> OS/2 and PC folks: <A HREF="http://www.ibm.com/index.html">
IBM Corp.</A>
</UL>
Adding hypertext links works just as easily with other HTML list types, including ordered (numbered) lists, menu lists, directory lists, and definition lists.
One of the most common reasons for using a combination of HTML lists and hypertext links is to create a table of contents for a particularly long HTML site (or the HTML version of an academic thesis, scientific study, or book). Using nested HTML lists (like those that you created in Chapter 8), you can add different levels of links under each different subject heading in your outline.
Using your HTML template, create a new HTML document and enter Listing 11.2 or something similar (see fig. 11.3).
Figure 11.3 : Using lists and hypertext links to create a table of contents.
Listing 11.2 listlink.html HTML Table of Contents
<BODY>
<H2>The Guidebook to Local Hangouts</H2>
<P>Choose from the following links to jump directly to that section of
the text:</P>
<OL>
<LI><A HREF="intro.html#thanks">Credits</A>
<LI><A HREF="intro.html#unique">What is unique about this guide?</A>
<LI><A HREF="intro.html#included">Included clubs</A>
<LI><A HREF="intro.html#ratings">How the rating system works</A>
<LI><A HREF="guide.html#general">Type of Club</A>
<UL>
<LI><A HREF="guide1.html#sports">Sports Bars</A>
<LI><A HREF="guide1.html#country">Country (& Western) Bars</A>
<LI><A HREF="guide.html#alternative">Alternative Bars</A>
<LI><A HREF="guide.html#rock">Album/Hard Rock Clubs</A>
<LI><A HREF="guide.html#jazz">Jazz & Classic Blues Bars</A>
<LI><A HREF="guide.html#oldies">Big Band/Classical/Torchsong Bars</A>
<LI><A HREF="guide.html#pool">Pool Halls</A>
</UL>
<LI><A HREF="restaurant.html#general">Type of Restaurant</A>
</OL>
<BR>
</BODY>
A table of contents is a great excuse to use section tags, along with regular URLs, to access parts of remote documents. In the preceding example, the document guide.html contains information on all types of bars in the area, with each section being defined by an <A NAME=> tag. Using the tags enables your Web page users to access parts of the remote document directly.
Now you know that you can place a hypertext link inside nearly any other HTML container tag, and you know that different tags work well inside the anchor tag. But what about graphics?
Graphics work as well as just about all other types of HTML tags. Simply by placing an <IMG> tag inside an anchor tag, you create a clickable image, which can substitute for the descriptive text in a link.
Consider the following example:
<A HREF="http://www.fakecorp.com/"> <IMG SRC="biglogo.gif" ALT="Bigcorp"></A>
Notice that the example doesn't include any sort of descriptive text in the link. If a user's graphical viewer can support this type of image, the link displays the graphic, with a colored border. Clicking the image sends the browser to the associated link. If the user isn't viewing this page with a graphical viewer, he or she sees the ALT text, which works as a hyperlink.
If you want, you can include text inside the anchor container, as follows:
<A HREF="www.fakecorp.com/"> <IMG SRC="biglogo.gif" ALT="Bigcorp">
Go to BigCorp's Web Site</A>
The descriptive text is displayed right next to the graphic image, and both the text and image are hyperlinks (see fig. 11.4).
Figure 11.4 : A clickable image and a clickable image with descriptive text.
Another interesting use of lists and hypertext links features the <DL> list, with an interesting twist. This example throws in thumbnail versions of some graphics that suggest what the links access. The user can access a link by clicking the associated graphic.
This example shows a popular HTML menuing format; it offers a low-bandwidth way to offer a visual reference for a database-style Web site. On a page such as this, you could list artwork, movie reviews, other Web sites, a company's products, a list of people, screen shots of computer programs, or just about anything else graphical.
Create a new HTML document from your template, and then enter text and tags according to the example in Listing 11.3.
Listing 11.3 linkmenu.html Creating a Graphics Listing
<BODY>
<H2>Suggested Search and Directory Pages</H2>
<P>Ready to Search the Net? Click the associated icon to jump to that
particular Web search page.</P>
<DL>
<DT><A HREF="guide.infoseek.com"><IMG SRC="infoseek.gif"> The Infoseek
Engine</A>
<DD>Infoseek offers a broad range of searching and directory options, and
is a fine place to start your search on the Web. It's also possible to
search other services, like UseNet and Classifieds. <I>Tip:</I> For best
results, put proper names or complete phrases in quotes, like "Microsoft
Windows".
<DT><A HREF="www.yahoo.com"><IMG SRC="yahoo.gif"> The Yahoo Directory</A>
<DD> Widely regarded as the earliest attempt to organize the Web, Yahoo
remains a formidable directory of links to useful sites. Searching isn't as comprehensive as some others, but the directory is the main reason to use Yahoo, anyway.
<DT><A HREF="www.lycos.com"><IMG SRC="lycos.gif"> The Lycos Search Engine</A>
<DD> Image isn't everything, and Lycos doesn't give the prettiest search
results. But if you're comfortable with relatively plain listings, Lycos
offers one of the larger databases of Web Sites available.
</DL>
</BODY>
This is an attractive way to organize thumbnail graphics into menus and so versatile that you'll find plenty of uses for this style of presentation (see fig. 11.5).
Figure 11.5 : Creating a clickable graphic menu.
Wrapping a hypertext anchor tag around a graphic allows you to
do something else with graphical links: create clickable menu
bars. You'll see this style of interface used frequently on the
Web. Menu bars are generally designed to allow you to access the
most frequently sought pages or commands on a Web site. By lining
up your graphical hyperlinks, you can create your own menu bars.
| Tip |
The key to a good menu bar is creating graphical buttons of uniform height. |
You start by creating a couple of button images in a graphics applications. Save the images as GIF or JPG files. Then create the menu bar in a new HTML file (see Listing 11.4).
Listing 11.4 menubar.html Creating a Graphical Menu Bar
<BODY>
<A HREF="http://www.fakecorp.com/index.html"><IMG SRC="home_button.gif"
ALT="Back to Home"></A>
<A HREF="http://www.fakecorp.com/products.html"><IMG SRC="prod_button.gif"
ALT="To Products"></A>
<A HREF="http://www.fakecorp.com/about.html"><IMG SRC="about_button.gif"
ALT="To About Bigcorp"></A>
<A HREF="http://www.fakecorp.com/service.html"><IMG SRC="serv_button.gif"
ALT="To Service"></A>
</BODY>
Remember that HTML isn't sensitive to spacing and returns, so, although each of these links is on a separate line in the example (just to enhance readability), the graphic buttons are displayed next to one another without spacing (see fig. 11.6). You've created a graphical menu bar for your Web site.
Figure 11.6 : A sample menu bar, created with clickable graphic links.
Chapter 12, "Clickable Image Maps and Graphical Interfaces," goes into further depth about creating a graphical interface for your Web site.
The HTML isn't any different for this example, but it shows something
else that you can do with graphical links: add custom controls
(such as clickable arrows) to your Web site.
| Note |
Some great places to get public-domain clickable graphics on the Web include the following: http://www.widomaker.com/~spalmer/ You can check for other sites at Yahoo's icon pages: http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Icons/ |
Start by either creating some arrow controls that you want to use or downloading them from a public-domain graphics site on the Web. Then save your template as a new document, and enter HTML text similar to Listing 11.5.
Listing 11.5 controls.html Having Controls
<BODY>
<PRE><A HREF="index.html"><IMG SRC="left_arrow.gif"></A>
<A HREF="product2.html"><IMG SRC="right_arrow.gif"></A></PRE>
</BODY>
The <PRE> tag is used in the example just to offer a little space between the two graphics; the arrows look better that way. Although the example places only the arrows between the <BODY> tags, you have probably much more to say, but the arrows tend to be attractive at the top of the page. Some people duplicate the arrows at the bottom of the page so that users can move on after reading everything.
You'll have to have a fairly strong organization to your pages to make the arrow graphics work. If people are supposed to move through your site page by page, using the arrows is a great idea. If your site is a little more relaxed, the arrows may only confuse people. You can always use only the left arrow to provide a link back to your index or main page.
You don't need to remember anything special about transferring multimedia files across the Internet, except for the fact that you need to use the correct transport protocol. In most cases, that just means using the http:// protocol for transferring files that you expect the browser to hand off to a helper application.
You could easily send a multimedia QuickTime movie, for example, from your Web page with the following link:
<A HREF="http://www.fakecorp.com/todd/vacation.qt">Click to see my
vacation movie (218K)</A>
By the same token, you could use a relative link to the multimedia file, using the <BASE> tag or putting the multimedia file in the same directory as the HTML document that includes the link, as follows:
<A HREF="vacation.qt">Click to see my vacation movie (218K)</A>
| Tip |
It's good netiquette to include an estimate of the size of multimedia files, so that modem users can decide whether to spend time downloading the files. |
Using what you've learned about clickable graphics, it's just as easy to include a small single-frame graphic clip of your QuickTime movie in GIF or JPEG format to use as your link, as follows:
<A HREF="vacation.qt"><IMG SRC="vacation.jpg" ALT="My Vacation Movie"> (218K)</A>
Although you can send multimedia files by using the ftp:// protocol, some browsers interpret this as an attempt to download the file to the user's computer without invoking the associated helper application (or displaying the file with the browser's built-in abilities).
Suppose that you have a graphics file that you want to display at full size in the browser window, instead of embedding the image in an HTML document. Create the following link:
<A HREF="http://www.fakecorp.com/todd/photo.gif">Click here to see the full 512x240 image</A>
This link sends the graphic over the Web to the browser. The browser then attempts to display the full graphic in the browser window.
Now suppose that you use the FTP protocol instead, as shown in the following example:
<A HREF="ftp://ftp.fakecorp.com/todd/photo.gif>Click here to see the full
512x240 image</A>
In most browsers, the user is prompted for a directory and filename to give the file when it arrives. The file then is saved to the user's hard drive but not displayed automatically.
In fact, such is the case with most multimedia files. The HTTP
protocol suggests to the browser that it should display the file,
if possible, or pass the file on to a helper application. The
FTP protocol, on the other hand, causes some browsers simply to
save the file to the hard drive.
| Note |
The FTP protocol doesn't always cause browsers to simply save the file. One notable exception is HTML documents themselves. Often, an FTP server can successfully serve HTML documents to a Web browser, which then displays the documents in the browser window. |
This chapter took some of the things that you've learned about hyperlinks, graphics, and hypermedia links and rolled them into one. Most of this material isn't new, but most of the ideas for using them are.
You can include hypertext links within most other HTML markup tags, or you can use HTML emphasis tags to mark up the descriptive text of most hypertext links. Remember to keep things organized and mark up your anchor text only for a good reason. Using lists, for example, you can create a table of contents that makes getting around a text-heavy site much easier.
When you put graphics and hypertext links together, ideas start to explode. You can create graphical menus, employ clickable menu bars, and add custom controls to your Web pages. Clickable graphics (especially thumbnail-style images) are among the easiest and most satisfying ways to enhance your Web site.