<A> and </A>

Description:

Anchor is one of the most useful elements of HTML, in that it allows you to link documents together in an organized manner. Anchors have the following uses:

  1. You can define a point within a document which can be referenced by other documents. For example, you can create a glossary with a hundred words, each with their own anchor. Other documents can then directly reference the words within the glossary.

  2. You can create links to other documents anywhere on the web (or on your own system for that matter). By clicking on the link, a person will call up the other document.

Attributes:

charset = characterset
Specifies the character encoding of the resource indicated by HREF. 
href = url
The location of the resource. This can be many different types of objects, including some of the following.

"A HREF="http://www.internet-tips.net"

A URL which is to be loaded into the browser if the link is clicked.

"A HREF="mailto:emailaddress@sillynet.com"

When clicked, this causes the browser to execute the default email client. This is a good way to allow visitors to send email to an email address, although since the email address is included within the page it's easily picked up by spam harvesters.

You can include other parameters to fill in some of the fields to the email client. Include a question mark after the recipient and an ampersand between each parameter. For example,

"mailto:emailaddress@sillynet.com?cc=tom@nowhere.org
&subject=This is what you wanted&body=I hope you are happy"

body=text - Set one line into the message body.

cc=myemail@email.com - Set the carbon copy field.

subject=text - Set the subject for the email.

Note that mailto is not well supported among older browsers, although both Internet Explorer and Netscape seem to support it well. Support for the optional parameters will depend upon the email client associated with the browser.

hreflang = language
Indicates the language of the resource. If you specify this attribute you must also include the HREF attribute.
id = "name"
You can give an ANCHOR a name, which allows it to be referenced and changed in a script (dynamic HTML). For example, you could define a link as follows:

<A HREF=dict.htm ID=dict>Dictionary</A>

A script could then change the color of the link "Dictionary" by referencing it by the name "dict".

name = "characters"
The purpose of this attribute is to give the anchor a name so that it may be the destination of another link. The value of this attribute must be unique within a page. This is pretty cool, as it allows a link to not only specify a page, but a location within a page. It's especially useful for referencing something within a very long document.

The way this works is you specify a NAME in an HREF (called a bookmark) in one document. For example, if you have a definition for the word "computer" in a large file called "dict_c.htm" containing all of the "c" words, you might include an "A HREF NAME="computer" in your document just above the definition.

In another document you would like to "dict_c.htm" as follows to get to the definition of "computer":

<A HREF=dict_c.htm#computer>

The "#" mark tells the browser to proceed to the bookmark called "computer" in the document "dict_c.htm".

rel = linktypes
Describes the relationship from the current document to the anchor specified by the HREF attribute.
rev = linktypes
Describes a reverse link from the anchor specified by the HREF attribute to the current document.
target = "targetwindow"

This attribute loads the document indicated by HREF into the window as indicated by "targetwindow".

TITLE = "text"
This is not commonly used, but is extremely cool. You can specify a TITLE for a link, which, in Internet Explorer, shows up as a "tool tip" when you hover the cursor over the link. Note that this attribute is not part of the W3C specification.

The TITLE attribute should be specified on most if not all of your links to allow for support of special browsers for use by the blind. This allows the links to be read aloud by the browser.

type = contenttype
Provides a description of what kind of content is expected to be at the target address. You can get a lit of content types at the following address:

ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/ 

Examples:

<A HREF="http://www.microsoft.com">Microsoft</A>

Link to Microsoft's website. This uses an absolute URL to get to the site. The word Microsoft will be underlined, and clicking on it will bring up the Microsoft homepage. Note that this will cause the default homepage to be loaded since a page name is not specified.

<A HREF="aboutme.htm">My life and times</A>

Create a link to the file aboutme.htm in the current directory. This is the recommended way to link to files on a website. It is called relative addressing.

<A HREF="http://www.internet-tips.net/cars/saturn.htm">About the Saturn</A>

