Last week we introduced XHTML tables and demonstrated how they can be used to present information. We've also talked about web forms and how they can be used to send information to a web server.
For this week’s lab, you are going to do two things:
This lab will be building directly onto the page you created for lab 1. We highly recommend carefully reading this entire lab before you start.
· The table has a caption, summary, border, header, and footer
· The table provides some useful information regarding a schedule of events for your themed web site
· The schedule should encompass the events for at least two days/time slots of events and three events on each day/time slot (so the body of your table should have at least 2 rows and 3 columns). Be creative!
· The table must use spanning techniques to have one data element span two or more rows and another data element span two or more columns.
· At least one row or column has the horizontal or vertical alignment set different from the default. This needs to be accomplished without using CSS.
· Your form collects necessary information from the user such as name, rank, e-mail address, leave address, leave phone number, new address, new phone number, seating preferences (table number), special dietary requests, working party, course title, course number, sport, team name, ingredients, directions, etc as appropriate for your topic.
· Your form should contain all of the following input types:
· password (TIP: either assume the user has an existing account or ask them to create a password to be used for possible changes to their request later)
· radio button
· text area
· Use http://www.usna.edu/Users/cs/adina/teaching/it350/tools/FormChecker/submit.cgi as the action for your form. (Later in the course you will learn how to write this) Should you use GET or POST ? – pick the one that is appropriate for your form. Test that each of the inputs correctly transmits its information by viewing the output of submitting your form.
· Lab02/index.html (the page you created last week, copied into Lab02) must have a link to your schedule page
· The schedule page has a link back to Lab02/index.html
· The main student page of your web site (default.htm) must have a link to Lab02/index.html and a link to Lab02/schedule.html
· There must be some way to follow links to get from your index.html page to the page with your form
· All links must work.
· Since all these links are for pages within the same website, all the links need to be relative links, not absolute links.
Your web page must follow the guidelines given in the course’s Lab Guidance page, including the limitations on acceptable editors.
For a nominal amount of extra credit do the following:
1. Add real email submission to your form! First, make a copy of the page with your form in it. (I need to see the original version of your form, that doesn’t send email, for grading). Then, read about FormMail/yForm. Make some small changes to make your form send e-mail to yourself. Add a link to your new form – make it clear which form sends email. (NOTE – the USNA script for this works, but imperfectly. Use ‘yForm’, not ‘FormMail’).
a.) A completed assignment coversheet. Your comments will help us improve the course.
b.) The first page of the output of the W3C validator, as run on the final version of your Lab02/schedule.html. This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate.
c.) First page of the validator output for the file that contains your XHTML form (if not in schedule.xhtml).
d.) A printout of the source to your Lab02/schedule.html file (not the rendered page that you normally see with Internet Explorer).
e.) A printout of the source to the file that contains your XHTML form (if not in schedule.html).
When finished, the structure of your web site should look like this: (items in blue shall undergo creation/modification during this lab)
default.htm (main page for the course; has links to each week’s lab)
index.html (the main page of your unit that you created last week)
schedule.html (the file with a table containing some schedule info)
form.html (a file containing an XHTML form. This page is optional – you can include the form in a different page if you wish)