In the following link you will find the startup files for the two web documents that you will create for this exam

Part 1—Hamilton Conference Center (Tables and Columns)

The Hamilton Conference Center in Hamilton, Ohio is a general-use facility for the community that hosts several organizations and clubs as well as special events and shows by local vendors. The center recently upgraded its intranet capabilities and would like to create a website where employees and guests can easily track which conference rooms are available and which are being used. They would like this information displayed in a web table that lays out the room use for seven rooms and halls from 8:00 a.m. to 5:00 p.m. in half-hour increments. Eventually this process will be automated by the conference’s web server, but for now they have come for help in setting up a sample web page layout and design.

In the following link you will find the startup files containing the image file that can be use for the station's logo and much of the text for the web page.  The image above is a basic example of what it could look like, but you may include your own touches.

1. Start two new files, an HTML document named "Exam2a.htm" and a stylesheet named "Exam2a.css." Add your name and the exam due date in the comment section of each file.
2. Link the "Exam2a.css" stylesheet to the "Exam2a.htm" web document.
3. Using the content of the "hcc_rooms.txt" file, create the content and structure of the "Exam2a.htm" page as you see it above.  Use the "#" symbol for the value of the href attribute in your hypertext links in the horizontal nav bar because you will be linking to pages that do not actually exist.
4. Add a 2-column layout to the section of your document where the first column begins "To reserve a room ..." and the second column "Cancellations require ..."; include your column styles in the "Exam2a.css" style sheet file.
5. Include an e-mail link to "yancyinwe@hconfcenter.org."
6. Create a table containing the room reservation information; the table structure should contain the following elements:
   • A table caption
   • Table row and column groups
   • Examples of row- and/or column-spanning cells
   • Examples of both heading (th) and data cells (td)
7. Create styles for your table in the "Exam2a.css" style sheet; the layout and appearance of the table should include the following:
   • A border style applied to one or more table objects
   • A style that defines whether the table borders are separate or collapsed
   • Styles applied to table rows and column groups
   • Use of horizontal and vertical alignment of the table cell content
   • Different widths applied to different table columns
   • Styles applied to the table caption
8. Document your code in the HTML and CSS files with appropriate comments.
9. Use the image above to create your web page exactly as it appears or simply as a starting guide (for a reduction in grade) if you cannot complete the web page as per the image above (the room reservation table must match exactly that above).

Part 2—Millennium Computers (Input Forms)

Millennium Computers, a discount mail-order company specializing in computers and computer components, wants to create an order form web page so that customers can purchase products online.  The order form is for computer purchases only.

In the following link you will find the startup files containing the image file that can be use for the company's logo and also "Go" and "Stop" buttons.  The image above is a basic example of what what it could look like, but you may include your own touches.

There are several options for customers to consider when purchasing computers from Millennium.  Customers can choose from the following:

• Processor Speed: 2.4 GHz, 3.2 GHz, 4.0 GHz, 5.2 GHz
• Memory: 1 GB, 2 GB, 4 GB, 8 GB
• Monitor Size: 15", 17", 19", 21"
• Hard Drive: 240 GB, 500 GB, 750 GB, 1 TB
• DVD Burner: yes/no
• Tuner Card: yes/no
• Media Card Reader: yes/no

1. Start two new files, an HTML document named "Exam2b.htm" and a stylesheet named "Exam2b.css." Add your name and the exam due date in the comment section of each file.
2. Link the "Exam2b.css" stylesheet to the "Exam2b.htm" web document.
3. In the "Exam2b.htm web document, use the "#" symbol for the value of the href attribute in your hypertext links in the horizontal nav bar because you will be linking to pages that do not actually exist.
4. For the form, the method is post and the action is "http://www.mill_computers.com/orders/process.cgi" which will implement the "formsubmit.js" file from the startup files.
5. Design a page for Millennium Computers and insert any styles you create in the "Exam2b.css" stylesheet; use the "mc_logo.png" file and additional text to complete the look and content of the page.
6. Be sure the form contains the following elements:
   • Input boxes for the customer's first name, last name, street address, city, state, zip code and phone number; the field names and ID's should be fName, lName, street, city, state, zip and phone respectively
   • Add validation checks marking all of the customer contact fields as required
   • Use a regular expression pattern to ensure that each user enters his or her zip code and phone number in the correct format
   • Add selection drop-down lists for the processor speed, memory, monitor size and hard drive size; the field names and ID's should be pSpeed, mem, monitor and hd respectively; the option value attributes should match the option text (for example, if the text for an option is "2.4 GHz" the value should be "2.4GHz" as well)
   • Include option buttons for the DVD burner, tuner card, and media card reader options; the field names and ID's should be dvd, tuner and mcard respectively
   • Use a check box for the warranty field that asks customers if they want the 24-month extended warranty
   • Add a text area box requesting additional information or comments on the order
   • Include three form buttons: a submit button with the text "Send Order", a reset button with the text "Cancel Order" and a command button (it will have no actual functionality) with the text "Contact Me"
7. Create styles for your form in the "Exam2b.css" stylesheet.
8. Create style rules to highlight input boxes that receive the focus plus rules to employ inline validation for missing or incorrectly entered data that use the "Stop" and "Go" images from the "startup files" download.
9. Document your code in the HTML and CSS files with appropriate comments.
10. Use the image above to create your web page exactly as it appears or simply as a starting guide (for a reduction in grade) if you cannot complete the web page as per the image above (the schedule days and times must match exactly those above).

Test your layout and design on a variety of devices, browsers and screen resolutions to ensure that your sample page is readable under different conditions.

Create a .ZIP archive of the entire folder than makes up your "Exam 2" web pages and submit it to the instructor in the "Exam 2" dropbox in Blackboard before 11:59 p.m. on the due date listed in the course outline.