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 web site, 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 web site.

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="unit_4/unit_4_graphics.htm">Unit Four: Graphics</a>

   Note that the destination path ("unit_4/unit_4_graphics.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. If a user clicks on this link, the browser starts in the current folder, procedes to the sub folder "unit_4", where it finds the file "unit_4/unit_4_graphics.htm" and retrieves it for the user. (The forward slash (/) separates parts of an address.)

   The file paths for units 5 and 6 links are as follows:

   • unit_5/unit_5_site.htm
   • unit_6/unit_6_tools.htm

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 © 2006 by University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged. This product was funded by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). However, the contents do not necessarily represent the policy of the Department of Education, and you should not assume their endorsement.