General
Computing
Concepts

Presentations

Spreadsheets

Web Design

Word
Processing

Appendices

Study Guide: Web Design - Creating Links

<<Previous

Next>>

Now you've created a page with nice-looking text. You are able to manipulate the color, size, alignment, and so forth. But the power of a web page starts when you are able to make your text into hypertext. Hypertext means that information is organized in a non-linear fashion. The next piece of information a viewer chooses to view is dependent upon what the viewer wishes to view next.

Web pages use links to allow the user to navigate information in a hypertextual fashion. To create a link on a web page, you need the place you will link to (often another web page) and a place to click on to get there (often a word, phrase, or graphic).

The tag used to create links is the link tag, or anchor tag:

Tag name Tag Attribute Values

Anchor A href="" url of the linked resource

name=".." defines an anchor

Here's an example of the anchor tag being used to create a link to another html document:

The <A HREF="ginger.html">Ginger Gold</A> is a delicious eating or baking apple.

The words "Ginger Gold" are displayed as underlined and in the link color. If you click on those words, your browser window will then display the file ginger.html. Ginger.html would need to exist in the same directory as the referring page (the page with this link in it).

In addition, the anchor tag can be used to create a link to a url:

There's nothing like a good <A HREF="http://www.juanvaldez.com">

cup of coffee</A> in the morning

When the words "cup of coffee" are clicked on, and the browser will display http://www.juanvaldez.com.

The anchor tag can also be used to link to another place in the same page. In this example, both the following lines would be in the same page:

[lots of other stuff here]

and later, in that same page:

The first anchor command simply marks a location in the document (presumably near the top) and is invisible in the browser window. The second anchor command creates a link back up to the top, the place marked by the first anchor.

Exercise: Incorporate a link to an existing web page. First, find a web page you would like to link to -- perhaps the website of your workplace or you alma mater. Find this page in a web broswer -- then copy the url. Now edit your web page and if you don't already have some text in your page that you would like to be the link, add it. Then add an anchor command around that text, with the HREF attribute = to the url you copied. Here's an example:

I graduated from <A HREF="http://www.vt.edu"> Virginia Tech </A>.

Save your file, then look at it in a browser. Does your link work?

Exercise: Now let's create a second html file and link to it from your first page. In the text editor, create a new file. Perhaps this page will be for your resume or photos of your pet. Put the <HTML>, <HEAD>, and <BODY> tags in your new file. Put whatever content you like in this file, and at the bottom of the page, include a link back to your home page. Save this second file. Remember to save it as text only and give it an html extension. Now go back to your first page and create a link to your second page.

Here's an example:

index.html (your first page) fluffy.html (your second page)

<html>

<head>

</head>

<body>

Welcome to my home page.

[stuff]

Here are some <a href="fluffy.html"> pictures of my cat, Fluffy.</a>

</body>

</html>

<html>

<head>

</head>

<body>

[stuff]

back to my <a href="index.html"> home page. </a>

</body>

</html>

Save both files in the same directory or folder. View your home page in your web browser. Try out your link to your second page. Try out your link back to your home page. Now you're on your way! You can create and link to as many pages as you like.

Exercise: Create a mailto link on one of your pages. The anchor tag is also commonly used to create a link that will open an e-mail window (in many browsers) when you click on it. Keep in mind, though, that some browsers don't support these mailto links and may give the user an error message. Here are some examples of mailto links:

If you have a cat named Fluffy, <A HREF="mailto:sue@yahoo.com">email me!.</A>

Site maintained by <A HREF="mailto:webmaster@bigcorp.com"> the web guy</A>

Submit comments to:<A HREF="mailto:bob@hotmail.com">bob@hotmail.com</A>

The last example has the advantage of having the e-mail address being displayed on a printout.

Put a mailto link in one of your pages and try it out.