Lesson 9: Project - Multi-Page Websites

Web Lab | Project

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

Warm Up (15 minutes)

Activity

Wrap Up (10 minutes)

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 Teacher

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.

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.

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.

  • Linking Pages
  • 3
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

View on Code Studio

Planning Checkpoint

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

View on Code Studio

Your Personal Website

In the next few levels, you'll be completing and publishing your personal website.

You've already done a lot of work on your website, but this is your chance to get creative and add a new page of something that you care about.

Here are some ideas for your new page, but you can do anything approved by your teacher.

  • A movie, television, or book review
  • Description of a favorite holiday tradition
  • A "cause" page that explains an issue that is important to you

If you have more than one idea, you can add multiple pages to your site.

Your Project Guide will help you remember everything you need to do. Make sure you have your teacher's approval before moving to the next level.

Examples

                    

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

  • Reflection
  • 12
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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.