Assignment # 2a

This assignment is the first step in Project#1, the Sun Registration student project. This assignment will begin to create a clean version of the HTML page that will communicate with your server software to process the form information. You should download the entire Web page to your computer so that you do not need to repeat the process as you develop the revised site.

You will not need to develop the entire form. In class I will discuss the parts of the site you can discard.

Reference Material

• Tidy GUI
• Amaya
• DreamWeaver CS4 - Trial
• W3C Validator
• WDG Validator
• XHTML specification

You will also find the contents of this zip file to be helpful. The zip file contains the CSS and image files that you may not have been able to download.

Learning Goals

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

Project

This assignment is part of Project#1.

The result of Assignment 2 is a valid XHTML 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 Sun 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 both parts in one step makes it easier by immediately constructing the XHTML Strict version. If you do these together, be sure to let your TA know when you submit assignment 2b so that you receive credit for all 2 assignments.

Part a - XHTML Transitional validation

Modify the HTML of the Sun Registration page, so that it adheres to correct XHTML Transitional HTML. Submit the modified HTML page to your TA as a zip file. Also, include the String URL of the original Web site in the text of your e-mail. A step-by-step approach to this assignment is:

• Save the HTML from your browser as a complete Web page (i.e., images in a sub-directory).
• Remove unnecessary HTML from the file. You can remove 1) all the JavaScript (i.e., anything in between a <script> tag and a </script> tag, including the tag itself; 2) any onxxxxx attributes (e.g., onsubmit = yyyyyyy); 3) all the blank lines; 4) any achor tags that refer to the Sun site; and 5) any <option> tag beyond the first 5 in a group (e.g., you can reduce the number of ticket quntity choices); . This should reduce the size of the html file from about 800+ lines to less than 400 lines without changing what you will learn from the project.
• Validate it using one of the HTML validator services. Be sure that you include a DOCTYPE in your copy of the html page that refers to XHTML Transitional. You can just copy and paste the 3 lines at the bottom of this page into the first 3 lines of your html.
• Modify your local copy of the HTML using whatever tool you are comfortable with (e.g., text editor, Amaya). You should find that Tidy GUI will save you a lot of work by automatically fixing many of the errors.

Hints:

• Be sure to save a complete copy of the original Sun page on your hard disk in the event that it changes during the semester.
• Even though you download the entire Web site, you may not capture the images. If this occurs, you can either separately download the images to your page sub-directory (using the Tools/Page Info/Media option in Firefox) or you can change the html to refer to the absolute URL of the images on the Sun site. The individual download of the images is the preferred approach.
• You will not be able to access all the images you see on the Web page (e.g., Sun logo). You do not need to get the apparance perfect for this assignment. You will be improving the appearance in HW#2b.
• You can use any editor for this assignment, but it will easier if you use an HTML editor such as Amaya or Dreamweaver. Downloads are identified in this page and in the References section of the CSE336 home page.
• Use the DreamWeaver convert feature or the Gui Tidy program (much better) to clean up many of the errors.
• Use the reference material in the HTML Validator to check the correct HTML syntax.
• Be sure that the document has a DOCTYPE element that corresponds with XHTML Transitional.
• Be sure that you fix all the errors. Remember, you will be using this HTML for the forms processing project.

Xhtml Transitional DOCTYPE

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">