Creating Links

The basic tag for linking to other webpages on your site is

<A HREF="name_of_website.html">Name of page</A>

This is known as a hypertext reference. The text that you type between the opening and closing tag ("Name of page") will be coloured as you specified in the <BODY> tag (Lesson 3 of this tutorial). If you did not specify a colour, the default colour is blue. The text will also be underlined by default.

There are four types of links that you can put on your site:
 

Absolute Links

These are links that can take the reader to another page on the web. The syntax (or format) of the link is:


 

Relative Links

These link to pages within the directory where your webpage is stored.

These are especially useful should you create all your pages before uploading, or when you switch severs, since the link gives the site URL relative to the page you are at now. If you have several subdirectories, however, you may have to specify the whole URL just as with the absolute link. This can be a pain in the butt if you want to move your webpage to a different server. A shortcut method to use will be given in the examples.
 

Internal Links

These are links to different areas within a page.

If you have several topics discussed within a page, you can have an index near the top, or simply reference your reader back and forth within the same page. This has its advantages in that the reader does not need to scan through the whole page to find what is of particular interest to him/her. In order to use this type of link, simply name the area of the page you wish to jump to:

Then, place the internal link on the same page elsewhere, wherever is appropriate:

It is generally good practice to provide an internal link at the bottom of the section which takes the reader back to the top of the page.
 

Combining the types of Links

You can combine the internal link with a relative or absolute link. Suppose you wish for your reader to go to a specific part of another page on the web (if the creator of the page has place names on his/her page as stated above). In order to do so, you simply use this syntax for your link:


 

E-mailing Links

You can create a link encouraging people to e-mail you as well.  This link will automatically open the reader's default mail window to a new message with your e-mail address in the "TO:" line.  These links are always useful to put at the bottom of your webpages where you can tell people who wrote the page, when it was last updated and where to contact you for comments, questions, or suggestions (as you desire).  The tag is simple:

Where do you want the link to open?

You can open the links either in the same window (the default) or in a new window. In order to do this, simply add the following into your link tag:

If you want all the links to open in the same new window, replace "_blank" with any name (e.g., "_new", "_fred", "_blink187", etc.). This convention gives the new window a name, and directs all the links where you specify the TARGET to that window.
I will have more on the TARGET specifications in the Frames lesson.

Return to the HTML Lesson Guide.
Examples of Linking
Read the next lesson: Graphics


This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.