LABORATORY 2 Due date: Wednesday, Jan. 26, 23:59:59 Document status: FINAL (barring any further corrections) Laboratory 2 consists of three parts: two of them in XHTML (tables AND CSS), the third one is a programming assignment in Perl. A. PRELIMINARIES Place a copy of all files relevant to this assignment into the respective directories (as explained in the directions for Laboratory 0). These consist of the files found in the directory /villa_adriana_source/" addressed below. All these files can be accessed through links on the Course Schedule. B. XHTML and CSS ASSIGNMENTS B-1: Tables (40 pts.) Create a set of table-based HTML pages that will display a series of XHTML pages in the manner of a picture presentation. The picture pages have already been created for you, and are located at http://www.classes.cs.uchicago.edu/current/10100-1/html/hwks/hw2/villa_adriana_source/ (This is our 'source directory' for this assignment; it can also be accessed from the course schedule webpage.) An example is given at http://www.classes.cs.uchicago.edu/current/10100-1/html/hwks/hw2/table_example.html SUGGESTION: You will need six pages total: 5 image content pages and a 6th start page. There will no longer be separate "nav" and "banner" content pages. 1. Create a template XHTML page with the table structure. Then, add content to top banner row and navigation column. You will have to modify the provided web pages to add the appropriate content and markup from the start page. Open the banner and navigation pages in your browser and view the source page. Copy the
s that contain the content elements and paste it into the appropriate table cells. Also, copy the element from the source into the head of the XHTML template. The background color used in the banner is called 'maroon' and has the rgb hex value '#800000'. It is part of the style sheet definition for the banner. In order to add background color, add the attribute class="banner" to the tag that contains the image. 2. The links in the navigation page will point your modified versions of the provided content pages. It is best to use a consistent naming scheme for your modified versions: table_start.html table_picture1.html table_picture2.html etc. 3. Save your template, make five copies, and name them according to the naming scheme devised when you set up the links. 4. Now edit new pages and cut and paste the content of the provided picture files into the table-based pages. B-2: CSS (40 pts.) Create a web page for the "America America" playbill using the provided goal layout using only an External CSS stylesheet and
elements for encapsulating different portions of the source content. The base files can be downloaded from the link for "CSS Layout Lesson" on the Course Schedule page: http://www.classes.cs.uchicago.edu/current/10100-1/html/crssched.html The tar file can be decompressed by the Mac system, or use of 7-Zip (http://www.7-zip.org/), or the tar command in unix: tar -xf CSSlayout.tar after it has been downloaded. See the Bojack text chapter handed out in class for further help. C.PROGRAMMING (20 pts.) Our first programming assignment doesn't have much to do with programming. Its purpose is to learn how to set up a script so that it runs. The specifications for the script are quite simple: Write a Perl script, called 'first_script.cgi', that prints a message of your choice that can be read in a web browser. Be sure you put it in your laboratory directory in your cgi-cmsc activity path. a. Find out the path to the Perl interpreter on CS network by typing which perl on the command line. The output of this command must be the first line in your script preceded by these two symbols: #! {They alert the server to special input.} The first line in your script should look something like this on your CS account: #!/usr/local/bin/perl or #!/usr/bin/perl {this connects you to the perl interpreter.} If you are using some other computer, the path may well be different. This path is a convention on Unix systems that passes the script that follows to the interpreter and executes it (provided that the interpreter is at that location). The script will execute two simple lines. The first one must be EXACTLY as stated here: print "Content-type: text/plain\n\n"; It is crucial that the text string ends with two '\n' symbols. These are newline characters that are required by the HTTP protocol. Without them, your message will not appear in the browser. The second line should look similar to this: print "YOUR MESSAGE HERE.\n"; Please replace YOUR MESSAGE HERE with a text string of your choice. Save your file. Test it both locally at the command line, and by going to the URL for the program via your browser. b. Make your script executable so that it can be run from the command line without explicitly invoking the Perl interpreter. While being in the same directory as the script, type chmod 755 first_script.cgi These permissions set the file to be: -rwx r-x r-x, or in English: owner can: read, write and execute, group can: read and execute, public can: read and execute. You're done creating your first program. Now you need to test it. If you now type ./first_script.cgi OR perl first-script.cgi on the command line and see your message appearing on the screen, you've successfully written your first script. The output of the script should look like this Content-type: text/plain YOUR MESSAGE Now, go to the index page in your browser for your hw2 directory. It should list your program as an item on the index. If just your message (without the first two lines of code) appears in the browser window after you have clicked the link, you have completed this part of the laboratory assignment.