Assignment # 2a

This assignment is the first step in your project, the Oracle 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. Also, there are no guarantees that the site will be on-line towards the end of the semester.

You will develop the html for your project in two steps. In the first step (this assignment), you will develop html that is valid according to Xhtml Transitional. In the second step, you will modify this html so that it is valid according to Xhtml Strict. If you prefer, you can just develop the html in one step as Xhtml Strict, and the TAs will give you credit for both 2a and 2b.

You will not need to develop the entire form. You can discard the JavaScript and other elements described below.

Reference Material

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

Learning Goals

• Develop hands-on experience in modifying HTML.
• Understand how to produce valid HTML.
• Develop the submit page for your project.

Project Page

You will use the Oracle registration page as the model for the class project.

The result of Assignment 2 is a valid XHTML page that will be used as the form submit page for your project. 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 Oracle 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.

XHTML Validation

Modify the HTML of the Oracle Registration page, so that it adheres to correct XHTML 1.0 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) the hidden form fields (i.e., type=hidden); and 4) all the blank lines. This should reduce the size of the html file without changing what you will learn from the project.
• Change the action attribute of the form tag so that it refers to a static page in your project.
• Modify the html so that it displays in a browser almost identically to the original Oracle page.
• 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 DOCTYPE in this html page..
• Move any CSS contained in tag attributes to your style sheet located in the head element of the page.
• Add a radio button group with 2 buttons. The buttons should have labels of "Send me promotional literature" and "Do not send me promotional literature".
• Modify your local copy of the HTML using whatever tool you are comfortable with (e.g., text editor, Amaya). You should find that Dreamweaver or 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 page on your hard disk in the event that it changes during the semester.
• 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.
• Notice that the shipping address, community memberships, and subscription services sections are not opened. In the original Oracle site, these sections are expanded through use of Javascript. They are not critical to the project, so they can remain static (and closed) for your 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">