Useractive Tutorial

Links - HTML Lab 3

Putting Links on your Page

In this lesson you will learn one of the most important features of HTML - linking documents using hypertext. You are probably very familiar with hypertext. It is those underlined, colored pieces of text that you click on to surf the web.

At the top of almost every browser window there is a text field labeled Location: or "Address:". This text field shows the URL (Uniform Resource Locator) of the current webpage. For example, the address of the AltaVista search engine is http://www.altavista.com.

For our purposes, this is the most important thing to know about addresses. But an address gives other information too. Click here if you want to learn more.

Let's make a link!
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Links
</TITLE>
</HEAD>
<BODY>

One of the places I like to visit is
<A HREF="http://www.altavista.com">AltaVista</A>

</BODY>
Click PREVIEW. When the new window opens, click on the word AltaVista. This will take you to the AltaVista home page.

In red you see the anchor tag. The anchor tag is used to identify a place in an HTML document. The HREF attribute is used within the anchor tag to define a Hypertext REFerence. You should set this attribute equal to a URL. The text between the anchor tags is the actual hypertext you will see underlined and in blue on your web page. Click here to find out how to make the link a color other than blue.

Notice that there are quotes around the URL. It is good programming practice to get in the habit of using quotes around the value of ALL attributes, but they are not necessary. If you decide to use quotation marks and forget to close them, some nasty things can result. Try removing the closing quote here to see for yourself!

Go find something on the Internet that you are interested and that you might want to share with the visitors of your page. Replace http://altavista.com with the URL and AltaVista with any text you want.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Links
</TITLE>
</HEAD>

<BODY>

One of the places I like to visit is
<A HREF="any address you want">any text you want</A>

</BODY>
Linking Your Pages Together
You may want to make several pages and link them together. Let's find out how to do it!

NOTE: See where it says your domain in the example below? You should replace that with the domain name that you registered when you signed up for your Useractive account. For instance, if you registered johndoe.onza.net, you would use that as your domain name.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Links
</TITLE>
</HEAD>

<BODY>

<a href=http://your domain/anotherpage.html>Click here</a>

</BODY>
Save this page as page.html.

Now make another page and save it as anotherpage.html. Put any code you want on this page! When you are finished, open page.html again and click PREVIEW. You should be able to link to anotherpage.html.

What do you think would happen if you tried to use:

<a href=anotherpage.html>Click here</a>
in your document? Go ahead and try it...

It works! If you are linking to a file that resides in the same location as the file from which you are linking, you can set the HREF attribute equal to only the file name. This is called a relative link. If you set the HREF attribute equal to the full URL, then you are using an absolute link. It is good programming practice to use relative links whenever possible. It is important to note that your relative links may not work when you click PREVIEW unless you have saved the file at least one time, so be sure to do so.

When using relative links it is a good idea to get in the habit of including a base address at the top of your document.
Here is an example of the structure that should be used
<HEAD>
<BASE HREF="http://your domain/">
<TITLE>
Links
</TITLE>
</HEAD>

<BODY>

<a href=anotherpage.html>Click here</a>

</BODY>
The NAME Attribute
NAME is another attribute of the anchor tag. Suppose you've written a long web page with many sections. If a visitor to your page needed to find a specific section, it would be difficult to scroll through the entire document in order to find the information. The NAME attribute allows you to link one part of a page to another.

Let's give it a try! Notice there are many tags on this page. These will allow us to create a long web page quickly, so be sure to leave them in your code.

NOTE: Depending on which browser you are using, this may not work using the PREVIEW button. If you are having trouble, save you page and view it using a regular browser window.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Links
</TITLE>
</HEAD>
<BODY>

<A HREF="#COOL">Cool people</A>

 
 
 
 
 
 
 
 
 

<A NAME="COOL">I'M COOL!</A>
</BODY>
Click PREVIEW. See, you can send visitors to any section of your document this way!

The value of the HREF attribute must begin with #. The NAME attribute is linked to the HREF attribute using COOL. What do you think would happen if you set the value of the NAME attribute equal to COOL and the value of the HREF attribute equal to cool? Try it and see for yourself!