Student Instructions

Making a Multi-page Site

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

<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

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

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

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.

Student Instructions