Lesson 9: Multi-Page Websites

Web Lab

Overview

After learning about how to put many files into one project and link them together, students finally embark on creating their personal website. In this lesson, they pull together all the previous pages they have created into one project, create a home page, and add navigation between the pages.

Purpose

In many of the previous lessons, students created web pages that will be included in their websites (Hobbies Page, Recipe Page, About Me Page). This is the first step in bringing all those pages into one project that students will continue to work on throughout the rest of the unit.

Agenda

Warm Up (15 minutes)

Activity (35 minutes)

Wrap Up (5 minutes)

Objectives

Students will be able to:

  • Connect multiple web pages into one website using hyperlinks.

Preparation

Links

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

Support

Report a Bug

Teaching Guide

Warm Up (15 minutes)

Web Lab: Start Personal Home Page

Activity (35 minutes)

Web Lab: Multi-Page Websites

Goal: Make a website with multiple pages linked together!

Teaching Tip

Make sure that students save time to work on their own portfolio after working on the Odd Stuff Site. They should have at least 10 minutes to work on their own site.

Transition: Head to back to Code Studio.

Wrap Up (5 minutes)

Journal: Personal Website

Goal: Students 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?

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.

View on Code Studio

The Internet - Web Development: Lesson 9 - Multi-Page Websites

Background

After learning about how to put many files into one project and link them together, students finally embark on creating their personal website. In this lesson, they pull together all the previous pages they have created into one project, create a home page, and add navigation between the pages.

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.

New Code

Resources

View on Code Studio

Web Lab: Create Personal Home Page

Goal: Students realize how far they have come and how much they can make without assistance

Set Up: Students need their sketch of their home page from U2L02.

Remarks

Today to start you are going to try to implement as many ideas from your personal website home page sketch as possible. If you want to do something different from your sketch that is fine. Don't worry if there are things you still can't implement.

Transition: Code Studio levels.

Circulate: Students will be working to try to implement any part of their home page that they can on their own. If students are frustrated because they can’t make something remind them we are going to be working on it later today and they should just do their best. Students don't need to have a perfect page yet but give them time to add content and style.

View on Code Studio

Starting Your Home Page

In this lesson we are going to start putting together your personal website! In order to do this you need to create your personal home page.

Do This

Using your sketch of your personal home page and personal web development practice packet as a guide: Create as much of the home page design as you currently know how to. Take a screenshot of your work and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .)

View on Code Studio

Stop

Wait for instructions from your teacher before going to the next level. If you still have time go back and continue working on your home page.

View on Code Studio

Student Instructions

Making a Multi-page Site

A web site should include more than one web page, and they should connect to each other. The first multi-page site you make will be a site of Odd Stuff. Most of the site is already here, but you will need to add your Guinness Book of World Records page.

  • In the list of project files, find index.html and click on it. index.html is used in Web Lab to mark the home page of a website, the first page that your visitors will see.
  • Click on some of the other HTML files. These are also web pages, but they have different names. Every file needs a unique name that will help you know what it is.
  • Look around through all the files provided. Can you figure out which style sheets go with which web pages?
View on Code Studio

Student Instructions

Adding HTML and CSS

You will need to add your Guinness Book of World Records page. First create an HTML and CSS file. On the next level you will bring over the code.

Adding File

  • Add a new HTML file by clicking the "Add HTML" button.
  • Rename the file, either by right clicking it and choosing "Rename", or by clicking on it when it's already highlighted. Make sure the name is unique, descriptive and ends in ".html".
  • Create a new CSS file and rename it, too.
View on Code Studio

Student Instructions

Adding HTML and CSS

Now that you have the files set up bring over your code for your Guinness Book of World Records page.

Copy Code

  • Go to this level and copy all the code from the HTML file. Paste the code into the HTML file you just created.
  • Copy the CSS code from the style sheet at this level and copy it into the CSS file you just created.
View on Code Studio

Student Instructions

**Why is the style sheet not working? ** Check in the HTML of the records page to make sure that your link (``) is linking to the correct CSS file.

Making a Multi-page Site

You may notice that your styles for your Guinness Book of World Records don't seem to be working. Can you figure out why?

Hint: When you brought over your code you had to change the name of the style sheet from "style.css" to something else.

View on Code Studio

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

Hyperlink Element

View on Code Studio

Student Instructions

Header Area

Websites usually have the same navigation bar across all of their pages so you can get back and forth between things on the site. To do this you need to add the navigation links to all the pages on your website.

Do This

  • Copy the navigation links section onto all the web pages.
  • Copy any styles you need into the style sheets for those pages.
View on Code Studio

Student Instructions

Missing Home Link

Copying your hyperlinks to all your pages allowed you to get to most of the pages on your website from any other page. One hyperlink is missing - the one to get you to your home page (index.html).

Add a hyperlink to your home page from all the pages, even your home page itself. Adding it to your home page will keep your navigation header consistent on all pages.

View on Code Studio

Transition: Have students come off the computer.

Update HTML Elements List

Set Up: Have students take out their Web Development Practices - Project Guide.

Have students update their HTML Elements table on page 2 of their Web Development Practices - Project Guide packet with the image element.

Check in with students to make sure they understand these tags before having them transition back to the computer.

Transition: Have students go back onto Code Studio and work on their Personal Websites.

View on Code Studio

Stop

Wait for directions from your teacher on what to do next.

View on Code Studio

Student Instructions

Multi-Page Personal Website

Now that you know how to set up a website, go ahead and set up your own personal website.

Do This

Your personal website is back. So far you have just your personal home page.

View on Code Studio

Student Instructions

Navigation on Personal Website

Now that you have all the files for your website, connect them together!

Do This

  • Add hyperlinks at the top of your index.html file for every page on your site (including the index.html page).
  • In your style sheet, create a rule-set for the a tag that gives it the style that you want.
  • Copy the hyperlinks and put them in every page.

  • Add the a rule-set to every style sheet, or combine your style sheets to make your entire page have the same look and feel!

Once your website is set up and connected, feel free to make improvements to any pages on your website.

Before leaving this level: Take a screenshot of your home page and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .*)

Check List

  • All of your web pages are individual HTML files in this Portfolio Project
  • Created a div with title of website and links to all of your web pages in your website
  • Div is added at the top of each page of the website
View on Code Studio

Student Instructions

Style on Personal Website

Now that you have navigation on each page, you need to figure out how you want to style your website. You have two choices:

  1. Make a style sheet for each web page on your website
  2. Have one style sheet for your whole website to give it a more consistent feel.

Pick one of the two choices and style your website appropriately. Make sure to link the style sheet to the page(s) you want it to apply to. Also make sure that the a rule-set you created on the last level is applied to all your a tags.

Once your website is set up and connected, feel free to make improvements to any pages on your website.

Before leaving this level: Take a screenshot of your home page and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .*)

Check List

  • All of your web pages are individual HTML files in this Portfolio Project
  • Navigation to all the pages exists at the top of each individual page
  • Style has been applied to all pages on the website

Standards Alignment

View full course alignment