Lesson 17: Linking Pages
45 minutes
Overview
This lesson will give students practice in using links and introduce them to good navigation practices for their sites. Students begin 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.
Question of the Day: How can we combine several different web pages into one website?
Standards
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.
Agenda
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.
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers
- If you are teaching virtually, consider checking our Virtual Lesson Modifications
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- Hyperlinks - Resource
- Linking Pages - Slides
Introduced Code
Teaching Guide
Warm Up (5 minutes)
First Web Page Hunt
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?
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.
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.
Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.
Formative Assessment: Levels 6 & 7 can be used as a formative assessment.
A rubric is provided in level 6, and written feedback can be given to students. Click here to learn more about giving feedback to students.
Level 7 is a free response reflection that can be used as an opportunity to gain insight into how the students completed the assessment level and the choices they made with adding HTML files and hyperlinks. In addition, this reflection can be used to identify any misconceptions shared among students that should be cleared up.
Wrap Up (5 minutes)
Journal
Question of the Day: How can we combine several different web pages into one website?
Do This: Have students update their HTML Tags chart in their journals to include the hyperlink tag and its attribute.
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.
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.
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
