When you create a page for the Web, you will want it to link to other pages, so when you click on a hypertext link, you are taken to another Web page.

This works by using the anchor tag in HTML. The anchor tag has start and end tags that you wrap around a span of text; it is also one of the tags that always has an attribute.

About the Anchor Tag:

The anchor tag a is always followed by an attribute. For a link, use the attribute href which stands for "hypertext reference"

When you link to an outside or external Web site (known as an absolute link), you must always include the Web protocol, http before the address.

The URL is always in quotes.

Do not forget to close your anchor tag, or else you will have a run on link.

Whatever is in between the opening and closing anchor tags will be a link.

Absolute Links

An absolute or external link is a link to any page on the Web, like the examples so far.

Visit <a href="http://www.pageresource.com/html"> Page Resources</a>and look at their section about Linking.

Again, an absolute link must always include the full address, including http:// in the URL.

Relative Links

A relative link is a link between two of your pages within your site. If you like from your page resume.htm to another page in the same directory folder called links.htm then the HTML will look like this:

My<a href="links.htm">Links</a> to well designed Web sites.

In order to build a Web site with hyperlinked pages, you must first have a good understanding of file structure. If you are still getting comfortable using a computer, then it is imperative that you review this section thoroughly. The concepts involved in understanding file structure (also called directory hierarchies) are essential to Web development.

File Structure: How to organize your disk for this class

Jump Down Links

There is another way to use the anchor tag. Besides linking to another page, you can also use it to jump further up or down the page you are already on.

This is useful for long pages, when you want to jump to a specific section of the page.

Up to Top

There are 2 parts to making a jump-down link:

First you must put a marker in your code at the point of the page where you want to jump to-- this is your "jump destination." This marker is called a named anchor and it looks like this:

<a name="top"></a>

Instead of the attribute "href", use the attribute "name" to indicate where on the page you want to jump. This anchor is named "top." You can name your anchor anything you want (don't use spaces).

This is not a hyperlink, it's a named anchor, or a marked spot where you want to go to after clicking your link. Notice that unlike the hyperlink, there is no text between the opening and closing tags.

Second you need a hypertext link to click on in order for you to jump to your anchor. This is very similar to a relative link, with one small difference. Instead of linking to your file with an .htm extension, you will use a pound sign (tic-tac-toe symbol) followed the name you gave to your anchor.

<a href="#top">Up to Top</a>

Any time you want hypertext ("hot text" to click on) you must use the href attribute of the anchor tag, with text or an image to click on in between the opening and closing tags. If you do not have anything in between the opening and closing tags, there will be nothing to click on.

Don't forget that jump down links require 2 tags:

• first: a named anchor <a name="myjumpspot"></a> where you want to jump to.
  
  
• second: a hypertext link <a href="#myjumpspot">Jump to another spot</a> with text in between the opening and closing tags so you have something to click on.

You can also jump to a spot on another page. Like this

To do this first create a named anchor at the point on the page where you want to jump to.

Then link to it like a relative link, but with the anchor name after it:

<a href="links.htm#flash">Jump to my favorite
Flash sites </a>

What to do if your jump link doesn't jump:

• The most common problem: you have already reached the bottom of the page. Your link can't jump because your page is already at the bottom and it can't scroll down any further. Try adding some extra paragraph breaks at the end to give your page more room.
  
  
• Make sure that you have 2 parts to your link. First an anchor that you named, and then a hypertext link to that anchor.

Linking to other Media

You can link to other files besides HTML files. Any file on the Web, whether it's an HTML page, an image, a sound file, a streaming video, or a pdf document

<a href="longreport.pdf">Download a long report</a>

<a href="friends.jpg">See a photo of my friends</a>

<a href="ska.mpg">Click here to download some ska music</a>

E-mail (Mailto) Links

You can also have a link that automatically opens a mail message and puts your email address at the top. (Note: this only works on computers that have a mailbox set up, so it might not work on all lab machines.)

Use the anchor tag with the href attribute, but instead of linking to a file, type mailto: followed by your e-mail address. Again, it must be quotes, and you must have something to click on in between the opening and closing anchor tags.

<a href="mailto:alevy@coventryct.org">Email</a> Mr. Levy

Open Links in a new browser window

Sometimes you might want a link to open a new browser window. Your collection of links to outside Web sites, for example, can launch a new window with the link, so viewers do not leave your page.

Do this by adding an extra attribute target="_blank" inside the opening anchor tag.

This <a href="http://www.coventrypublicschools.org/chs" target="_blank">link</a> opens a new browser window.