Hypertext
links
A powerful feature of HTML is its ability
to link text and/or an image to another web page or
a different part of the same page (known as a hypertext link).
As a rule, no web page should be so long that the reader
has to constantly scroll up and down to find the information
they require. If it is possible to break a page into
more easy-to-digest sections then please do so! (a good example
is this tutorial series).
To create a hypertext link the <A>
... </A> tags are used.
Whatever appears between these tags becomes the hypertext
link (plain-text, image etc.). The destination of the link is determined
by its unique URL address (Uniform Resource Locator
- every web page has one). If the Web page you are linking
to is in the same directory as the current page, only
the file name is required.
<A HREF="index.htm">Goto INDEX.HTM</A>
However, if you are linking to a web
page somewhere other than the directory of the current
page, the full URL address should be used.
<A HREF="http://www.myatari.net">
Goto MyAtari magazine</A>
To create a hypertext link to an E-mail
address, all you need to do is substitute the URL address
for the E-mail address, like so...
<A HREF="MAILTO:info@myatari.net">E-mail me</A>
Hypertext link using text
<HTML>
<HEAD>
<TITLE>Hypertext link example</TITLE>
</HEAD>
<BODY>
Click <A HREF="index.htm">here</A> to goto INDEX.HTM
</BODY>
<ADDRESS>
This page was written by
<A HREF="MAILTO:info@myatari.net">Matthew Bacon</A>
</ADDRESS>
</HTML>
Hypertext link using an image
<HTML>
<HEAD>
<TITLE>Hypertext link example</TITLE>
</HEAD>
<BODY>
Click on the image below to goto INDEX.HTM
<A HREF="index.htm"><IMG SRC="logo.gif"></A>
</BODY>
<ADDRESS>
This page was written by
<A HREF="MAILTO:info@myatari.net">Matthew Bacon</A>
</ADDRESS>
</HTML>
When you link to another web page,
the browser automatically links to the top of the destination
page. However, you may not always wish to do this! To
link to a specific place within a page, the following
HTML code needs to be included in the destination web
page. This is called an anchor.
<A NAME="top"></A>
You can include as many of these anchors within
a page as you wish. However, when creating anchors please
remember that each anchor needs its own unique name and
that the name is case sensitive! (i.e. "TOP" is not the same as
"top").
The example below shows how to link
to an anchor within the current web page. The anchors name used is, "top".
<A HREF="#top">
... </A>
The example below shows how to link
to the anchor, "top", within the page "INDEX.HTM".
<A HREF="index.htm#top">
... </A>
As an example, at the start of this
pages HTML source code, an anchor called "top"
can be found. The following example links to this anchor.
Go on - try it and see!
Click here
to jump the top of this page. |
![[ MyAtari Advert ]](images/banner.gif)
