Skip navigation.
Classes:

XHTML Unit A

by Sharon Huston

PROJECT DESCRIPTION: Mark up the provided recipe collection using XHTML with a STRICT doctype. This assignment will produce a very boring-looking document!!!!

INSTRUCTIONS:
  1. Read the first three chapters (Introduction through Chapter 3) in Castro's HTML, XHTML, & CSS.
  2. Open this recipe file in a simple text editor such as Notepad or TextEdit. Do not use Word or WordPad.
  3. Save the file as "xhtml1.htm" but without the quotes.
  4. Begin by adding the basic XHTML commands that you read about in the textbook
    1. <head>, <title> and <body>
    2. Make sure you use these in the right place!
  5. Add a STRICT doctype. You may need to visit the W3C or the author's website to find this information.
  6. Now you can add additional XHTML commands. Avoid commands or attributes the textbook lists as deprecated!
  7. Be sure to play with all of the tags in the table shown at the bottom of this page.
  8. Run your finished page through the W3C's HTML Validator. Attempt to fix any errors the validator discovers.
  9. When you are finished, save your page to a USB drive or a floppy disk. You will upload your work to your webspace next class.
    1. Online students, email this page to your instructor as an attachment.

Dreamweaver-Specific Instructions (skip this section if you are not yet using Dreamweaver)

  1. If you are in Dreamweaver, check that you are in DESIGN VIEW. You should see that all the recipes are in one large long difficult-to-read paragraph.
  2. Preview the document in the browser. You'll see it still looks awful.
  3. Go back to Dreamweaver and switch to CODE VIEW. Yes, CODE VIEW looks great in Dreamweaver, but lousy on the screen. Why?
  4. If you examine the document you will see it does not have any HTML commands. Since it doesn't have any HTML commands the browser renders it as one long paragraph. Your job is to add in HTML commands so that the browser understands how to render the document.
  5. Remember -- all XHTML commands must be typed in CODE VIEW. Dreamweaver should automatically make the commands a different color from the text. This is a hint that you're in code view, and it's also a great way to double-check your syntax. If the commands aren't colored you may have a problem. (You may also have to press "Refresh" on the Property Bar to see the color changes.)

 

XHTML Commands for Exercise A
check Command
  <html>
  <head>
  <title>
  <doctype>
  <body>
  headers <h1>, <h2>, etc.
  <p>
  <br />
  comments