To do this we will be using 'HyperLinks'.
In order for a 'Link' to work properly, the source must be correct:
IE: The <A> Anchor tag and the </A> Anchor closing tag.

Once you start the Anchor, then you need to reference it to a particular place where you want the link to jump to. The tag will be:

Here are some ways to use the 'Hyperlinks' (note: all examples will be in the boxes).

back to top

To another document on the same Server

For example, if you are a Geocities citizen and you want to link to another page in Geocities:
The link will consist of:

• the anchor and reference = <A HREF=
• the page = eg: SiliconValley/Lakes/3055
• some text to name the link = eg:Visit Websisters Page
• the closing tag = </A>

<A HREF="/SiliconValley/Lakes/3055">Visit Websister's Page</A>

Will look like: (place your mouse over the link and look at the status bar at the bottom of your browser)

back to top

To another document on a different Server

If you want to include a link to another page that is not on the server where your page is, the link reference link would then have to include the http:// prefix:
example:

• the anchor and the reference = <A HREF="http://
• the page = www.yahoo.com
• some text to name the link = Visit Yahoo!
• the closing tag = </A>

Will look like: (place your mouse over the link and look at the status bar at the bottom of your browser)

back to top

To another document in your Directory

Created alot of pages? If they are all in the same directory then we can link them together like this.
All we need to do is put the name of the 'file' into the link:

• the anchor and the reference = <A HREF=
• the page = intro.html
• some text to name the link = Go to the Introduction page
• the closing tag = </A>

<A HREF="intro.html">Go to the Introduction page</A>

Will look like: (place your mouse over the link and look at the status bar at the bottom of your browser)

back to top

Within the same page

If you are wanting the viewer to be able to 'jump' within the document, then two tags will be used:
The Reference code tag (with the # sign to distinguish it is a 'codename'), and the Reference name tag (the destination of the 'jump').
For example, say we wanted some way for the viewer to get back to the top of the page without having to use the 'scrollbar'. First we will do a reference 'code' link:

• the anchor and the reference = <A HREF=
• the place to jump to (this will also be your 'name') = #top
• some text to name the link = Go to the top
• the closing tag = </A>

<A HREF="#top">Go to the top</A>

Place this where you want the link to be accessible (eg: the bottom of the page)

Then we do the reference 'name' tag:

<A NAME="top"></A>

Using this tag will not make a link, it is a base for the reference 'code' tag so it knows where to go.

Will look like:

I have put the source <A NAME="top"></A> at the top of the page in the document source, so if you clicked on the below link you will be taken back to the top of this page.
Click on the example in the box, then when you get to the top, click on 'SAME PAGE' and you will be returned.

The 'mailto' link

If you are wanting to include a link so an Email Window will pop up and your visitor can send you an Email, the link reference will be the same yet the label will be different:

• the anchor and the reference = <A HREF=
• the label = mailto:
• your email address = eg: yourname@somewhere.com
• some text to name the link = Email Me
• the closing tag = </A>

<A HREF="mailto:yourname@somewhere.com">Email Me</A>

Will look like: (click on the link to see what I mean)

back to top

The 'newsgroup' link

Have a newsgroup (usenet) that you would like to link to?
The same link reference again, but this time we will use the news: instead of the mailto::

• the anchor and the reference = <A HREF=
• the label = news:
• the newsgroup address = eg: comp.infosystems.www.authoring.site-design
• some text to name the link = Web Site Design Newsgroup
• the closing tag = </A>

<A HREF="news:comp.infosystems.www.authoring.site-design">Web Site Design Newsgroup</A>

Will look like:

back to top

Using a Graphic as a link

If you are wanting to use a Graphic as a link, then you will need to include the 'anchor reference tag' and the 'img src' tag together with the closing 'anchor tag'.
For example, say I had an image called 'palette.gif' (the width of the image is 64 pixels and the height is 37 pixels) and I wanted to use this as my link to my Graphics page (graphics.html).
The following source would be: (note: adding BORDER="0" to the <IMG SRC> tag will take away the link border around the image)

<A HREF="graphics.html"><IMG SRC="palette.gif" WIDTH=64 HEIGHT=37 ALT="click here to go to my graphics page"></A>

Will look like: (place your mouse over the graphic)

without BORDER="0"	with BORDER="0"

It is also a good idea to place a 'text' link with it as well (especially if it is just an image with no text on it):
eg, to have the text below the image:

<A HREF="graphics.html"><IMG SRC="palette.gif" WIDTH=64 HEIGHT=37 BORDER="0" ALT="click here to go to my graphics page></A><BR>
<A HREF="graphics.html">GRAPHICS PAGE</A>

Will look like:

GRAPHICS PAGE