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)

Objectives

Students will be able to:

  • Connect multiple web pages into one website using hyperlinks.

Links

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.

View on Code Studio
View on Code Studio

Overview

This lesson covers hyperlinks, which allow web developers to connect pages together into one website. The class will link together all the previous pages into one project, and create navigation bars for each page before publishing the entire site to the Web.

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

Resources

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

Student Instructions

Making a Multi-page Site

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 <a> element. The text you want to display as the hyperlink goes between the opening and closing hyperlink tags. The <a> 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 <body> element.

<a href=”houses.html”> Unique Houses </a>

**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.

<a href=”houses.html”> Unique Houses </a>

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.
  • Click on recipe.html in the files list on the left hand side. Add a hyperlink to the top of this page that will take you back to index.html.
View on Code Studio

Student Instructions

Create a Navigation Bar

Here's your project from before. You'll be linking the two pages by creating a navigation bar at the top of the page. Websites usually have the same navigation bar across all of their pages so you can get back and forth between things on the site. You can see an example of a navigation bar on this page

Do This

  • In your home page (index.html), add two hyperlinks at the top of the page, one to your lists page, and one to the home page.
  • Even though it might seem strange to link a page to itself, it's less confusing if the navigation bar is exactly the same on every page.
  • Copy the code for the navigation bar, then add it to the top of your lists page.
  • Test your links in the preview area by clicking on them.
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

Create and Name Your New Page

Before you start coding, you should make sure that you have all the pages that you need in your project.

Do This

  • Create a new HTML page and rename it. (Look at Lesson 6 Level 8 if you've forgotten how.)
  • Repeat this process for any other pages you want to add.
View on Code Studio

Student Instructions

Upload Images

Next, you'll need to upload all of your images into your project.

Do This

  • Download all the images you want onto your computer. Visit Lesson 7 Level 5 for help if you need it.
  • Make sure you have the right to use these images.
  • Write down all of the attribution information that you need.
  • Upload all of the images into your project. Visit Lesson 8 Level 6 if you've forgotten how.
View on Code Studio

Student Instructions

Add HTML

Next, you should add the HTML to your pages.

Do This

  • For each of the new pages that you've created, add HTML to make the page you sketched in your project guide.
  • You may also add more HTML to the pages you've already created.
View on Code Studio

Student Instructions

Navigation Bar and Footer

Each of your pages needs a navigation bar and a footer.

Do This

  • For each page, make sure it has a navigation bar that links to other pages in your site. For a review of the navigation bar, go to Lesson 9 Level 4.
  • For each page, make sure it has a footer at the bottom that explains the copyright information for your page. (Go to Creative Commons for help in creating this HTML.)
View on Code Studio

Student Instructions

Review Your Project

You're almost ready to publish your project, but you should check one more time that you have fulfilled all the requirements for this project.

Do This

  • Check that you are comfortable sharing all the information that's on your site.
  • Check that all of your images are correctly attributed, and that you have the right to put them on your site.
  • Check that your project includes everything included in the project rubric.
  • Use comments and whitespace to make your website readable.
  • Ask your partner to help you find any potential problems with your site.
View on Code Studio

Student Instructions

Share Your Project

It's time to share your project with the world!

Do This

  • Click the button at the top of this page.
  • Copy the URL it gives you, and email it to the people you want to see your page.
  • 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

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.