LABORATORY 3

Due date: Wednesday, Feb 1, 23:59:59

Document status: Preliminary

Read through the assignment and then be sure to check out the
Examples and Homework Suggestions links on the course schedule.

A. XHTML/CSS

Part 1. Style Sheets: Text formatting (40 pts.)

You have a choice for the first part of the assignment.  You may either 
format the 'story' assigned in hw1, part 2, with an external style sheet 
in XHTML 1.0 Strict, or you may construct your own equivalently difficult 
web page content with pictures placed variously and some sort of text 
flowing around them also with an external style sheet under strict.

Note that the sample version of the story has internal links to go to 
different tales with return links back to the top. A creative option 
page must also have similar internal links. 

The style sheet does not need to be extensive but must control:

  fonts
  text/image alignment (images may not bounce against text; you 
      are free to move images)
  page margin
  
Your presentation for the first option should end up looking very close 
to your final version for hw1, for the creative option it should have a 
professional finished look for your own created web page.  See end of 
the "Examples" link on the course schedule.

Part 2. Style Sheets: Division-based page layout (40 pts.)

Using the same layout structure as in the table-based design of 
hw2, create a design for the Villa by using <div>s and float properties 
instead of table cells.  There should be three <div>s: a top banner div, 
a left-floating navigation div, and a right-floating main div. 
Use images and content from hw2.


Requirements for XHTML/CSS markup:

a) There may be NO presentational markup, such as deprecated HTML elements 
and attributes, or inline CSS properties, in the HTML pages. The only 
formatting attributes allowed in HTML pages are 'class' and 'id'. XHTML5
elements such as <p> are allowed, but without properties.

b) Both the HMTL5 (via XHTML 1.0 Strict) and CSS pages must validate 
without errors at:

  http://validator.w3.org/#validate_by_upload
  http://jigsaw.w3.org/css-validator/#validate_by_upload

c) The designs must closely match labs 1 & 2 when viewed through the 
Mozilla/Firefox and Safari browsers installed on the 
Mac OSX computers in the MacLab, or equivalently different browsers
on the other platforms. (There may be small differences, 
but over-all appearance, colors, alignment, borders, etc. must be 
the same.)  The designs must hold up to window-resizing, that is, 
the alignment of text and images should reasonably remain the same 
in a narrow or wide window.  It is fine for a fixed width to stay
constant.

d) All pages must look 'well' when viewed through a text browser 
like 'lynx' or 'links'.  (The layout should arrange images in such a 
manner that they are distinguishable from text when viewed in a text 
browser.)

To run lynx, ssh to a CS machine and type
  lynx url_of_web_page
That is, give the command "lynx" (or links) space "URL".


B. PROGRAMMING

Part 3. Input checking (20 pts)

Your are given a Perl script that accepts input from the command line. 
Your assignment is to extend the script and test if the user input meets 
certain conditions given below.  When it does, your code has to result 
in some kind of action, as specified below.

First, pick a number from 1 to 5.  This is your 'magic number'.

Here are the three conditions and the expected result:

1.  When the command line input is 'q' (lower case letter q):

    Result: Your program must terminate ('q' stands for 'quit'). 
    The statement that terminates a script in Perl is
    
        exit(0);

2.  When the input is your 'magic number':
    
    Result: Your code must print a message to screen that informs 
    the users that they have entered the correct number.

3. When the input is neither of the above:

   Result: Your code must print a message to screen that informing 
   the users that the input was incorrect.


Save the script in your hw3 directory under the name 
second_script.cgi and make it executable. (Note because of our
using the cgi-cmsc sandbox, all our programs will have to have
a .cgi suffix.)

# ------------------------------------------------------------------ #
The framing script can be copied to your directory via the cp (copy) command 

cp /stage/classes/current/10100-1/html/hwks/hw3/second_script.cgi.tar second_script.cgi.tar

or downloaded from the course schedule page:

  http://www.classes.cs.uchicago.edu/current/10100-1/html/hwks/hw3/second_script.cgi.tar
  
Then move the script file into your hw3 directory.  
To extract the perl file, type

  tar xf second_script.cgi.tar

# ------------------------------------------------------------------ #

FINALLY:

Either have no index.html file in directory /hw3 or explicitly create links to 
all HTML and CSS files in an index.html file that you put in directory hw3.