UNIT 2 > MODULE 4

Lesson 2: Linking to Pages Within Your Website

Overview

In the previous lesson you learned that a web address (URL) consists of various parts. You also created a link in your portfolio home page to your school's home page. This link used an absolute address (the full address to the school website). Now you will learn to make links to pages within your own website, using a relative address.

A relative address is one that refers only to a portion of the web address, rather than to the full address. For example, assume you are webmaster of the domain mydomain.com, and want to add a link from http://www.mydomain.com/file1.htm to http://www.mydomain.com/file2.htm. In file1.htm, you don't need to link to the full address. You can simply link to the file name (file2.htm), since both files are located in the same place.

A relative address is an address that is relative to the location of the linking file.

Learner Outcomes

At the completion of this exercise:

• you will be able to create a relative link from one page to another within your website.

Activities

1. Open the index.htm file of your portfolio.
2. In the lesson on Nested Lists, you created an unordered list that contains list items for units 4, 5, an 6. Turn these list items into links, as in the following example:

   <a href="unit4.htm">Unit Four: Graphics</a>

   Note that the destination path ("unit4.htm") gives the browser directions starting from the current folder. This type of link is called a relative address because the entire address is relative to the location of the current file. Since index.htm and unit4.htm both exist in the same folder, there is no need to spell out an entire URL. If you had saved unit4.htm in a subfolder (for example, the "unit4" subfolder, you could still link to this file using a relative address; you would just need to include the subfolder in the address, like this: unit4/unit4.htm.

3. After you've added a link to your Unit 4 web page, create links to your Unit 5 and Unit6 web pages too.

Resources/Online Documents

• Common HTML Tags
• W3C HTML 4.01 Specification
• WDG Guide to HTML

All done?

After you have saved the changes to index.htm, open the file in your browser. Refresh your browser and test the link. Show your instructor your results before starting Lesson 3.

Copyright © 2005-2008 by University of Washington. Permission is granted to use these materials in whole or in part for educational, noncommercial purposes provided the source is acknowledged. This product was created with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and is maintained with support from the National Science Foundation (grant #CNS-054061S). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.