The link tag is <a
href="mylink.html"> CLICK
HERE FOR MY LINK </a>
The "a href="
tells the browser to goto another document
when the link word or image is clicked
by a user. For instance, at the bottom
of this page, the red underlined words
will send you back to the mainpage.
Here the "a href=" is telling
the browser to goto "htmllessonstart.html",
which is the document of the table of
contents for this HTML tutorial. So
as in the "img src=" command,
the name in between the following quotation
marks can correspond to any valid document
and location. CLICK HERE FOR MY LINK
The "a href=" tells the browser to goto
another document when the link word
or image is clicked by a user. For instance,
at the bottom of this page, the red
underlined words will send you back
to the mainpage. Here the "a href="
is telling the browser to goto "htmllessonstart.html",
which is the document of the table of
contents for this HTML tutorial. So
as in the "img src=" command, the name
in between the following quotation marks
can correspond to any valid document
and location. ">
The words following <a
href="mylink.html"> are
those displayed, and which when clicked
transfer the user to the new page. </a>
simply ends the command so that only
those words in between can be clicked.
For instance the "RETURN
TO THE MAINPAGE" link at the bottom
of this page has the following HTML
source:
<a href="htmllessonstart.html">RETURN
TO THE MAINPAGE</a>
What is a Hyperlink?
A hyperlink is text or
an image in a web page that you can
click with your mouse to perform one
of several actions. These actions include:
Moving you to a different
web page on the same web site or even
at a completely different web site;
Moving you to a different location within
the SAME web page;
Bringing up an image or playing a video
clip or audio clip;
Initiating the sequence to download
a file.
In the case of text, hyperlinks are
easy to spot. Text hyperlinks are usually
a different color (usually blue) than
other text on the page and are (usually)
underlined as well. Image hyperlinks
are often located on "menu bars"
at the top of a web page. An example
of often-used image hyperlinks are "arrows"
that, when clicked, move you to the
next page of a document. Another example
is an icon that looks like a house that,
when clicked, takes the user to a web
site's home page.
You can make any text
or image into a hyperlink. Proper use
of hyperlinks is essential to a good
web site. You will need to make a hyperlink
to every web page, document, and other
related web sites in order for users
to find those items. If you have a document
in your web site but have neglected
to furnish a hyperlink to it, then that
document will be inaccessible!
The Hyperlink Tag
As with formatting text,
creating hyperlinks is achieved by using
HTML tags. Hyperlink tags are a bit
more complex than the other tags we
have covered so far, but the basic concept
is the same--you create a "start"
tag at the point where you want the
hyperlink to be created and an "end"
tag to tell the browser where the tag
ends.
An example of a hyperlink
tag follows below:
<a href="http://www.info.usaid.gov">
Let's break this tag apart
to see what each element does. Of course
the tag starts with a left bracket "<"
and ends with a right bracket ">",
as do all HTML tags.
The letter "a"
at the beginning of the tag stands for
"anchor". That's just tag's
way of telling the browser, "This
is where the hyperlink starts"
(or where the hyperlink is "anchored").
"href" stands
for "hypertext reference".
This is the tags way of telling the
browser, "Whatever follows is what
I want the hyperlink to point to".
Note that there is an equals sign "="
just after this. This equal sign connects
the "href" to whatever follows--whatever
follows the equal sign will be what
the hyperlink points to. Remember, the
hyperlink can point to another web page
within the site, another web page on
a different web site, an image, a sound,
a video clip, or a file to be downloaded.
To restate, whatever follows
the equals sign is what the hyperlink
will point to. This will always be enclosed
in double quotation marks ("xxxx").
In the example we're using, the hyperlink
points to USAID's external web site,
so the web address for that site (http://www.info.usaid.gov)
is placed directly after the equals
sign and is surrounded on both sides
by double quotation marks.
Using the Hyperlink Tag
Now that you know a little
about how the hyperlink tag works, it's
time to see how to use it in a web page.
The hyperlink tag has a "start"
tag, which I detailed above, and an
"end" tag, which turns off
the hyperlink. The "end" tag
for hyperlinks is simply "</a>
(remember "a" stands for "anchor",
so the "</a>" simply
means "Turn off the anchor"--or
"end the hyperlink here").
Whatever appears between
the "start" tag and the "end"
tag will be "clickable" on
that web page. Let's use our sample
HTML file to show how this works. I
am going to add a line of text to the
page that says something about going
to USAID's homepage. I want to make
some of the words in that line a hyperlink
so users can click on the words and
jump straight to USAID's homepage. Below
is the file with the new line of text
added, along with the hyperlink tags.
Please note that I have changed the
wording in the page to something a little
more useful:
<html>
<head>
<title>USAID Mock
Homepage</title>
</head>
<body>
<h1><center>US
Agency for International Development</center></h1>
Thank you for visiting
the US Agency for International Development's
(USAID) fake web site.
<p>USAID is currently
involved in a number of development
projects worldwide. One example is the
Agency's Leland Initiative. The Leland
Initiative is designed to foster increased
Internet access and use in about twenty
African countries. One way the Initiative
is trying to do this is by conducting
an HTML "How To" online tutorial
via the Leland Initiative listserv.
You can find out more about this project
by visiting the <a href="http://199.75.20.211/regions/afr/leland/index.htm">Leland
Initiative Homepage</a>. Or, if
you'd rather write, please send correspondence
to the following snail mail address:
<p align=center>Jeff
Bland<br>
111 Anywhere Street<br>
Anywhere, USA 00000</p>
</body>
</html>
Note that I added a line
about visiting the Leland Initiative
Homepage. The "start" hyperlink
tag (<a href="http://199.75.20.211/regions/afr/leland/index.htm">)
appears directly before the word "Leland",
and the "end" tag (</a>)
appears directly after the word "Homepage".
If you look at this file in your web
browser, you will see that the words
"Leland Initiative Homepage"
are blue and underlined--in other words,
they are a hyperlink. Click on the hyperlink,
and it will take you to the web address
specified in the beginning tag.
Using Hyperlinks As Bookmarks
You can also use hyperlinks
to jump to a different location within
the SAME web page. To do so, you must
first create a "bookmark".
A bookmark is simply a location that
can be located by a hyperlink tag. You
create a bookmark by using the bookmark
HTML tag. An example of such a tag is
<a name="top">. The
image or text that lies between this
type of "start" bookmark tag
and the "end" tag of </a>
will be jumped to when you click on
a hyperlink that references the name
contained within double quotes (in this
case, "top").
The hyperlink tag you
would create to jump to this bookmark
tag would be as follows:
<a href="default.htm#top">
Let's add these examples
to our sample HTML file to show you
how it works. I'm going to create a
hyperlink at the bottom of the page
that, when clicked, will move the user
to the top of the page, as the name
implies:
<html>
<head>
<title>USAID Mock
Homepage</title>
</head>
<body>
<a name="top"><h1><center>US
Agency for International Development</center></h1></a>
Thank you for visiting
the US Agency for International Development's
(USAID) fake web site.
<p>USAID is currently
involved in a number of development
projects worldwide. One example is the
Agency's Leland Initiative. The Leland
Initiative is designed to foster increased
Internet access and use in about twenty
African countries. One way the Initiative
is trying to do this is by conducting
an HTML "How To" online tutorial
via the Leland Initiative listserv.
You can find out more about this project
by visiting the <a href="http://199.75.20.211/regions/afr/leland/index.htm">Leland
Initiative Homepage</a>. Or, if
you'd rather write, please send correspondence
to the following snail mail address:
<p align=center>Jeff
Bland<br>
111 Anywhere Street<br>
Anywhere, USA 00000</p>
<p><bold><center><a
href="default.htm#top">Back
to Top</a></center></bold>
</body>
</html>
Note that I put the "Back
to Top" hyperlink at the bottom
of the page (under the address), while
the bookmark is at the top of the page
(around the heading of the page). Thus,
if you look at this file in your web
browser and click on "Back to Top",
you should jump to the spot in the page
that is bookmarked.
Also note that the word
or words that are bookmarked, unlike
hyperlink text, is not a different color
or underlined.
