Hyperlinking: linking from one page to another

Hyperlinking, or Linking, is the ability to click on a bit of text or an image and have it jump you to another page, or area of a page. This requires both the Opening <A> and the Closing </A> Anchor Tag.

Anchors also must have the HREF= (Hypertext Reference) attribute to work properly:

<A HREF=> </A>

But this tag is still incomplete and will do nothing until you give it a place to link to:

<A HREF="http://www.HTMLclinic.com/example.html"> </A>

Now to give your visitor something to click on, put some text between the opening and closing tag, like this:

Now the tag is complete. Try it here: HTML Help For All

Page Linking Tips

If a page is not on your site put in the web address for the page, like this:

<A HREF="http://www.examplesite.com/index.html">Example Site</A>

If the page is in the same folder use just the filename, like this:

<A HREF="examplepage.html"> Click here </A>

If the page is in a different directory or folder reference that right before the page:

Linking to Downloadable Files

If you want to make a file available for your visitors to download, use the anchor tag with the filename of the file you wish your visitors to grab:

<A HREF="filename.here"> Click here to download the file </A>

Name Anchors: links to areas on the same page

Anchors can also be used to jump to a specific spot on the same page.

Lets' say you have a page about pets, and at the top of this page you want to provide a link down to the area about your dog. Go to the area about your dog and put a Name Anchor around the title or first word of the 'dog' portion:

<A NAME="dog">All about my dog Fluffy:</A>
Fluffy is my dog. He has a tail, 4 legs and likes to bark.

Now go up to the top of the page where you want to put the link to the 'dog' section. Here is the code for the link at the top of the page:

<A HREF="#dog">Click for Fluffy the Dog</A>

Now when you click on the link on the top of your pets page, it will jump right down to the section about Fluffy!

If you are linking to the Fluffy section from a different page you'll have to do this:

<A HREF="animals.htm#dog">Click for Fluffy the Dog</A>

Mailto Anchor: making a link to an email address

If you want the link to jump to sending mail to a specific e-mail address, you have to add "mailto:" to the anchor:

<A HREF="mailto:support@htmlclinic.com">Email Me Now!</A>

Now when you click on this mailto link, it will open your email program and automatically address an email to whatever address you have defined in this tag.

Try it here: Email Me Now!

Image Anchor: hyperlinking to a graphic image

NOTE: If you have not yet read the section dealing with creating image tags you might want to review that tutorial before you begin this one.

Let's say we have a spiffy new graphic and we want to make it clickable so people can use it to go to another page.

Here is the image code:
<IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture" BORDER="0">

Now we have to wrap the Anchor code around it:
<A HREF="folder/page2.html"><IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture" BORDER="0"></A>

If you want to put a border around the picture (border="3"):
<A HREF="folder/page2.html"><IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture" BORDER="3"></A>

If you want to hyperlink from a small version of the image (known as a 'thumbnail') to a larger version, link the small file to the large one:
<A HREF="LargeImage.gif"><IMG SRC="SmallImage.gif"></A>

In this example, clicking on the SmallImage.gif file will open to the LargerImage.gif file.

Now that you have mastered all of the basics of adding content to your pages it is time to start learning how to customize your web page:

~~~~~ On to "Using Tables" ~~~~~