|
Introduction
Below I will discuss
how to create hyperlinks.
Hyperlinks can be either
text or an image. Hyperlinks
can be used to link to
elements in the same page,
other pages and other
objects such as images,
zip files, and sound files.
^^-Return
to Top-^^
Text
Links
To make any type of link,
you will have to use the
<a> tag.
For text or an image link,
you will be using the
<a> tag's
attribute, href.
Here is how you would
make a text link:
Code
<a
href="http://www.jtsdesign.com">J.T.S.
Design</a>
Result
J.T.S.
Design
The <a>
tag is also used to make
email links. Below is
an example on how to make
an email link:
Code
<a
href="mailto:[email protected]">Email
Me</a>
Result
Email
Me
^^-Return
to Top-^^
Graphic
Links
A graphic can also be
used for a hyperlink.
In order to do this, we
will use a combination
of the <a>
tag and the <img>
tag. Here is how you would
do it:
Code
<a
href="mailto:[email protected]"><img
src="../images/sample_email.gif"
alt="Email
Me"
border="0"></a>
Result
^^-Return
to Top-^^
Anchors
Anchors are used to
link to elements within
the same page or to a
specific area of another
webpage. The above subtitle
is an example of an anchor.
When you click on the
"Anchors" link
within the Table of Contents
on the main Web Design
page, it will bring you
to above subtitle.
An anchor consists of
two parts. Each part resides
in a different area. The
first part is the standard
<a href="a
value">a
value</a>.
The second part uses the
name
attribute within the <a>
tag. For the first part,
you would define the anchor
by appending a hashmark
(#) and an anchor name
of your chosing. For the
second part, you would
use the name
attribute to identify
the specific place in
the document that you
would like the link to
go to. For the example
on how to do this, I will
use a table of contents
for explanation.
Code
1. <a
href="#a">Example
A</a><br>
2. <a
href="#b">Example
B</a><br>
3. <a
href="#c">Example
C</a><br>
4. <a
href="#d">Example
D</a>
<p><a
name="a"></a><b>Example
A</b></p>
<p>This
is Example A ...............................
.................................................................
.................................................................
.................................................................
</p>
<p><a
name="b"></a><b>Example
B</b></p>
<p>This
is Example B ...............................
.................................................................
.................................................................
.................................................................
</p>
<p><a
name="c"></a><b>Example
C</b></p>
<p>This
is Example C ...............................
.................................................................
.................................................................
.................................................................
</p>
<p><a
name="d"></a><b>Example
D</b></p>
<p>This
is Example D ...............................
.................................................................
.................................................................
.................................................................
</p>
Result
1. Example
A
2. Example
B
3. Example
C
4. Example
D
Example
A
This is Example A ...............................
.................................................................
.................................................................
.................................................................
Example
B
This is Example B ...............................
.................................................................
.................................................................
.................................................................
Example
C
This is Example C ...............................
.................................................................
.................................................................
.................................................................
Example
D
This is Example D ...............................
.................................................................
.................................................................
.................................................................
That is how you would
link to elements within
the same page. To link
to a specific place on
another page, you would
use the same format but
with the pages name included.
Let's say that you had
a page called toc.html.
On that page, you had
links to a page called
examples.html which had
four different examples
on it. To link to that
page, you would define
the anchors on the toc.html
page and name them on
the example.html. Here
is what the toc.html code
might look like:
Code
1. <a
href="example.html#a">Example
A</a><br>
2. <a
href="example.html#b">Example
B</a><br>
3. <a
href="example.html#c">Example
C</a><br>
4. <a
href="example.html#d">Example
D</a><br>
Result *Note
- These links don't work
1. Example
A
2. Example
B
3. Example
C
4. Example
D
|
