A link is a clickable element on your page that takes you to another page or to a resource such as an image or a music file. The 'anchor' tag <A> with a location is what's used to create a link. Here is the syntax... 

<A href= "location to go to" name="" target="">what the user sees< /A>

HREF

The URL of the resource to load. This may be a fully qualified url address such as "http://www.someaddress.com" or a relative address such as "../../somedirectory/somefile.htm". A note about the location, if you want to go to a page on a different site than your  page, you must give the fully qualified url address. Simply putting "anotheraddress.com" will result in trying to bring up the "anotheraddress.com" page (which won't exist) from the current site, because it will look like a relative address.

name

Bookmarking name of the anchor.

target

The window that the resource will open into. Values are '_blank', '_self', '_top', or '_parent'.

None of the attributes are required. However, if you don't give the HREF attribute, you will not be able to click on the link.

Here are some examples...

<a href="http://www.google.com" 
target="_blank">Google Search Engine</a>

Which looks like

Google Search Engine

Notice the fully qualified url which means I'm going to another site. If you click this link, it will open a new browser window and go to the Google site. That's because the TARGET attribute is '_blank'. If the TARGET attribute was not given, then it would just replace this page with the Google site page.

Example number 2...

<a href="leaves.jpg">Image of Leaves</a>

Which looks like

Image of Leaves

Notice now that the url does not have the http:// so it is relative. That means the browser will look for the file here, where this page located. If you click this link, it will go to the autumn leaves image.

Example number 3...

<a href="leaves.jpg">
  <img src="leaves.jpg" width="75" height="75">
</a>

Which looks like

Notice that I used an image to click on instead of words. If you click the image, it will go to the autumn leaves image.

The HREF attribute could also go to someplace else in the document that it's in. Suppose you want the user to stay on your page when the link is clicked....maybe because you're not done with the page they should go to yet. Use <A href="#">. Now suppose you want the user to go to a different spot on the  page. First, you need to mark where you want the user to go. For that we use a named anchor with no href.

<A name="bookmark1"></A>some html.

<A href="#bookmark1">Go To Some HTML</a>

As an example, I've marked the exercise section of this page with the "1" anchor id. Now I can use

<a href="#1">Exercise</a>

to access it.
Try this link... Exercise

Normally, link text is shown underlined and blue, but you can change this with the SYTLE attribute. For example....

<a href="#"
style="text-decoration:none;font-weight:bold;color:red">
a mysterious link</a>

Looks like this...  a mysterious link

Images as links

As shown in Example 3 above, you can make an image link by surrounding an image element with an anchor...

<a href="#"><img src="someimage.gif"></a>

Just be aware that some browsers like Netscape will underline the image in blue when you make it a link. To remove it, use border="0" attribute on the image.

There is another way of creating an image link, that is by using a client-side image map. This is beyond the basics so I'll just give a short definition and leave it up to you to learn more. Consult the html links section of this tutorial for links to more advanced topics.

A client-side image map is an area of an image that you specify to be clickable. You use the <MAP> tag to specify the area and <A> with href to specify the location the link goes to. This is useful if you have a large (in area) image containing multiple smaller images that you want as links to different locations. If not for image maps, you would have to cut the large image into several smaller images to use as links. 

Next >>