This construct links to a page called saturn.htm in a directory called "cars". This is a form of relative addressing, and again is the recommended way to link to files within your website. What this example does is go up one level in the directory tree, then down to the directory "cars".

<A HREF="http://www.microsoft.com" TITLE="Go to Microsoft web site">Microsoft</A>

This links to the Microsoft website and includes a title. If you are running Internet Explorer, hover your cursor over the link: Microsoft and you will see the advantage of this construct.

<A HREF="http://www.microsoft.com" TARGET="_top">Microsoft</A>

This links to the Microsoft website and creates a new windows. For an example click on the link: Microsoft.

Tutorial:

  1. Create three new files in notepad (create three notepad sessions so you can go between then at will). Name them toc.htm, fishing.htm and birds.htm.  Save each document to your desktop or to a folder which you have open.

  2. In fishing.htm create the following text about fishing. Save what you've done.

Fish swim all of the time in the ocean.

I like to watch fish swim in the clear stream behind my house.

In rivers, fish swim upstream

  1. In birds.htm create the following three paragraphs. Save what you've done.

Birds fly high in the sky.

I like to watch birds at the zoo.

Birds are fun to watch as they fly high.

  1. In toc.htm, create the following two paragraphs and save what you've done.

Birds

Fish

  1. Now you are ready to learn about the ANCHOR tag. We'll begin by creating a simple anchor from one document to another.

  2. In the file toc.htm, use notepad to insert the following text. Save your changes after you've made your changes.

<A HREF="birds.htm">Birds</A>

Fish

What this does is create a link in the file toc.htm. A link will allow someone to click on the text "Birds" and display the file birds.htm.

Open the file toc.htm using Internet Explorer or Netscape (just double-click on the file) you will see that the text "Birds" is underlined. This means it is a hyperlink and is available for clicking.

  1. All right, with fish do the same thing just to get some more practice. Your toc.htm file should look like this when finished.

<A HREF="birds.htm">Birds</A>

<A HREF="fish.htm">Fish</A>

  1. Now let's get a little more fancy. At the top of your birds.htm file, insert a large amount of text (it doesn't matter what), enough to cause the three lines about birds to scroll off the bottom of the page. Save your changes.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit au gue duis dolore te feugat nulla facilisi.

Birds fly high in the sky.

I like to watch birds at the zoo.

Birds are fun to watch as they fly high.

  1. Okay, let's say you want to create a link which will allow someone to directly access the sentence which says "I like to watch birds at the zoo."

  2. To do this, you will use the NAME attribute. Enter it as shown in the example below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit au gue duis dolore te feugat nulla facilisi.

Birds fly high in the sky.

<A NAME="zoo">I like to watch birds at the zoo.</A>

Birds are fun to watch as they fly high.

  1. This creates a "bookmark" called "zoo", which can be referenced from other documents.

  2. Now to reference it from another document you must insert some special information. The "#" in a URL is used to indicate that a bookmark is desired. To show this, we will create a third line in our toc.htm file which specifically requests data for birds at the zoo.

<A HREF="birds.htm">Birds</A>

<A HREF="fish.htm">Fish</A>

<A HREF="birds.htm#zoo">Birds at the zoo</A>

  1. Be sure and save all of your files. Now, double-click on toc.htm and click on the underlined text "Birds at the zoo". You will find the browser displays the text starting with "I like to watch birds at the zoo".

Tips:

  1. Use the TITLE attribute. Even though this tag is not supported by all browsers, it does add a touch of class in those that do handle it. Since Internet Explorer is one of the supporters, and since IE will be over 50% of a web sites traffic, that can be a lot of class to add for a small price. On those browsers that do not support the attribute, it will simply be ignored.

  2. I generally find that using the "#" construct to link to anchors within a document is not recommended. I tend to prefer creating smaller documents which do not rely on this mechanism. This cuts load time and tends to work better for web sites (in my humble opinion).