LABORATORY 3 Due date: Wednesday, Feb 3, 23:59:59 Document status: DRAFT Read through the assignment and then be sure to check out the Examples and Homework Suggestions links on the course schedule. A. XHTML/CSS 1. Style Sheets: Text formatting (40 pts.) The first part of the assignment is to format the 'story' assigned in hw1, part 2, with an external style sheet in XHTML 1.0 Strict. Copy the story page you created in hw1 into your hw3 directory and remove ALL presentational (i.e. style) and deprecated formatting markup. Insert the xml declaration as the first element on your page: You should now be writing XHTML markup which means you are actually writing in XML and should include a proper declaration to that effect. Next set the document type to XHTML 1.0 Strict and declare the character set by changing/adding following information to the extracted HTML page at the appropriate places: And the element to be: Also, add a link to the style sheet you are going to create. Then write the style sheet. 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 Use these same CSS rules or declarations for part 2. Your presentation should end up looking very close to your final version for hw1. See end of the "Examples" link on the course schedule. 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 by using
s and float properties instead of table cells. There should be three
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: 1. 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'. XHTML elements such as

are allowed, but without properties. 2. Both the HMTL (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 3. 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. 3. 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.) B. PROGRAMMING 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 input meets certain conditions. 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. 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. 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. 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 script can be downloaded from the course schedule page: http://www.classes.cs.uchicago.edu/current/10100-1/html/hwks/hw3/second_script.cgi.tar 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.