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.