Anchors: Creating Links

Anchor elements, denoted by <A>, have two different attributes, which function in two different ways.

• Reference Anchors (HREF), also called links or hyperlinks. These create a link to somewhere else. We are going to concentrate mostly on this type of anchor.
• Named Anchors (NAME), also called targets. These are more like placemarks or placeholders. They indicate a specific place within a document. Rather than linking to somewhere else, they create a place that can be linked to from somewhere else (using a reference anchor).

Anchor tags are paired. Anchor tags can have a reference attribute or a name attribute, or both, if you want to set up a two-way link.

Reference Anchors

<A HREF="xxxxxxx"> Text of link </A>

where the xxxxxxx part is the URL for the location being linked to, and the Text of Link part is the item that is being marked as a link.

The URL can be a complete URL, including the server, subdirectories, filename and a named anchor:
http://www.lehigh.edu/~inwww/seminar/reference/htmlchart.html#anchors
Or, if it refers to a file in the same directory, it can be a partial URL, with only a filename or filename and anchor:
htmlchart.html or htmlchart.html#anchors
It can also be a 'relative' URL, giving the relative path from the server root:
/~inwww/seminar/reference/htmlchart.html#anchors
or from the feile doing the referring:
../reference/htmlchart.html#anchors

To understand more about URLs and how they are formed, take a look at the URL Tutorial.

The contents of the link element can be either text or a graphic. If it is text, it will initially appear in Netscape as blue and underlined. If it is a graphic, it will initially appear boxed with a blue border. (The link color may be changed by a browser Preferences option, and it may also change, if the Preference settings permit it to do so, after it has been visited -- this color is normally purple, but that, too, can be changed by a Preferences option.)

Links in Internet Explorer appear very much like links in Netscape. The same is true of other graphical browsers. To follow a link, the reader clicks on the item with the mouse. In Lynx, however, a link item appears highlighted (bright white on black rather than just white on black -- the effect is much like boldface). The current item is highlighted in reverse (black on white). To follow the current link, the reader presses the right arrow key. (Because of these differences, your link--if it is text--should probably not say something like "click on this," because that may not be what the reader should actually do.)

The following examples illustrate both textual and graphical reference anchor elements.

• Text Anchors

• Named Anchors

• (we will cover linking images on day 3, after images!)

As another example, the buttons below are just images used as link items.