Studio Session: HTML, XHTML, and CSS Formatting

This studio sessions is for students whose HTML, XHTML, and/or CSS skills are rusty. We'll work on some simple web pages, with and emphasis on standards and guidelines for valid X/HTML and CSS.

Studio Exercise: Basic HTML and XHTML Coding and Validation

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.

Personal Course Web Page

If you have your RIT web pages on Grace rather than Gibson (the new RIT web server), you will need to migrate your site to Gibson. Instructions can be found on the ITS web server, and require you to log in with your DCE user ID and password.

Once your Gibson site has been activated (test it by going to http://people.rit.edu/~yourid), create a webdesign directory in your Gibson www directory, and in it place an index.html page from which you will link all subsequent assignments. (The url to the page should be http://people.rit.edu/~yourid/webdesign/ .) The page must include a (recognizable) picture of yourself and your name, and should include placeholders for links to your midterm and final personal projects, and a link to your class weblog.

Do your best to use the principles of design you learned in 320/741; I want to see the best you can do (that does not mean putting in every type of bell and whistle you can imagine; keep it simple and clean!)

Remember to design for your audience--which in this case is me. I'll be using this page for three primary tasks: associating your face with your name, finding your individual projects, and finding your blog (which is where you'll be putting all your in-class exercises).

I will grade both your coding and your design; be sure to use standards-compliant HTML or XHTML, and CSS for all your formatting. (That means no Flash--it all must be entirely accessible even on a browser with no graphics enabled.)

Please have the site done by noon on Sunday, March 16th. The page should appear properly at the URL specified above by that time.