Step 6: Linking

• One exists in your document (the text to click on).
• The other is the document to which you're linking.

A link usually appears as underlined text of a color different from the rest of the document so that it can be distinguished easily. Clicking on the link opens the document or multimedia file.

There are three categories of links:

• An absolute link begins with http:// and specifies the URL of an external resource.
• A named anchor (or ID anchor) link connects to another location in the same document (or in another document) and is specified by a unique name (e.g., 2, box, A, top).
• A relative link usually has a short path name to an internal resource.

Linking to an external document

The HTML tag that is most used to connect to an external document is the one for an absolute link. Here's an example:

     <a href="http://www.ncsu.edu/">Welcome to NCSU</a>

The text that appears between the beginning and ending tags displays as the link. Here is the meaning of each part of this example:

As long as you know the URL for a file, you can create a link to it.

Linking to a named anchor within the same document

Sometimes you may want to link from one part of a document to another part of the same document. For example, to link from the top of a document to its fourth paragraph:

1. Create a single-word name (no spaces), e.g., "fourth," for the fourth paragraph.
   
2. Insert an anchor containing this name at the beginning of the fourth paragraph:
   
        <a name="fourth"></a>
   
   
3. At the top of the document, insert a link to the "fourth" anchor. It would look like:
   
        <a href="#fourth">link to important stuff</a>

The pound sign (#) in front of the anchor name tells the browser to look for the link inside the current document. Clicking on the highlighted text "link to important stuff" would take the reader to the fourth paragraph.
Note: Anchor names are case sensitive.

Linking to a named anchor in another document

Sometimes you may want to link from one document to a specific section of another, e.g., from "firstdocument.html" to a particular section in "seconddoc.html." To do this,

1. Insert a named anchor tag at the exact spot in "seconddoc.html" where you want the reader to begin, for example:
   
        <a name="start_here"></a>
   
   
2. Place a tag where you want the link (the highlighted text) to appear in "firstdocument.html," for example:
   
        <a href="http://www.here.edu/seconddoc.html#start_here">important part</a>

Note that the document name and the anchor name are joined by a pound sign (#). Clicking on the highlighted text "important part" in "firstdocument.html" would take the reader to the "start_here" section in "seconddoc.html."

Making an image a link

To use an image as a link, simply put the image tag inside a link tag, in the spot where displayed text would normally go. For instance, to make the belltower image into a link to the NC State homepage, the link tag would look like this:

   <a href="http://www.ncsu.edu"><img src="http://www.ncsu.edu/images/ncsubell-red.gif"></a>

When the user clicked on the belltower image, the NC State homepage would appear.

An image used as a link will have a blue box around it in some browsers. To eliminate this box, use the border="0" attribute of the image tag.The above example would then look like this:

   <a href="http://www.ncsu.edu"><img src="http://www.ncsu.edu/images/ncsubell-red.gif" border="0" ></a>

The user may be viewing your document with Lynx (and won't be able to access any images), so it is a good idea to have text along with each image that is used as a link.

Relative and absolute linking

If a new neighbor you just met on your street asked you where you lived, you'd probably say something like "two houses down on the left." This would be your "relative" address -- just enough information to locate your house from where you were standing. Your postal address is your "absolute" address, which anyone, not just a neighbor, can use to find you.

The same concept works with URL addresses. When linking from one document to another in the same directory, only the second document's file name is necessary, not its entire URL. For example:

     <a href="second_doc.html">Go to the second chapter</a>

You can also use relative linking across directories. For example, the link:

     <a href="../third_doc.html">Go to the third chapter</a>

takes the reader to a document in a directory that is one hierarchy level higher (denoted by ../) than the current document.

Relative links are strongly encouraged as they are easier to type and allow you to move groups of files from one machine to another without editing the files at all. However, relative linking becomes more error-prone the more directories you traverse, so limit relative linking to files that are part of a single project, such as this HTML tutorial.

Go on to Step 7: Granting access to your pages

Go back to Step 5: HTML tags for images

Return to the Introduction

Last modified July 13, 2004 by cawalker