Lab 02 - The Schedule of Things to Come

Introduction

This 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:

 

  1. Create a table to hold the schedule for an event your unit has (flight schedule, PT schedule, duty schedule, unit sponsored triathlon etc.). The schedule will provide the timing and duration of each module or event. You are limited only by your creativity! (Well, that, and the requirements below).
  2. Create a sign-up form of some kind (e.g. leave requests, change of address/phone number, unit dining-in seating reservation, working party volunteers, correspondence course request, MWR team registration, spouse club cook-off recipe submissions, etc.)

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.

Requirements

  1. Directory: You must create a folder on your WEB drive called "Lab02" (without the quotes) and store your work in that directory. You are encouraged to copy your lab from week 1 into this directory and make changes to it there!  See the figure at the end of this lab regarding where files should be.
  2. Table: you must create a new page, Lab02/schedule.html, which contains an XHTML 1.1 table that meets the following criteria:

·        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 three days/time slots of events and four events on each day/time slot. 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.

  1. Form: you must create a form for users to sign up for something. This form may be on any page – index.html, schedule.html, or a new page you create.  Pick what works best for your site. Specifics:

·        There is some series of links to get from your index.html page to the page that contains your form.

·        Your form collects necessary information from the user such as name, rank, SSN, 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.

·        These forms should contain at least one of each of these input types: hidden, submit, reset, text, password, checkbox, radio button, text area, and select input fields. Tip: for password, 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.

·        Use /Users/cs/lmcdowel/courses/it350/tools/FormChecker/submit.cgi  as the action for your form.  (Later in the course you will write your own version of this)  You can use either 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.

 

  1. Graphics: you may store your images either in your “Lab02” directory or in the “images” directory that already exists in the top level directory of your web drive. 

 

  1. Links:

·        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/schedule.html

·        All links must work.

Your web page must follow the guidelines given in the course’s Lab Guidance page, including the limitations on acceptable editors.

Extra Credit

For a nominal amount of extra credit do the following:

1. Tables are often used to help with web page layout.  Create a new form, perhaps to have the user buy something from your site.  Then make appropriate use of a table inside your form to nicely layout your form input elements.

Deliverables

  1. Your main web page (inside Lab02) should be called "index.html" (without the quotes).
  2. All of your web pages should be valid XHTML 1.1 as verified by the W3C web page validator.
  3. Your schedule page (and separate form page, if any) should contain all of the elements described in the requirements section above.
  4. When you turn in this lab, the index.html should be stored in a folder called "Lab02" (without the quotes) on you WEB drive. Your instructor will assume that your deliverables are viewable at http://www.mXXXXXX.it.cs.usna.edu/Lab02/index.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
  5. Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):

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.  If the W3C validator is not working when you need it, you may substitute results from http://www.validome.org/ instead.

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)

            www.m0XXXXX.it.cs.usna.edu/

                        default.htm                                (main page for the course; has links to each week’s lab)

Lab01/

                                    index.html

                        Lab02/

                                    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)