IT350 - Web and
and shown you how it can be used to customize and animate the user's
experience. For this lab you will practice using this knowledge on some warm-up
exercises and then create a dynamic table generator.
Note that you have two weeks to work on this lab – see
the calendar for specific due dates.
Read this lab completely before you begin.
You must create a folder on your web drive called
"Lab05" (without the quotes) and store your work in that directory. Copy your work from Lab03 (not Lab04)
into this directory.
- greeting.html: Create a new XHTML page,
Lab05/greeting.html. This page
that does several things:
controls the color scheme of the page based on the time of day. For
example, from 0500 to 1000 your page will use a "morning" color
scheme and from 1000 to 1700 it uses a "day" color scheme, and
so on. Your page must have at least three (3) different color schemes
which are all easy to read. No black text on a dark gray background!
(Hint: External cascading style sheets are your friend!)
displays a quote which is randomly chosen from a set that you
provide. The quote should appear
at the top of your page, and you must have at least 5 different quotes
that your program chooses from.
Hitting Refresh on the page should cause a new quote to be
displayed (unless the same one is randomly picked). Your quotes can be
humorous, inspirational, motivational, or whatever else you choose, so
long as they are appropriate for a military environment and properly
attributed to their source. (Hint – see section 10.5 of the text
for help on random number generation).
flow knowledge from Chapters 8-9.
This is similar to Java/C syntax, but you should at least skim
through those chapters before proceeding.
- table.html: Create a new XHTML page, Lab05/table.html. This page should ask the user a series
of questions, then produce a table showing the result:
- First, ask the user
what kind of table border they would like. For instance, you might ask something
You don’t have to ask this particular question, but it must be some
multiple choice question about table design where the correct answer is an
integer. If the user hits cancel
or enters an invalid number (like “5” or “two”)
then you must ask this question
again until the value is acceptable.
- Second, ask the user
another question about the table style, like this:
This question can be anything that will affect the table style. If they press cancel or enter an
invalid value (for multiple choice), you
must ask again until the value is acceptable.
- Next, ask for the
number of rows in the table:
You must check that an integer greater than zero is entered.
- Now start collecting
actual data for the table. You
don’t ask for the number of columns explicitly; instead, a row is
over when the user hits “Cancel” instead of entering a value. Here is how this might look for one
Your prompt must include the current row and column number that data is
being entered for.
- Finally, output the
actual table (so it is display in the browser window) based on the
user’s inputs. For the
entries above, this should look like something like:
You must display some kind of
welcome text that appears both above and below the table. The specific text should reflect your
overall lab topic.
Hint #1: to get a border like this, the styling must be applied directly
to the <td> element, and you must set both the border width and
style. However, you can choose to apply any kind of border to the table,
so long as it is influenced by the questions you ask, and the questions
meet the requirements above.
Hint #2: you will probably find it easier to generate the table as the
user enters input (e.g., output the HTML for each cell as soon as the
user enters the value for that call) instead of collecting all the
user’s input, then outputting all of the table.
- Links: There must be a link from your default.htm page and
from your Lab05/index.html page to both greeting.html and table.html.
Your web page must be constructed using Notepad or a similar text-only editor. The use of
programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion,
Mozilla Composer, etc. will be considered an honor offense.
Your pages should have a prelude
specifying the type of XHTML document it is, and should generally look like
XHTML (including closing tags etc.) – but you are no longer
required to validate. You are
though, encouraged to do so – you will lose credit for pages that
don’t display properly in other browsers because of invalid XHTML. Note
that if your XHTML page has an empty body, you should use XHTML 1.0 Strict
(like the first examples in Chapter 7).
Note that all vars are global for the life of the page. This means that vars are persistent and available to other parts of a script (or
other scripts, if you have more than one).
For a nominal amount of extra credit do some/all of the
following: (more may appear later)
your table generator so that in addition to the table itself, it displays
(below the table itself) the XHTML that is needed to generate the table. (The
idea here is that you should then be able to cut and paste this code into some
type of text editor to use it).
your table generator so that you can make some cells span rows and or
columns. Describe on the back of the
cover sheet how the user can do this (although ideally it should be
self-explanatory from using your page).
a lot more you could do with a dynamic table generator. Make some other enhancement and describe what
it does (you may want to check with your instructor first to make sure this is
suitable for credit).
- Your pages should contain all
of the elements described in the requirements section above.
- All of your files should be
in a folder called "Lab05" (without the quotes) on your web
drive. You are welcome (and highly encouraged) to copy your files from
Lab03 (not Lab04) into this directory. Your instructor will assume that
your web pages are viewable at http://www.mXXXXXX.it.cs.usna.edu/Lab05/greeting.html
(and table.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!
- Turn in the following
hardcopy at the beginning of class on the due date, stapled together in the
following order (coversheet on top):
- A completed assignment
coversheet. Your comments will help us improve the
- A printout of the source to your
- A printout of the source to your Lab05/table.html
- If you use any
external script files, include a printout of those too.