Assignment # 2b

Reference Material

You may find the following CSS reference material helpful in completing this assignment:

• CSS Tutorial
• WDG CSS Reference
• W3C CSS Reference
• W3C Learning CSS Page
• CSS Property table
• Translations from HTML to CSS
• Tidy Gui
• W3C HTML Validator
• WDG Validator
• W3C CSS Validator
• XHTML Specification

Learning Goals

• Develop hands-on experience with CSS.
• Understand how to produce valid HTML Strict.
• Develop the submit page for Project#1.

Project

This assignment is part of Project#1.

The result of Assignment 2 is a valid HTML page that will be used as the form submit page for Project#1. You can complete this assignment in one of two ways, either by creating the page from scratch (reverse engineering it) or by starting with the Sun page and then modifying it until it is valid. The second approach is probably the best, but if you are highly skilled at creating Web pages, you might find the first approach easier.

If you take the second approach, the assignment consists of 2 parts (a and b). In part a, you will correct the HTML page so that it is valid according to XHTML Transitional. In part b, you will add an additional CSS style sheet so that the page is valid according to XHTML Strict.

If you already know something about CSS and XML, you will likely find that doing Assignment 2 in one part makes it easier by immediately constructing the XHTML Strict version. If you do these together, be sure to let me know when you submit assignment 2b so that you receive credit for all 2 assignments.

Part b - XHTML Strict validation

Further modify the HTML of the Web page (Assignment 2a) so that

• It is in compliance with XHTML Strict
• It uses an external style sheet for all styling information

Submit the assignment by sending your assigned TA a zip file including the completed HTML page and the style sheet (.css file). Be sure to include the URL of the original page in your e-mail.

Hints:

• Be sure to change the DOCTYPE tag to identify the html page as being consistent with XHTML Strict.
• Use the Tidy program to make a first conversion to CSS (available in Tidy GUI).
• Use the reference material in the HTML Validator to check the correct HTML syntax. You may find that the WDG validator is more helpful because of the links in the error messages to HTML tutorial information.
• If your HTML has errors, you may find that different validators show different error messages. This is to be expected, but if your HTML is correct, all validators should show that there are no errors.
• For help in converting specific HTML tags to the proper CSS syntax, consult a very helpful Web page prepared by the CSS Pointers Group.
• First include the style information in a style tag within the document.
• After the style tag is working, move the style sheet to a separate file, replacing it with a style reference (using a LINK tag).
• The Tidy program will create a number of HTML classes (c1, c2, etc.). Modify these so that you have a minimum number of HTML classes. Note that this is the most difficult part of the assignment. To do this correctly, you need to understand the styling intent of the page designer, and abstract that intent to the proper number of classes.
• You will see that there are already style sheets referenced in the Sun document. You can have multiple style sheets in a document, with the later ones overriding the earlier ones. So, one option is to use the existing style sheet, but make sure that your style sheet occurs after the Sun CSS links in the document. This way you can override easily. Another approach is to start with the Sun style sheet, and then improve it. Both approaches are fine, but the second is more difficult.
• You will also need additional Sun style sheets and images. These will be added to this page soon.