NHS Designs - Web Design - Instructions for Final

Recode a real Web site to meet Web standards: discountshades.com.

I have made a couple of modifications to simplify the code. You will only need to do two of the site's pages plus an external CSS style sheet.

Navigate to RMK201\Period X\Outbox.
Right-click on the folder "Final" and select Copy.
Navigate into your root folder.
Right-click in an open, white area and select Paste.
Right-click on the new "Final" folder and select Rename.
Rename the folder "lastname_Final" (replace lastname with your own last name.)

Take a look at the file structure.
1. There is one index.html file and one order.html file at the top level of the folder. These are the pages you will recode into XHTML and CSS.
2. There are many files in the images folder. You will not need to edit or move these.
Convert the Web pages to XHTML 1.0 Strict.
10 points.
1. Add the DOCTYPE listed below to both pages.
2. Add the <meta> tag listed below to both pages.
3. Replace your open <html> tag for both pages with the <html> tag below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bring all the XHTML coding up to speed.
10 points.
1. The <body> tag should not have any attributes.
2. No <center> tags.
3. No <font> tags.
4. Remove any extra unneeded tags.
5. Close any tags that have not been closed.
6. Close empty elements such as <img> and <meta>. <hr> stands for "horizontal rule" and is also an empty element.
7. Make sure all images have alternate text (the alt attribute.)
8. Double-check all your nesting!
Style the background color, text alignment, and fonts using CSS. 25 points.
1. Create a new file in Notepad.
2. Save it in your "lastname_final" folderas "style.css".
3. Inside the <head> element of both HTML pages, put the <link> tag below:

Back in "style.css", create a bunch of CSS rules. Here are a few suggestions for styling certain tags, and creating classes to pinpoint certain areas. You can add more:

Selector	Property	Value
body	background-color	#dedebd
body	font-size	small
p	font-family	Verdana, Arial, Helvetica, sans-serif
h1	color	#186318
.center	text-align	center
.smalltext	font-size	90%
.largetext	font-size	130%

Structure the text on the page.
25 points.
1. Try to match the original font colors, alignment, and sizing as much as possible using CSS. Refer to the original page designs: index.html and order.html. (To view to original code, right-click on a Web page and select "View Source.")
2. For example, use CSS classes above to center or resize <p> elements.
3. Hint: for the large numbers on "order.html", put the .largetext class inside the <strong> tag.
4. Don't worry about the link destinations for missing pages. Leave the href attributes as they are.
Test your XHTML pages.
20 points.
1. Check your XHTML code by uploading both of your pages to http://validator.w3.org.
2. You should see a green banner for each that says "This Page Is Valid HTML 4.01 Strict!"
3. If you do not get that result, read down to see what the errors might be.
4. Start with correcting the first error and retest the page. It may clear up several "errors" when you fix one.
Test your CSS page.
10 points.
1. Check your CSS code by uploading your "style.css" at W3C's CSS Validator (http://jigsaw.w3.org/css-validator/) .
2. Ignore the warnings, but fix any and all errors. Then retest.
3. You're good if you don't see a red error badge across the top of your results.