developer.com - Reference
Click here to support our advertisers
SOFTWAREFOR SALE
BOOKSFOR SALE
SEARCH CENTRAL
JOB BANK
CLASSIFIED ADS
DIRECTORIES
REFERENCE
Online Library
Reports
TRAINING CENTER
JOURNAL
NEWS CENTRAL
DOWNLOADS
DISCUSSIONS
CALENDAR
ABOUT US
Journal:
Get the weekly email highlights from the most popular online Journal for developers!
Current issue
developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
intranetjournal.com
javascripts.com
All Categories :
HTML
Chapter 10
Hypertext and Creating Links
CONTENTS
Using the <A> Tag
Section Links
Example: A More Effective Definition List
Using Relative URLs
Adding the <BASE> Tag
Example: A Hybrid-Style Web Site
Creating Links to Other Internet Services
Hyperlinks for E-Mail Messages
Other Internet Services
Other Links for the <HEAD> Tag
The <LINK> Tag
The <ISINDEX> Tag
Summary
Review Questions
Review Exercises
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.
Using the
<A>
Tag
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.
Section Links
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.
Example: A More
Effective Definition List
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.
Using
Relative URLs
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.
Adding the <BASE>
Tag
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.
Example: A Hybrid-Style
Web Site
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://).
Creating
Links to Other Internet Services
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.
Hyperlinks for E-Mail
Messages
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>
Other Internet Services
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.
Other
Links for the <HEAD>
Tag
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
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.
The <ISINDEX>
Tag
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.
Summary
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.
Review
Questions
Is HREF a tag or an attribute?
Do local links and distance links look any different when
they are viewed in a browser?
What type of link is <A HREF="#intro">Intro</A>?
Can you tell from the link what document will be accessed?
Is it possible to include HTML markup tags (such as emphasis
tags) inside anchor tags?
What is the purpose of the <BASE>
tag, and in what part of the HTML document does it appear?
True or false. The <BASE>
tag's HREF attribute requires
a relative URL.
Would the following link succeed? (Assume that the e-mail
address is correct.)
<A HREF="mailto://buddy@aol.com">Mail
me!</A>
What two attributes for the <LINK>
tag are discussed in this chapter?
Does the <LINK>
tag create a hypertext link in the browser window?
If your Web server is administered by someone else, what's
the best way to find out whether the <ISINDEX>
tag will do you any good?
Review
Exercises
Create a hypertext link that points to a section of another
document. (Hint: use the URL and a section name, like http://www.fakecorp.com/products.html#clothing).
Don't forget the NAME anchor
in the second document.
Using the <BASE>
tag, change the following so that the URL and image SRC attribute
are relative:
<BODY>
<IMG SRC="http://www.fakecorp.com/images/logo.gif">
<P> Welcome to <A HREF="http://www.fakecorp.com/about.html">BigCorp</A>
on the World Wide Web!</P>
</BODY>
Create a page about your hobbies and interests. (This might
be a great About page for your personal Web site.) On the page,
include links to interesting sites that coincide with your description.
(For instance, if you like sports, you might create a link to
http://www.cnn.com/SPORTS/ for the benefit of your users.)
Use of this site is subject to certain
Terms & Conditions.
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 Acceptable Usage Statement.
Contact reference@developer.com with questions or comments.
Copyright 1998 Macmillan Computer Publishing. All rights reserved.
Wyszukiwarka
Podobne podstrony:
ch10ch10CH10 (17)ch10ch10ch10BW ch10ch10ch10ch10ch10 (21)ch10ch10ch10ch10ch10ch10więcej podobnych podstron