Full Page for Printing
Anchors and Links
The real excitement of the World Wide Web, in addition to the pleasure of
creating an attractive, informative Web page, is the ability to connect,
almost seamlessly, with people, places, and information all around the
world. Few, but the most jaded Web surfers, don't feel a certain tingle
when they see those magical colored and underlined words and phrases which
signal a hot link to another location.
Links
The hyperlink in the last paragraph, which only brought you to the above
title, illustrates the HTML reference connection: anchor to
target. Links, or hyperlinks, are the
colored/highlighted and/or underlined words and phrases found scattered
throughout most HTML documents. They are coded connections to locations
within the same document, to other documents or locations which can be
found on the same computer or server as the document, or to documents or
locations on another computer halfway around the world.
Anchors
The <A>...</A> container tag is called the
anchor. It is seldom used without an attribute -- a command
or commands which are placed inside the opening tag and which defines the
task of the tag pair. [Earlier, you used an ALIGN="__" attribute within
the heading and paragraph tags to place these elements in the center or
along the right margin.]
The general syntax for an anchor is
<A ATTRIBUTE="target"> Highlighted Text</A>
The opening tag consists of two parts separated by the = sign. The two
command attributes are HREF="__" and NAME="__". HREF is a "hyperlink
reference" to a target -- the location of the reference. NAME is a marker
in a target document -- usually a section of the same document (as in the
hot link hyperlink in the first paragraph), but it can refer to a
specific section of another document. Thus, HREF="target" is a "go to
target" command -- where target may be a document and/or a NAME="spot",
which is a specific location within a document.
Anchors and links can be used to move around in the same document. This is
useful in a long text document. A menu or table of contents at the top can
be linked to a specific location inside the document. Click on the
highlighted link and the browser scrolls to the appropriate place. This is
the method used in this document: The "table" at the top contains a number
of HREF="#__" locations -- or anchors -- which link to NAME="__" markers
within the document. In addition, after each section, a linked, "Back to
the top" HREF returns the user to the NAME="TOP" marker at the top of the
document.
To create a NAME marker, determine the point in the document to
which the link will connect. Then place a NAME="__" anchor tag pair
preceding that point. In this document,
<A
NAME="ELEVEN-1"></A>
was placed before the title of
the second paragraph in this section and anchored to<A
HREF="#ELEVEN-1"> hot link</A>
which was
included in the opening paragraph.
Don't forget the "quote" pair around the target. It's easy to miss
one or the other as target names get longer and longer. Most browsers will
completely skip the anchor command if even one quote is missing. And
that's a miserable proofreading task -- trying to find an open quote
container.
While the NAME marker may be any case -- upper, lower, or initial cap --
the HREF and the NAME must match exactly -- except for a # sign
which is explained below. [An aside: A good practice is to label
markers as alpha-numbers (rather than try to remember unique words),
starting at the top of the document, and to use all caps (to distinguish
between markers and document or file targets) -- #ONE...ONE,
#TWO...TWO...etc.] All anchors are containers and must be closed with the
slash tag </A>.
There are two kinds of references, or location markers: One is "absolute,"
where the reference includes the full Universal
Resource Locator -- the service name, the server, directory path, and
filename. The other is "relative," where the reference is only a filename.
All HTML files have either .htm or .html extensions.
The simplest HREF target is a NAME="#spot" in the same
document as the link:
<A HREF="#ONE"> Short Descriptive Title</A> [Notice the #
or "pound" in "#ONE." That tells the browser to look for a NAME marker,
not a document or a file named "ONE."]
The Text of the Link: In order to create the
colored/highlighted/underlined hyperlink, some text must be placed within
the container. The best links use text which flows naturally from the
context of the document or from the purpose of the link. For example,
notice the words in the following link:
. . .those magical colored and underlined words and phrases which signal a
hot link to another location.
Avoid
the temptation to use click here. Not all users are using a mouse
to maneuver in the browser, and after awhile you will have a document
peppered with here, here.
Additional Targets: Only slightly more complex is a target
document stored in the same location as the active document. For
example, all of the documents in this series are stored on the same
computer in the same directory. Thus, the following anchor points to
another document in this directory:
<A HREF="details.html"> HTML Details</A> [Notice that there
is no pound sign in this target, and that the target is a filename with
the extension (dot) html.]
It is also possible to point to a marker in another document: <A HREF="details.html#ONE"> Tags in
General</A> points to section "ONE" in the document
details.html.
Probably the most complex target structure involves a document in
another directory on the same computer:
<A HREF="/directory/filename.html"> Name of
Document</A>
In this structure, /directory is a sub-directory of the active
file's directory. To change to a parallel directory, omit the leading
slash -- directory/filename.html. These operations require
knowledge of the path structure of the server. Check with your system
administrator or see
Creating a Page on Monon
or the MCCSC Internet
map for further
information.
Actually, understanding the complexity of the server-path structure
probably over-complicates pointing the browser to the above directory and
document. A much simpler solution involves using the complete address of
the document -- what is commonly referred to as the Universal Resource
Locator.
Getting a Handle on URL
While the ubiquitous
http://www.something.com:8000/directory/filename.html#ONE appears
quite forbidding and complicated, making a hyperlink to a remote document
is only slightly more complicated than connecting to a document in the
same location, and incredibly simpler than trying to determine the path
structure of your own server.
If you read the above address from the right, you will recognize
elements which you have already examined: #ONE is a marker,
filename.html is a document. These are generally described as the
resource in the pointer structure called Universal Resource
Locator. URLs are the method by which the browser finds resources
on the local computer or network and on the Internet and the World Wide
Web. Technically, each of the simple anchors in the previous paragraphs
constitutes a URL. Actually, most users think of the long http://
structures as examples of URLs.
The standard syntax for a URL is as follows:
servicename://internethost:portnumber/resource
There are three parts to this syntax:
The Service Name, followed by a colon and two slashes --
There are seven (7) Internet services, the most familiar being
http, and a local service.
The Internet Host Name, followed by an optional colon,
portnumber and a single slash -- This is the "domain" or name of the
computer and the owner of the computer providing the remote connection.
The optional portnumber is one of the domain's methods of routing the
service requests. Often this is transparent to the incoming request and
not often required in the address.
The Resource completes the URL -- The simplest resources are
the targets (markers and filenames) described above.
Often the actual resource is preceded by an additional location -- a
directory or series of directories, each followed by a single slash.
Sometimes it makes it clearer if the additional location is thought of as
extensions to the Internet Host Name rather than part of the
Resource.
Thus the URL for an individual's home page might be as follows:
| Service Name | Internet Host Name | Resource |
| http:// | www.mccsc.edu/~czager/ | carl.html |
The URL is typed with no spaces from beginning to end and inserted into an HREF anchor as follows:
<A HREF="http://www.mccsc.edu/~czager/carl.html"> Carl's Home Page</A>
/~czager is a directory at the MCCSC Internet Host. The ~ (tilde)
means that other directories in the path will be inserted by the host
computer (making them transparent to the requesting browser). A
~directory usually belongs to an individual rather than to the
organization.
Other Service Names and Uses
There are seven Internet services and a local service which can be accessed through URLs on the World Wide Web:
| Service | Description | Example URL | Comments |
| http:// | documents available from a WWW server | http://www.mccsc.edu/ | MCCSC Learning Network |
| ftp:// | Internet File Transfer Protocol | ftp://ftp.winsite.com | software repository |
| telnet:// | remote login to another computer | telnet://monon.mccsc.edu | MCCSC e-mail -- POP client |
| gopher:// | textual, menu-driven information service | gopher://marvel.loc.gov/ | Library of Congress |
| wais:// | indexed databases with keyword searching | wais://info.curtain.edu.au:210/k-12-software/ | -- WAIS client |
| news: | UseNet -- NetNews service | news:usenet.ucs.indiana.edu/ | -- news access |
| mailto: | allows user to send mail to page | mailto:czager@mccsc.edu | -- POP client |
| file:/// | reads documents from local files | file:///A:/mccscdoc/details.htm | a file on drive A:\ |
Oh, oh! Note that news: and mailto: have no
slashes, and that file:/// has three slashes! Those
services don't require the slashes, but the third slash in file tells the
browser that it's looking for a file, not a server. [Remember the #spot
from the marker section.] And where's the "l" in the file:///
filename? That file is stored on a computer which only allows
three-letter extensions; thus, details.htm in file:// but
details.html in an http://.
Check with your system administrator to be sure that there are "clients"
-- programs which provide the service -- for each service you'd like to
use.
Back to...TOP 
Back
to...Designing Web Pages
Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@.mccsc.edu