LABORATORY 2 Win08 Due date: Friday, Jan. 25, 23:59:59 Document status: FINAL VERSION Laboratory 2 consists of three parts: two of them in XHTML (frames and tables), 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 ASSIGNMENTS 1. Frames (40 pts.) Create frameset with three frames 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.) Your job is to create an XHTML frameset as shown at http://www.classes.cs.uchicago.edu/current/10100-1/html/hwks/hw2/frame_example.html All pages to be loaded into the frameset, including a CSS style sheet, are located in the source directory. You'll have to inspect link targets of the navigation page, 'villa_adriana_nav.html', and find out how to rename your frames so that the pages will load correctly from your directory. As 'noframes' option in your frameset page, provide a link to the table-based layout you'll be creating as part 2 of the HTML assignment. 2. Tables (40 pts.) Create a set of table-based HTML pages that mimics the frameset above. 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. 1. Create a template XHTML page with the table frame. Then, add content to top row and navigation column. You don't have to rewrite the content of the frameset pages. 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 frame of the frameset is called 'maroon' and has the rgb 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 point to other pages of the frameset. Reset the links to match the files you are going to create. It is best to use a consistent naming scheme: table_start.html table_picture1.html table_picture2.html etc. Don't forget to remove the 'target' attributes of the links. 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 picture files of the frameset into the table-based pages. 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: #! The first line in your script should look something like this on your CS account: #!/usr/local/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. 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 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.