ch11 (10)

Lemur zaprasza

Click here to support our advertisers

SOFTWARE
FOR SALE

BOOKS
FOR SALE

SEARCH CENTRAL

JOB BANK

CLASSIFIED ADS

DIRECTORIES

REFERENCE

TRAINING CENTER

JOURNAL

NEWS CENTRAL

DOWNLOADS

DISCUSSIONS

CALENDAR

ABOUT US

Journal:

Get the weekly email highlights from the most popular online Journal for developers!

developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com

jars.com

All Categories :
HTML

Chapter 11
Using Links with Other HTML Tags

CONTENTS

Using Links with HTML Formatting Tags

Emphasis Tags and Hyperlinks
Example: Hyperlinks in Context
Using Hypertext Links in HTML Lists
Example: An HTML Table of Contents

Creating Graphical Links

Example: A Graphical, Hyperlinked Listing
Example: A Clickable Graphic Menu Bar
Example: Custom Controls

Using Hypermedia Links
Summary
Review Questions
Review Exercises

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.
Using
Links with HTML Formatting Tags

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 
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 
and , 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.
Emphasis Tags and Hyperlinks

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">The
Young and the Dirty</A>
<A HREF="book2.html">The Old and the
Unkempt</A>

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 
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 , ,
<BOLD>, and <TT>
tags can be used the same way with hypertext links. The 
(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 tag can
contain hyperlinks.
Example: Hyperlinks in
Context

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 
Colorado Springs 
<A HREF="mailto:TStauffer@aol.com">TStauffer@aol.com</a> 

</ADDRESS>
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. 

Also, if you haven't yet read <A HREF="
hhttp://home.netscape.com/escapes/whats_cool.html">
The Cool Links Page</A> from Netscape
Corp., you can't imagine how much you're missing on the Web.

<HR>
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:

Topic
Site
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>

<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.
Using Hypertext Links
in HTML Lists

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.
Example: An HTML Table
of Contents

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>
Choose from the following links to jump directly to that
section of
the text:
<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>
 
</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.
Creating
Graphical Links

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.
Example: A Graphical,
Hyperlinked Listing

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>
Ready to Search the Net? Click the associated icon to
jump to that
particular Web search page.
<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. Tip:
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.
Example: A Clickable
Graphic Menu Bar

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.
Example: Custom Controls

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/
http://www.fau.edu/student/chemclub/dave/img1.htm
http://ivory.nosc.mil/html/trancv/html/icons-bsdi.html

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.
Using
Hypermedia Links

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.

Summary

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.
Review
Questions

True or false. Like the 
tag, the anchor (<A>)
tag inserts a return after the closing </A>
tag.
Can you mix hypertext and emphasis tags, and if so, for what
purpose?
What emphasis tag usually is redundant when it's used with
an anchor tag?
Are any HTML list types incapable of accepting hypertext links
as list items?
Is the following link correctly formatted, and what does it
access:

<a href="chapter1.html#parttwo">Ch.1,
Part II</A>

What might the following link be used for, and is this construct
legal?

<A HREF="big_photo.gif"><IMG
SRC="sm_photo.gif"></A>

What happens if a link uses the FTP protocol to transfer a
multimedia file over the Web? Can the user still view or listen
to the multimedia file?

Review
Exercises

Use the <DIR> and
<MENU> HTML containers
to create a list of hypertext links. Notice the differences between
these and ordered and unordered lists in your browser.
Create a "table of contents" style page (using regular
and section links) that loads a different document for each chapter
or section of the document. For example, clicking the link Introduction
would load the file intro.html
into the browser windows. Clicking the link Chapter 1.1
would load the link chapter1.html#section1
and so on.
Create a vertical (up-and-down) menu bar. (Hint: use 
and graphics that are all the same width.) Can you get the images
to touch (and appear seamless) like you can with a horizontal
menu bar?
Using a <DL> definition
list, create a "thumbnails" page of graphics (for a
catalog, for instance). When users click one of the thumbnail
graphics, take them to a product page with a larger graphic and
description of the product. Also, place a graphical button or
arrow on the product page that lets them click to get back to
the thumbnail view.

Use of this site is subject to certain

Copyright (c) 1996-1998
EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.

Please read the .
Contact with questions or comments.

Copyright 1998 Macmillan Computer Publishing. All rights reserved.