Here's the lesson in PDF format:

Standards, Compliance and All that Jazz [8.5MB]

Here are the individual files for Head First Lounge:

lounge folder
lounge.html

about folder (inside lounge folder)
directions.html

beverages folder (inside lounge folder)
elixir.html

images folder (inside lounge folder)
blue.jpg
drinks.gif
green.jpg
lightblue.jpg
red.jpg

HTML 20: Standards, Compliance and All that Jazz

NOTE TO STUDENTS! This assignment will NOT be due today as posted on the white board. It will be due tomorrow. - Mrs. Pedersen, Wednesday night.

Get Set Up

Download the lesson PDF from the green panel on the left.

Use your existing lounge folder. If you do not have one, download the files in the green panel to the left.

 

Exercise 1 [p.232]

1. Read pages 223-232 of the Lesson.
2. Add a DOCTYPE to the Lounge's Web pages:
   • lounge.html
   • directions.html
   • elixir.html
3. Save and test each HTML file in the browser.

 

Exercise 2 [p.234]

1. Read pages 233-236 of the Lesson.
2. Go to http://validator.w3.org.
3. Click the tab for Validate by File Upload.
4. Click on the Browse... button.
5. Navigate to your lounge.html file and click Open.
6. Click on the Check button.
7. Review the results.

 

Exercise 3 [p.237]

1. Read pages 237-238 of the Lesson.
2. Fix the error in the <img> element.
3. Try validating the page again.
4. Review the results.

 

Exercise 4 [p.241]

1. Read pages 239-242 in the Lesson.
2. Add the <meta> element to lounge.html.
3. Save the file and test it in a browser.
4. Try validating the page again at http://validator.w3.org.
5. Review the results.

 

Exercise 5 [p.246]

1. Read pages 243-246 in the Lesson.
2. Change the DOCTYPE to strict in lounge.html:
   1. Remove the word transitional.
   2. Replace loose.dtd with strict.dtd
3. Use the validator again to see if lounge.html is compliant with Strict HTML 4.01.
4. Review the results.

 

Exercise 6 [p.249]

1. Read pages 247-250 in the Lesson.
2. Add a <p> element around the <img> element.
3. Try validating the page again at http://validator.w3.org.
4. Review the results.

 

Exercise 7 [p.251]

1. Read page 251 in the Lesson.
2. Add the strict DOCTYPE and the <meta> tag to the other pages:
   • directions.html
   • elixir.html
3. Try validating them.
4. Do they validate? If not, fix them so that they do.

 

Exercise 8 [p.260] - EXTRA CREDIT

1. Read pages 252-260 in the Lesson.
2. Locate all the errors in the HTML code on page 260.
3. Type the correct code in Notepad.
4. Save the file in the HTML 20 folder as webville.html.
   1. You may test your file at http://validator.w3.org to help you debug it.
   2. You may not remove or change the DOCTYPE.

 

Turn in Your Files

Turn in your lastnamefirstinitial_lounge folder on Friday.

 

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman