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
-
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
- Linking Pages - Slides
Introduced Code
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.
- What was the first web page ever created?
- 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
- Exploration
- 2
Student Instructions
Making a Multi-page Site
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 :::
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.
Student Instructions
Adding Links
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 :::
This page is almost working, but one of the pages is not linked.
Do This
- Look at the working links and see how they work.
- Add code that will link from the index page to the Charles Bridge page.
- Add code that will link the Charles Bridge page to the index page.
Student Instructions
Naming Links
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.
Student Instructions
Naming New Pages
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 :::
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
hrefattributes 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.
- Practice
- 6
Student Instructions
Navigation Bar
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 :::
Most web sites use navigation bars to help you find your way around a site. They should be the same on every page.
Do This
- Look over the navigation bar on "index.html".
- Add the same navigation bar to the other three pages.
- Adding Pages
- 7
Assessment Opportunities
Creating a digital artifact, linking within a multi-page site
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
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 :::
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.
Student Instructions
Try extra challenges or learn some new code.
Choose from the following activities:
Link to other people's pages on the World Wide Web.
Turn your images into links.
Student Instructions
Linking External Pages
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 [**How do I find the URL for a website?**] Go to whatever website you want to link to and copy the text in the address bar (e.g. "https://www.google.com" for Google). Then you can use that address for your own links. ::: ::: details [**How do I make external links?**] Put the entire url (including "http://") into the the href attribute of the `` tag, like this: wzxhzdk:2 :::
You can also make links that lead to other websites like Google using the <a> tag.
Do this:
- Look at the code that links to Google and see how it works
- Link your favorite websites and tell us why you like them!
Student Instructions
Images as Links
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 [**How do I find the URL for a website?**] Go to whatever website you want to link to and copy the text in the address bar (e.g. "https://www.google.com" for Google). Then you can use that address for your own links. ::: ::: details [**How do I make external links?**] Put the entire url (including "http://") into the the href attribute of the `` tag, like this: wzxhzdk:2 :::
You have learned that the text you type between the <a> and </a> tags is what the visitors to your page will see and click on when using links. You can actually add other tags and content, such as images, to this space in your code as well.
Do this:
- Look at the code that makes the first two images on the
index.htmlpage into links. - Use that same code pattern to turn the second two images into links, too.
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.