Studio Exercise: Basic HTML and XHTML Coding and Validation (12 March 2008)
This exercise should primarily be review from your 320/741 coursework.
Begin by copying the text of the following recipe into a text file:
Ingredients:
* 1 1/2 pkgs. (12 oz.) Baker's Semi-Sweet Chocolate
* 1 pkg. (8oz) Philadelphia Brand Cream Cheese, softened
* 3 c. powdered sugar
* 1 1/2 tsp. vanilla
* Ground nuts,unsweetened cocoa,or Baker's Angel Flaked Coconut (toasted)
Melt chocolate in large microwavable bowl on high 2 to 3 minutes or until almost melted, stirring after each minute. Stir until chocolate is completely melted. Set Aside. Beat cream cheese until smooth. Gradually add sugar, beating until well blended. Add melted chocolate and vanilla; mix well. Refrigerate about 1 hour. Shape into 1-inch balls. Roll in nuts, cocoa, or coconut. Store in refrigerator. Makes about 5 dozen candies.
Now turn that text file into an HTML 4.01 document. (Make sure you use the right DOCTYPE.) The title of the recipe should use a heading tag, the ingredients list should be an unordered list, and the description should be paragraphs. Add some basic CSS to the document to format the appearance of the text. When you're done, save it as htmlrecipe.html, and validate it (use the "validate local HTML" option in the web developer toolbar, or upload the file directly to the W3C HTML validator. If the validator finds problems, correct them. When you're done, upload the file to Gibson (I suggest creating a subdirectory in the www directory to hold in-class exercises, but you can put the file wherever you want so long as you link to it in your blog entry about the exercise.)
Now make a copy of the file, and name it xhtmlrecipe.html. Modify the DOCTYPE and the markup so that it is XHTML compliant. Remember that the following things are true about XHTML:
- all elements and attribute names must appear in lower case
- all attribute values must be quoted
- non-empty Elements require a closing tag (e.g. <p> and </p>
- empty elements are terminated using a space and a trailing slash (e.g. <br /> or <img src="image.gif" alt="Picture" />)
- in strict XHTML, all inline elements must be contained in a block element (a quick guide to block vs inline html)
Once you've completed and validated your XHTML document, place it online, as well.
Write a blog entry that discusses any problems you had with creating and/or validating the document, or any questions you have about HTML and XHTML validation. Make sure that you link to your two completed files from the blog entry.
There are no recorded trackback links from other weblogs.
Thanks for signing in, . Now you can comment. (sign out)
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)
(Trackback link: http://www.it.rit.edu/~ell/mt/mt-tb.cgi/2526)