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
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 Teachers
- Personal Website - Exemplar
For the Students
- Personal Website - Project Guide
- Personal Website - Peer Review
- Personal Website - Rubric
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.
- Lesson Overview
- Teacher Overview
- Student Overview
- Personal Website - Project Guide Exemplar (PDF | DOCX)
- Personal Website - Peer Review Exemplar (PDF | DOCX)
- Hyperlinks
- Student Overview
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.
Student Instructions
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 <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>
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.
- Project Guide
- Teacher Overview
- Student Overview
Planning Checkpoint
Check over student plans before allowing them to continue on the rest of the levels.
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
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.
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 7 Level 5 if you've forgotten how.
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.
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.)
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.
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
Student Instructions
This level is an assessment or survey with multiple questions. To view this level click the "View on Code Studio" link.
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.