::: Tutorials > HTML

Anchors and Hyperlinks
Using the <a>...</a> tags for hyperlinks and more


Tutorial by Andrew
Sunday March 30, 2003


The <a>...</a> tags allow you to enter either an anchor or hyperlink on your page, depending on what attributes are included within the tag. In general, the <A> tag will be used to link to another page within your web site, another web site, or an anchor (essentially an invisible place holder on your page which can be referred to later).

Creating and using Anchors:

<a name="ANCHOR_NAME"></a>

As you can see, this is a simple tag with only one attribute. The 'name' attribute allows you to define the name of the anchor. You will then use this to call the anchor in a link.

To use an anchor, you will simply create a hyperlink with the address being #ANCHOR_NAME where ANCHOR_NAME is the name of the anchor. If the anchor is on another page, you will then call it by writing in SAMPLEPAGE.HTML#ANCHORNAME.

Creating a Hyperlink:

<a href="URL" target="_TARGET" color="COLOR" style="STYLE" tabindex="TABINDEX" accesskey="ACCESSKEY">LINK DESCRIPTION</a>

The only required attributes for a hyperlink are URL and LINK DESCRIPTION. Below is a description of each of the attributes:

URL - This is the address or page the link points to. If it is within your web site, you will refer to it usually with a relative URL, something along the lines of MYPAGE.HTML or MY_FOLDER/MYPAGE.HTML. You may also use absolute links such as HTTP://WWW.MYURL.COM/.

_TARGET (Optional) - Used for defining a specific frame for the page to be loaded in. This is mainly used with framesets. You can also use _blank to open the link in a new window or _parent to open it in the parent window.

COLOR (Optional) - Define the color of the link. It is better if this is not set as it will use the default colors on the page or stylesheet. Enter either the hex color (#000000) or shortcut (blue).

STYLE (Optional) - Set a stylesheet class for the object.

TABINDEX (Optional) - This is a number and will control the order pressing tab will cycle through the links or objects on a page.

ACCESSKEY (Optional) - This will allow a user to use a shortcut to activate the link such as Option-W if W is set as the key. This may not work on all browsers or on all platforms.

LINK DESCRIPTION - This is the text that will be underlined and used to activate the link.

For example:

<a href="#myanchor"></a>
<a href="http://www.labp.net/">Los Altos BluePrint</a>

Copyright 2002 BLUEPRINT Los Altos High School Web Club. All rights reserved.
201 Almond Ave. Los Altos, CA 94022