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
<html>
<head>
<title>First HTML Assignment</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Clock #</th>
<th>Wage</th>
<th>Hours</th>
<th>OT</th>
<th>Gross</th>
</tr>
</table>
</body>
</html>
Enhance the file with the following:
Include a title tag that contains your first name, lastname, and MyFirstHTML.
Include a header tag (<h1>) 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
<html>
<head>
<title>Gross Pay Calculator</title>
</head>
<body>
<form>
</form>
</body>
</html>
Enhance the file with the following items in the order given:
Add a <h1> 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 <hr> 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
<?xml version="1.0"?>
<employees>
<employee>
<name>Connie Cobol</name>
<idnumber>098401</idnumber>
<wage>10.60</wage>
<hours>51.0</hours>
<overtime>11.0</overtime>
<gross>598.90</gross>
</employee>
</employees>
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.
USA 
India