Module 4: Creating Links

Overview

This lesson will introduce students to techniques for creating links on their web pages. Students will learn how to create links using both absolute and relative paths and be able to differentiate between the two. In addition, students will explore using named anchors to create jump-to links on a page, and will learn to create e-mail links.

Lesson 1: Linking to External Internet Sites

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson begins with a discussion of the parts of a web address. It is helpful to view several example websites and dissect their parts as a group. For classes that have no problem with this activity, it can be fun to dissect more challenging web addresses, such as those with long lists of parameters following the file name.
• Students may be unfamiliar with the http:// prefix to a URL, since modern browsers don't require it, and many don't even display it.

Example Output

When this lesson is complete, students will have added a link to their school home page within their index.html file.

Lesson 2: Linking to Pages Within Your Website

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• This lesson provides an opportunity to discuss the difference between absolute and relative URLs. Students should know that if they're linking between pages that are stored locally, using an absolute path to these files may damage the link when the files are made public or moved to a new location. Therefore it's a good practice to use relative URLs to reference local files, and absolute URLs to reference external files, i.e., those that are stored elsewhere on the Internet.

Example Output

When this lesson is complete, students will have added links to the navigation menu in their index.html file.

Lesson 3: Special Types of Links

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 3 page

Tips for Delivering This Lesson

• In this lesson students create a "Skip to main content" link. When they test this link, they might not see a visible effect because their web page doesn't have that much content yet. It would therefore be helpul to share examples of sites that use this feature so they can see how it can be very useful. A few examples of sites that include these links are AccessComputing, WebAIM, Knowbility, and the W3C's Web Accessibility Initiative.
• Since the primary beneficiaries of "skip to main content" links are individuals with disabilities, this lesson provides an excellent opportunity to revisit accessibility, as discussed in the lesson How People with Disabilities Access the Web. For students to fully appreciate why these links are important, ask them to visit a site that has lengthy navigation menus and no "skip to main content" link. Almost any website will do. Assign them a specific link on a specific site, and forbid them from using a mouse for this exercise. Remind them that there are individuals with physical disabilities and people who are blind who are unable to use a mouse, so they are forced to navigate this way. For added effect, consider instructing students to wait one full second before they hit tab again, since that's a pace that's common for certain individuals with severe physical disabilities. After students have experienced how difficult it is to move around a website without a mouse, ask them to perform the same activity using one of the example sites listed above, and to press Enter when the "skip to main content" link has focus. It's best to do this activity before asking students to create their own, since that way they'll have a better appreciation for why they're doing what they're doing.
• The final activity in this lesson is to create a mailto link. As explained on the student lesson page, this might not work in some environments, depending on how email clients are configured. This is one good reason to avoid mailto: links. The other is that these links are easily harvested by spambots and used for malicious purposes. However, these links are still very common on the web, so students should understand their purpose, as well as their limitations.

Example Output

When this lesson is complete, students will have added a "skip to main content" and "mailto" link to their index.html file.