Lesson 19: Linking Pages

Overview

Question of the Day: How can we combine several different web pages into one website?

Students begin the lesson by looking online for the first web page and discussing how its use of links was what started the web. They then transition to Web Lab where they learn how to make their own links, as well as good conventions that make it easier for users to navigate on a page. Finally, they reflect on their group project and what their personal goals are for the final stretch.

Purpose

Links are the defining characteristic of the web. Although they seem simple, they are what allow us to move seamlessly across the Internet. This lesson will give students practice in using links and introduce them to good navigation practices for their sites.

Assessment Opportunities

  1. Use HTML to create links between pages

    See assessment level in Code Studio.

Agenda

Lesson Modifications

Warm Up (10 minutes)

Activity (35 minutes)

Wrap Up (10 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Use HTML to link between web pages.

Preparation

  • Make sure students have access to their website plans from the previous lesson.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Introduced Code

Support

Report a Bug

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.

Warm Up (10 minutes)

First Web Page Hunt

Teaching Tip

Although there are many places students could go for the answer to this question, a Google search will most likely take them to an article describing the page that Tim Berners-Lee created on August 6, 1991. The page is comprised of simple text with a few hyperlinks.

Group: Place students in pairs. They do not need to be in their project groups.

Display: Show the two following prompt questions on the board, and direct students to find the answers online by using a search engine of their choice, or whatever methods they might normally use for research.

  1. What was the first web page ever created?
  2. What's the one feature it has that we haven't learned how to do yet?

Share: After giving students time to search online, let them share out their answers.

Remarks

Even though the first web page looks simple, it had something that had never been done before: links. Links are what made the web special, because they let people easily move around the Internet. Today, you'll learn how to put links on your own web pages, so that your team can combine all your pages together into one website.

Question of the Day: How can we combine several different web pages into one website?

Activity (35 minutes)

Web Lab

Group: Allow students to continue in their pairs.

Transition: Send students to Code Studio.

Wrap Up (10 minutes)

Journal

Discussion Goal

Students may come up with ideas such as a similar color scheme or styles, or similar content. They may mention a header at the top of the page or navigation bar. The most important thing is that they are thinking of the site as a single project that they are all contributing to, rather than a set of individual web pages.

Question of the Day: How can we combine several different web pages into one website?

Prompt: Today, you learned how to link pages, which will help your team work together to build one website. Besides all linking to each other, what else will help all your pages feel like a single site?

Discuss: After students have time to write down their thoughts, allow them to share in small groups before taking ideas from the whole class.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Exploration
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Making a Multi-page Site

A web site should include more than one web page, and they should connect to each other. Here's an example of a project with multiple pages that are connected by hyperlinks (the blue underlined words that take you to another page when you click on them).

Do This

  • Use the inspector tool to see the code that creates the hyperlinks on the top of index.html.
  • Discuss with your partner how you think that code works.
  • Skill Building
  • 3
  • 4
  • 5
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Naming Links

::: details [**What are hyperlinks?**] Hyperlinks can connect to local web pages or external web pages. To add navigation to your website you will need to add hyperlinks which connect your individual web pages. You can **add hyperlinks to your web page using the `` element**. The text you want to display as the hyperlink goes between the opening and closing hyperlink tags. The `` element has an attribute `href` which is the location to link to. The location of a local page is just the file path for that page.

For example to link to the unique houses page you would add the following code inside your `` element.

wzxhzdk:0 ::: ::: details [**How do I add a hyperlink?**] You can add hyperlinks to your web page using the `
` element. The text you want to display as the hyperlink goes between the opening and closing hyperlink tags. The `` element has an attribute `href` which is the location to link to. The location of a local page is just the file path for that page.

For example to link to the unique houses page you would add the following code inside your `` element.

wzxhzdk:1 ::: ::: details [**What are good rules for naming links?**] Link names should make it easy for the user to know where they are going. Some good rules are: 1. Give the link a good description that makes sense even without reading all the text around it. For example, "go here" or "learn more" don't tell you where you are going or what you are learning. 2. Give a link name in regular text, rather that just repeating the URL in the link name. For example, "Home" or "Home Page" are easier to read than "index.html". 3. Don't link too much text. Readers will not understand specifically what the link is about. :::

Just like images and files, links should have clear names that help someone understand what page they are linked to.

Do This

  • Read the code or click on the links to see where they go.
  • Change the names of the links to make it clear where they will take you.
View on Code Studio

Student Instructions

Naming New Pages

You'll need to follow the same rules for naming html pages that you did for naming images. This page has some problems caused by poorly named HTML files.

Do This

  • Click on the links in "index.html" and see which ones are broken.
  • Change the file names and link href attributes so that they follow good naming conventions such as:
  • Avoid special characters such as &, ?, %, , etc.
  • Make sure the name has a specific meaning that helps you know what the image is.
  • Use dashes (-) or underscores (_) instead of spaces.
  • Keep the names as short as possible and still have a clear meaning.
  • Adding Pages
  • 7
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Creating a digital artifact, linking within a multi-page site

Assessment Criteria:
Extensive Evidence

A new page has been created and given a unique and descriptive name ending in “.html”. There is a link from the index.html page to the new page and from the new page back to index.html

Convincing Evidence

There is at least one one working link from one HTML page to another

Limited Evidence

There is an <a> tag, but syntax errors or problems with the page name may prevent it from working

No Evidence

No new page was created and there are no links

Student Instructions

Adding New Pages

To make your multi-page website, you'll need to add multiple pages to your project. To practice, let's split the content on this sample page into two pages and link them together.

Do This

  • Add a new HTML file by clicking . The new file will appear in the files list on the left side of the workspace.
  • Rename the file, either by right clicking it and choosing "Rename", or by clicking on it when it's already highlighted. Make sure the name is unique, descriptive and ends in ".html".
  • Use HTML to fill out your new page. (You can use content from the main page.)
  • Link to your new page from "index.html"
  • Link back to the index from your new page.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 1B-AP-12 - Modify, remix or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features.
  • 2-AP-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
IC - Impacts of Computing
  • 1B-IC-21 - Use public domain or creative commons media and refrain from copying or using material created by others without permission.