Assignment 4 - HTML and XML

For this assignment all you will need is a simple text or HTML editor (HTML Square Free Editor, notepad, textwrangler, wordpad, etc.) and a web browser (IE, Firefox, Safari, etc.). Please attach a total of three (3) files, two will have htm (or html) extensions, and the other will have an xml extension. See notes at the end of this assignment for tips on creating these files.

1. HTML Page

Given the template below, create a file called MyFirstHTML.html

Name	Clock #	Wage	Hours	OT	Gross

Enhance the file with the following:

Include a title tag that contains your first name, lastname, and MyFirstHTML.

Include a header tag (

) that says "Employee Payroll".

Complete the table using the Employee Payroll information listed below.

Employee Payroll information to complete the table:

Name	Clock	Wage	Hours	OT	Gross Pay
Connie Cobol	098401	10.60	51.0	11.0	598.90
Mary Apl	526488	9.75	42.5	2.5	426.56
Frank Fortran	765349	10.50	37.0	0.0	388.50
Jeff Ada	034645	12.25	45.0	5.0	581.88
Anton Pascal	127615	8.35	0.0	0.0	0.00

2. HTML FORM

Given the template below, create a file called MyFirstHTMLFORM.html

Enhance the file with the following items in the order given:

Add a

tag that says "Gross Pay Calculator".

Add text label "Wage" and a text input field for "Wage".

Add text label "Hours" and a text input field for "Hours".

Add text label "OT" and a text input field for "OT".

Add text label "OT Pay factor" and a text input field for "OT Pay factor".

Add a button with the name of "Calculate".

Add a

---

tag.

Add text label "Gross" and a text input field for "Gross".

If you want your HTML Form items to line up nicely, you'll have to embed them within table (td tags) within a table structure 3. XML document

Given the template below, create a file called MyFirstXML.xml

Connie Cobol 098401 10.60 51.0 11.0 598.90

Enhance the file by adding the information for Mary Apl, Frank Fortran, Jeff Ada, and Anton Pascal.

Create the three files as specified above, but add the following information:

Add five new form elements to your HTML form (myFirstHTMLFORM.html). In addition to another text field, include at least one field using a radio button, one field that is a pick list, one field that is a large text area, and one field that is a check box.

Add those five corresponding columns you used in your HTML form above, along with their values (you can decide) for each employee, to the HTML Table (myFirstHTML.html file).

Add five XML tag items based on the values in your expanded HTML table above for EACH employee to your XML file (myFirstXML.xml)

To Recap: Pick any five field names you wish based on the specific element types I asked for in the HTML form. Flow those five new field names down along with the corresponding values for each employee when you expand your HTML Table and XML files for the challenge.