HYPERLINKS


This is the part you've been waiting for! This section is going to talk about hyperlinks.

Hyperlinks are direct references to other Web pages. They can be links to other pages on your own site, they can be links to pages on someone else's site, or they can be links to different sections within the same page. I will discuss all of these various kinds of links.


<a href="URL"> </a>
<a href="filename"> </a>
There are two basic flavors to the typical hyperlink. The first one takes a complete URL between the quotation marks, such as http://www.synthcom.com/~emu/. This is called an absolute hyperlink. It should be used when referencing someone else's web pages. The second one takes only a filename between the quotation marks, such as stuff.html. This is called a relative hyperlink. It is used when referencing a web page on youir own site. You can reference files on other directories the same way as referencing images from other directories. For a description of this, see the section on Images and Colors.

You must add text or an image between the <a href> and the </a> tags, this provides something the user can click. For example:

To use text as a hyperlink:

<a href="http://www.synthcom.com/~emu/">Click here!</a>

To use an image as a hyperlink:
<a href="stuff.html"><img src="clickme.gif"></a>


* Note: Be sure to rememeber the quotation marks. Without them, the browser may become confused and your link will be broken.



It is also possible to have links to various positions within a single page. There are two parts to these links. First, you have to create a named link at the point to which you want to jump, then you have to add a hyperlink which the user can click to get to that jump point.

<a name="jump name"> </a>
This is the named link which identifies a point in the file. The name must be between the quotation marks, and is a simple name such as "intro" or "stuff". You must put some text between the <a name> and the *lt;/a> tags, but it is not underlined, the color does not change, it still looks like regular text. The tag is used only by the hyperlink.

<a href="#jump name"> </a>
This is the hyperlink which will jump to the named link whose "jump name" it matches. You muse put some test between the <a href> and the *lt;/a> tags, and it appears like any other hyperlink: the color is changed and it is underlined.




Example


Here are some sample pages to demonstrate the discussed tags.

Sample 9: This page will have a simple table with a border, a caption, and colored cells.

<html>
<head>
<title>Sample Page #9</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF">

This is an absolute hyperlink which will go to
<a href="http://www.synthcom.com/~emu"> the EMU
homepage</a>.<p>

This is a relative hyperlink which will go to
<a href="sample8.html">my Sample Page #8</a>.<p>

</body>
</html>

This is how it would look on a browser.



Sample 10: This page will have a simple table with a border, a caption, and colored cells.
<html>
<head>
<title>Sample Page #10</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF">

<a href="#first">First Section</a><br>
<a href="#second">Second Section</a><br>
<a href="#third">Third Section</a><br>
<hr>

<a name="first"><strong>
Begin First Section
</strong></a><br>
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
<p>

<a name="second"><strong>
Begin Second Section
</strong></a><br>
Peter Piper picked a peck of pickled peppers.
Peter Piper picked a peck of pickled peppers.
Peter Piper picked a peck of pickled peppers.
<p>

<a name="third"><strong>
Begin Third Section
</strong></a><br>
Why did the chicken cross the road?  Because it
really wanted to!
<p>

</body>
</html>

This is how it would look on a browser.


Previous | Next


This page created by Valerie Bradley
Last updated: