HOMEWORK 2
Due date: January 20, 2006, 23:59:59
Document status: DRAFT
Homework 2 consists of three parts: two of them in HTML (frames and tables),
the third one is a programming assignment.
A. PRELIMINARIES
Place all files relevant to this assignment into the respective directories
(as explained in the directions for Homework 0). When the assignment is finished,
link all pages to the index.html page in your cs101/hw2 directory.
B. HTML ASSIGNMENTS
1. Frames (40 pts.)
Create frameset with three frames that will display a series of HTML 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/archive/2006/winter/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 HTML frameset as shown at
http://www.classes.cs.uchicago.edu/archive/2006/winter/10100-1/html/hwks/hw2/frame_example.html
All pages to be loaded into the frameset, including a stylesheet, 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 name your frames so that the
pages will load correctly.
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/archive/2006/winter/10100-1/html/hwks/hw2/table_example.html
SUGGESTION: You will need six pages.
1. Create a template HTML 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 HTML 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 remmove 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.pl', that prints a message of your
choice that can be be read in a web browser.
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:
#!/path/to/perl/interpreter
This is a convention on Unix system 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'. These are newline
characters that are required by the HTTP protocol. Without them, your
message will not appear in the browser.
The second 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.pl
You're done. If you now type
./first_script.pl
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, link the script to the index.html page in your hw2 directory, just as if
it were a normal html page. If your message appears in the browser window after
you have clicked the link, you have completed this part of the homework assignment.