Lesson 9: Project - Multi-Page Websites

Overview

After learning about how to link web pages to one another, students are finally able to publish the website they have been working on. In this lesson, they link together all the previous pages they have created into one project, create a new page, and add navigation between the pages before publishing the entire site to the Web.

Purpose

In several of the previous lessons, students created web pages that will be included in their websites. In this lesson, they will learn to link all of these pages together and publish them to the Internet.

Agenda

View on Code Studio

Objectives

Students will be able to:

  • Connect multiple web pages into one website using hyperlinks.

Links

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

For the Teachers

For the Students

Vocabulary

  • Hyperlink - A link from a HTML file to another location or file, typically activated by clicking on a highlighted word or image on the screen.

Introduced Code

Teaching Guide

Warm Up (15 minutes)

Content Brainstorm

Remarks

In this lesson, you'll be publishing your website to the Internet so that anyone with the address can see it. Before you do that, though, you're going to have a chance to add anything that you think might be missing from your site.

Prompt: What are some things you want on your site that you haven't had a chance to add yet?

Give students a few minutes to brainstorm some ideas, then allow them to share with the class.

Remarks

In a moment, you'll be able to create new pages using any of these ideas. Before we do, though, we need to make sure that our users will be able to get to all of the pages on our sites. To do that, we'll need to use a hyperlink.

Activity

Multi-Page Websites

Teaching Tip

Adding Multiple Pages: Students who decide to add more than one web page will need extra paper to complete their sketches. Alternatively, you may choose to have students complete their sketches and image tables in their journals.

Distribute the Personal Website - Project Guide and review the first page as a class.

Circulate: Support students as they complete the first two pages of the Project Guide. When students are finished designing their pages, have them transition to Code Studio.

Code Studio levels

    View on Code Studio
    View on Code Studio

    Planning Checkpoint

    Check over student plans before allowing them to continue on the rest of the levels.

    Peer Review

    Group: Place students in pairs.

    Distribute: Personal Website - Peer Review

    Support: Help students as they complete the Peer Review Guide, then allow students to make any final revisions to their websites.

    Collect: Project Guides, Peer Review Guides, and student website addresses.

    Wrap Up (10 minutes)

    Journal: Personal Website

    Discussion Goal

    Goal: Students should reflect on the process so far and keep track of the fact that this is an iterative process where they are constantly improving things as they go.

    Prompt: After the first day of pulling together your personal website reflect on your experience.

    • How did you use the problem solving process to in creating your site?
    • What do you like about your site so far?
    • What do you still want to know how to do?

    Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although their answers are anonymous, the aggregated data will be available to you once at least five students have completed the survey.

    Code Studio levels

    Discuss: Have students share out the things they still want to learn how to do.

    Keep this list and cross it off as they learn more things in the unit.

    Journal: Have students add the new tags they learned to the "HTML Tags" section of their journal.

    Standards Alignment

    View full course alignment

    CSTA K-12 Computer Science Standards (2017)

    AP - Algorithms & Programming
    • 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.