Links

In this section we cover how to include links in your HTML documents. Three types of links are briefly covered.

Overview

One of the strenths of HTML is that it allows you to link to other documents both on your local server and on the Internet in general. The means by which this is achieved in HTML documents is the anchor tag (a). Anchors can link to local documents, documents on the web, specific sections of a document, and can be used to send email.

Basic Syntax

We use the <a href ...> tag to produce and anchor. the <a begins the tag. href="<file or address>" indicates the document or address to be referenced. Often, the protocol by which an addressed will be referenced is also given. Examples include:

<a href="localfile.html">
<a href="http://slashdot.org/">
<a href="ftp://ftp.cs.wisc.edu/">
<a href="mailto://hyperion47@excite.com">

In the first example, we call up a local file in the same directory as the one linking to the file. In the second example, we link to an external site. We can also link to specific pages on that site. In the third example, the link points to an FTP site and indicates that ftp (the file transfer protocol) should be used. In the last example, the anchor points to an email address; when clicked, the email program should begin a message to the address given.

Local Pages

We can use anchors to point to local pages. If the file is simple given in the format href="filename", then a file in the same directory as the referencing page is indicated. To point to a file in a directory one up from the current directory, you would use href="../filename". The ".." tells the webclient to look one directory up from the current page. So, for example, if you are currently viewing the file "http://www.sit.wisc.edu/~spkraus1/webdesign/index.htm", the anchor <a href="../index.html"> looks for the file http://www.sit.wisc.edu/~spkraus1/index.htm. Similarly, the link <a href="../catalyst/index.htm"> looks for the file http://www.sit.wisc.edu/~spkraus1/catalyst/index.htm.

Remote Pages

By using "href="http://..." we can refer to pages on other computers. <a href="http://slashdot.org"> looks for http://slashdot.org. If we want a specific page on a website, we simply give the complete URL. Do not forget the "http://", or else the browser will treat the URL as a local file.

Sections within Pages

To refer to a section within a page, link to the page, and follow the filename with #<section>. For example, if there is a section labeled "one" on the page "first.htm", then our anchor would be <a href="first.htm#one">. If we are already on page first.htm, and we were linking to another section within that page, we might just write <a href="#one">. Sections, however, must be defined, and they are not the same as section headings as given by h1, h2, ... h6. Instead, a section is given by another anchor taking the attribute "name". An example is <a name="one">. For example, if you wish to create an achor that can be linked to at a particular word, let's say, "king" in a file, you would go to the word "king" and create the following anchor tag: <a name="one">king</a>. Remember that anchor tags always require closing tags.

Contents	Chapter 2	Previous	Next