| Links Here
we'll see how to make hyperlinks with text.
To see how to create hyperlinks with images,
select this link: images.
If there is
something idiosyncratic about an HTML document is its
capability of including links to jump for one place to
another inside the same document, or to go to a different
HTML document. In this page you have information on how
to create links inside the document and to other HTML's.
Two elements, anchors and links,
will help us to do just that.
- Anchors:
Anchors
are places you mark inside the HTML. By naming a
place in a document, you can refer to it from a
link in the same document or from another
document; that is, when the user clicks on the
link that refers to that anchor, the page will
jump to the document and location specified by
the anchor. To specify an anchor, type this in
the place you want to have the anchor:<A NAME="name_of_your
anchor">Text, image, etc.:
your chosen location
The
second element you need to include is the actual
link.
- Links:
Links usually are showing as underlined words,
which change the cursor into a little hand when
you place it over them.
Links are also created with the <A> tag,
but adding the HREF property
instead of NAME. With HREF we
indicate the URL we want the
page to jump to. For example,
this line of code creates a link with the word
Netscape underlined that directs the user to the Netscape web
page:Select
this link to get Netscape Communicator:<A
HREF="http://www.netscape.com">Netscape</A>.
So, in
this example, the word "Netscape" would
show underlined in your web page. It is very
important to close the <A
HREF> tag
with the appropriate </A>
tag;
otherwise, the rest of the document would show as
a continuos link.
- Linking
to an anchor inside the same document:
As explained above, in order for you to jump from
one document to a specific place of an HTML you
need to create an anchor that
marks the destination place. For instance, in
this web page that you are reading, I included an
anchor named top by the heading
"Links." If you select this link now,
the page will jump to its top: jump!.
(Click "Back" on your browser to return
here).
But I also needed to create the link for the word
jump!, and I did it using this
line of code:...this
page will jump to its top:<A
HREF="#top">jump!</A>.
You can
see here that the <A
HREF> tag has
another element: the symbol #, which
is followed by the anchor name (top).
You can also see that the URL for this link is
just the #top
reference. This is a relative URL,
that is, a URL that refers to the same document
it is linking to.
- Linking
to an anchor inside another document:
Very
often, though, you will need to link to other
documents. If you want to link to a document that
you have not created, obviously you cannot
specify anchors to it, since you cannot edit the
original source. In that case, you will have to
provide the full or absolute URL of
the document, like in the
above the example for Netscape.
Linking
within the same directory:
If you have different pages, you may want to
create anchors to link to from other web pages.
In that case, you will have to see where the
document is stored, so you can specify a correct
path for it.
For instance, let's say that you have two pages,
named syllabus.html and calendar.html,
and both are stored under the same directory. You
want to create a link from syllabus.html
to a particular section or anchor of calendar.html.
To do that, first include in calendar.html
the anchor <A
NAME="final">, which
could be placed, for instance, by the exam date
of the final exam. After that, create the link final
exam in syllabus.html
by adding this line of code:
Check the calendar for the
final exam date:<A
HREF="calendar.html#final">final
exam</A>.
You are
indicating in this fashion the relative URL of
the anchor "final" from syllabus.html
to calendar.html without having
to specify the absolute URL of your web page.
- Linking
to another directory:
Let's
assume now that you need to link to one of you
pages stored in another directory. For example,
let's say that calendar.html is
stored in a directory named activities.
In that case, your line of code would be:
Check the calendar for the
final exam date:<A
HREF="/activities/calendar.html#final">final
exam</A>.
One of
the advanges of using this system, that is,
editing the HTMLs with relative rather than
absolute URLs, is that if you need to move all
your pages to a new server with a new domain
name, you won't need to change all the URLs of
your links.
|
