HTML Demo pages: Links

Links

The purpose of this page is to demonstrate some of the features of HTML that you should be using in your work.

Some common link markup tags

Use this link to get to the bottom of the page | Use this link to get to the middle of the page

Links are especially useful because they allow you to create pathways that users can follow across the web. Links are based on Uniform Resource Locators or URLs. Take, for example, the URL for the web location of another version of this page:

http://www.slis.indiana.edu/hrosenba/www/Demo/Demo2.html

Taking this apart, you can see that it has several distinct components:

http:// This is the name for the type of protocol used to send the data between server and client. http is used to indicate that the address is a web site. There are other possibilities as well:

Protocol	Markup	Example
File transfer protocol	ftp://	ftp://hostname/directory_path/filename.ext
Gopher	gopher://	gopher://gopherserver:port#/directory_path
TELNET	telnet://	telnet://hostmachine:port#
Email	mailto:address	mailto:userID@hostname.ext

www.slis.indiana.edu/ This is the Internet address of the host machine where the document is located

hrosenba/www/Demo/ This is the directory path to the file. In this case, there is the user's home directory and two subdirectories.

Demo2.html This is the filename of the document

There are two kinds of URLs

One is called an absolute URL. It uses the full internet address of the document. The advantage is that you have provided the complete address to use as a link. The disadvantage is that if you move the files to another directory, all of the links must be reformatted, because they will all be wrong. This is an example of an absolute URL:

<a href="http://www.slis.indiana.edu/hrosenba/www/Demo/Demo2.html">text</A>

One is called an relative URL. This means that the URL in the document is relative to the URL of the document containing the URL. To understand how to use relative URLs, you should understand how to move around the directory and subdirectory structure of your account. Here's an example of a directory structure:

To use image2.gif in the document page2.htm, you have to provide instructions for the browser to
1. Go up to the workshop subdirectory, then
2. Go up to the demopage subdirectory, then
3. go up to the parent directory (www), then
4. down to the images subdirectory, then
5. to the image2.gif
The markup for a relative URL would look like this:

<a href="../../../images/image2.gif"></a>

The ../ markup indicates to the browser that it should move up one subdirectory. In this case three are necessary to move up through the workshop subdirectory demopage subdirectory to the parent directory (www). The rest of the directory path moves down to the image.

<base ...> When you use a relative URL, the browser is filling in the rest of the URL that you did not include. This information is generally taken from the URL that the browser used to access the document. You can force the browser to use a different URL is you use the base element.

The base element must appear between the paired head tags at the top of the document and should contain the base URL for the document. The browser that uses this URL to fill in the missing pieces of all of the relative URLs in the document.

For example, this can be useful if the current document has been moved and the other documents referenced by the relative URLs have not. You can use the base URL of the old location (where the other documents are) and they can still be located through the links in the document that has been moved. Using a base element would look like this:

<html>
<head>
<title>Whatever</title>
<base href="http:www.slis.indiana.edu/hrosenba/">
</head>

So, with this markup the document "Whatever.html" gets moved, the documents referenced in "Whatever.html" using relative URLs such as ../../images/image2.gif can be found, because the browser looks at the base URL and fills in what's missing, so it will look for the following URL when a user clicks on the relative URL:

<a href="http://www.slis.indiana.edu/hrosenba/../../images/image2.gif ></a>

Anchor link markup

To use a URL as a hyperttext link, it must be enclosed in a paired markup tag called an anchor. This is what an anchor would look like for the URL given above:

<a href="http://www.slis.indiana.edu/hrosenba/www/Demo/Demo2.html">text</a>

What has been added are the two components of the anchor tag:

<a href="...>

a is the opening of the tag and href is the attribute, whose value is the URL used in the link

</a>

/a closes the anchor tag

Types of hypertext links

There are three types of links that you should use. You can link:

To another document in the web. This involves using the anchor tag, the full internet address of the page to which you wish to link, and the text that will serve as the actual link. Because you are using the full Internet address, you are creating an absolute link. It looks like this:

Link to another site:

<a href="full.internet.address">text</a>

For example, to link to the syllabus, you would use:

<a href="http://www.slis.indiana.edu/hrosenba/www/L571/syllabus/Syll14.html"> Syllabus</a>

It would look like this in a line of text:

This is a link to the L571 Syllabus

Notice that the anchor is a paired tag. You have to end it with the </a> tag. If you do not, everything after your link will also be underlined and the link will not work.

To another document in your UNIX www directory. This involves a shortened form of the document or image's address, so you are creating a relative link. It looks like this:

Link to another document or image that you own:

<a href="page or filename.extension">text</a>

For example, to link to the previous page, you would use:

<a href="Demo.html">Demo page: Tags</a>

It would look like this in a line of text:

This is a link to the Demo page: Tags displaying HTML tags

Link to another section of the page you are on. This is a way to provide the user with within-page links that can act as a dynamic table of contents. It looks like this:

The first part of the tag is the anchor (<A>) and defines the destination. You place this tag in the text, usually around a word on the line where you want the reader to end up. It uses the following markup:

<a name="anchor name">text</a>

The second part of the tag is the link to the anchor and defines the point from which the user can make the jump to the destination anchor. It uses the following markup:

<a href="#anchor name">text</a>

You can use names (top; contents) or numbers (Part 1) for the anchor names. You have to include the # sign in front of the anchor name.

The markup for such a link would look like this at the jumping off point:

You can use this <a href="#Part 1">link</a> to go to the top of the page.

It would look like this:

You can use this link to go to the top of the page.

The markup at the destination point would look like this:

<a name="Part 1">Some</a>

You can also link to a specific part of another document that you have created. In the destination document you use the following markup:

<a name="anchor name">text</a>

In the main document, where the user will see the link, you put the following markup:

<a href="pagename.html#anchor name">text</a>

So in the destination document (which in this case is the Table of Contents (DemoCon.html), you would place the following markup tags somewhere on the page (in this case the last word of the first paragraph).

<a name="Links">current</a>

And in the document (this one) where the link appears, you would place the following markup tags in the place that will be the jumpoff point (which is the sentence that follows the markup example):

<a href="DemoCon.html#Links">link</a>

You can use this link to go to the section of the Table of Contents page with the link back to this page!.

Want to know more? Here are links to pages about HTML. Use the Back button to return to this page when you are ready to continue.

Let's move on to a page about images.

Demo Page Navigation:	DemoPage contents	About HTML	UNIX help	HTML tags	Lists	Links	Images
Demo Page Navigation:	Imagemapping	Tables	Forms	Frames	Javascript	CSS (style sheets)	XML

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu	http://www.slis.indiana.edu/hrosenba/www/Demo/Demo2.html