Here's the lesson in PDF format:

Standards, Compliance and All that Jazz [8.5MB]

Here's the ZIPped Web site for Head First Lounge:

lounge.zip [39KB]

HTML 20: Standards, Compliance and All that Jazz

Get Set Up

1. Copy the HTML 20 folder from the Outbox.
2. Paste it into your root folder.

In the HTML 20 folder, you will find

• A fresh copy of the Head First Lounge Web site
• The HTML 20 lesson in PDF format

 

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

1. In My Documents, navigate down to your root folder (the one with your last name).
2. Right-click on your root folder and select Copy.
3. Navigate to the Inbox.
4. Right-click on the "HTML 20" folder and select Paste.

 

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