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.html to http://www.mydomain.com/file2.html. In file1.html, you don't need to link to the full address. You can simply link to the file name (file2.html), 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.
you will have converted a list of words into a functional navigation menu.

Activities

Return to index.html of your web portfolio.
In an earlier lesson you created an unordered list to serve as a navigation menu. To make that into a functional menu, convert the text of each item (Home, Accessibility, Usability, Graphics, Tools, and Javascript) into links that target your other portfolio web pages. Since these other pages are all in the same directory as the home page, you can use a relative URL - you don't need to spell out the full address. As an example, here's what the link to accessibility.html will look like:
```
  	<li>
  	    <a href="accessibility.html">Accessibility</a>
  	</li>
  
```

Resources/Online Documents

All done?

After you have saved the changes to index.html, open the file in your browser. Refresh your browser and test each of the new links to be sure they work. Show your instructor your results before starting Lesson 3.