Assignment #5
Create a 5-Page Web Site
Due: February 28
90 points (9 days)
Create your own 5-page Web site. Any topic is okay so long as it is school-appropriate. Each site must be original and unique.
All Web sites that score 54/90 or higher will be posted online at the NHS Web site.
READ ALL OF THE REQUIREMENTS CAREFULLY.
A. Main Requirements
- Five or more XHTML pages
- All presentation is controlled by CSS (not outdated HTML methods)
- All XHTML pages pass XHTML validation
- All CSS passes CSS validation
- You may copy XHTML or CSS code from class assignment Web sites, but not from other Web sites (e.g. Photobucket, MySpace.)
B. Usability Requirements
- LAYOUT. Two-column layout (header and footer are optional.)
- NAVIGATION. Each page links to each of the others.
- CONSISTENCY. All pages are consistent in layout: navigation, content, logo, etc. are always in the same place on the page.
- TEXT. The text is large enough to read and contrasts strongly with the background color.
- IMAGES. Each page contains no more than 100Kb in images, and no image is wider than 800px.
- TITLES. Each page must have a logical <title> element that identifies both the Web site and the topic of the page.
C. Content Requirements
- TEXT. Each page must have at least one heading (e.g. <h1>) and at least one paragraph of text. This text must be styled in CSS.
- IMAGES. Each page must have at least one image (it can be the same image.)
- LINKS. Each page must have at least one link to an outside URL. Styling the links in CSS is optional.
- TABLE. At least one page must have a table. The table must have a row (<tr>) of table headers (<th>) at the top and at least one row of table cells (<td>). The table must have at least two columns of data. The table must have some CSS styling.
- LIST. At least one page must have a list. The list must be coded as an XHTML list (<ol>, <ul>, <li>, etc.) The list must have some CSS styling.
Getting Started
- Create a folder in your root folder called
lastname_5-page-website, where lastname is your own last name. - Make a new index.html in Notepad, and save it inside your lastname_5-page-website folder. Your home page must be called index.html.
- Make a new style.css in Notepad and save it in this folder too.
- Name your four other Web pages whatever you like, being sure to end the file name in ".html".
- Complete the coding of the Web site according to the Requirements listed above.
- Save and test the pages frequently as you work.
- Test all your pages in the appropriate validators, linked above.
XHTML Skeleton
Here's an XHTML 1.0 skeleton to help you get started:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>title goes here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
page content goes here
</body>
</html>
Turn in Your Work
- In My Documents, navigate down to your lastname_5-page-website folder.
- Right-click on the lastname_5-page-website folder and select Copy.
- Navigate to the Inbox.
- Right-click on the Assignment 5 folder and select Paste.
Assessment
Your Web site will be graded according to how it meets the requirements above. I will be using the rubric below to tally up your score out of a possible 90 points. Click on the image to view the PDF.
A = 81-90 points
B = 72-80 points
C = 63-71 points
D = 54-62 points
F = 53 or fewer points
Extra Credit (up to 10 points)
Here is a 5-page Web site I designed a few years ago:
View the Web site and its source code. Answer these three questions on a sheet of paper:
- In what ways does this Web site meet the requirements stated above? (4 points)
- In what ways does this Web site not meet these requirements? (5 points)
- There's actually a sixth page. Where is it? (1 point)
