Lab 12 - Doing it with style
Overview
Today we're going to experiment with beautifying HTML pages with CSS stylesheets. We'll do everything from within Perl, and use CGI.pm for everything. Printing raw HTML tags (e.g., "<body>") is not permitted on this lab.

 

Getting started

First, let's write a simple Perl application that generates a basic Web site. We'll build things up from there.

Do this:
Write a simple Perl program called randomquote.cgi. Although the name of the file ends in .cgi, let's not worry about the CGI component for now. Make your program generate and print a random quotation every time it is run. Given below is a sample list of random quotations - your program should randomly pick something from the list and print it every time it is run. For a hint on how to get a random element, see the PerlDoc for rand.

Here are some quotes for you to use:

my @oneliners = ( "A bird in the hand makes it awfully hard to blow your nose.",
                  "Today is a day for firm decisions!! Or is it?",
                  "A day without sunshine is like night.",
                  "A professor is someone who talks in someone else's sleep.",
                  "A radioactive cat has 18 half-lives.",
                  "An apple every eight hours will keep three doctors away."
                  );

When your program is run, it should look something like this (although, of course, the quotes chosen will be random):

jpr@sulu (i211/lab12) % ./randomquote.cgi
A professor is someone who talks in someone else's sleep.
jpr@sulu (i211/lab12) % ./randomquote.cgi
An apple every eight hours will keep three doctors away.
jpr@sulu (i211/lab12) %

 

CGI scripting...

Now time to turn your humble quote generator into a CGI program.

Do this:
Add calls to header, start_html, and end_html in the proper places to turn your program into a CGI program. Use the -title argument to start_html to set the title of your page to something descriptive. Copy it into the /var/www/cgi-bin/YOURNAME directory and make sure it works. Everytime you refresh your browser, it should give you another quote.

 

Making it prettier

Now time to dress up the script a little bit. We want to end up with something like in the picture below, but more colorful.

The background of the top box should be a color, the background of the quote should be a different color, and the submit button "generate another quote" should be colored nicely and should cause the script to run again and generate another quote. We're going to do this with CSS.

Do this
Create a file called styles.css in your public_html directory. Type into it the following CSS code: 
.headerClass {

}

.quoteClass {

}

.buttonClass {

}

body {

}
Make sure your new file is world-readable.

This defines three CSS "classes", as well as gives you the chance to redefine the HTML body tag. The next step is to connect the other three classes to the HTML document we are printing.

Do this: Add a title to your page inside a div tag, and put the random quote inside a DIV tag as well. Add a form to your page with a submit button that does nothing but load the page again, much like the "Show Map" button in the last lab except we don't even care about the parameters. Some example code is shown below. 

# set up array and stuff...
my $randomquote = # select a random quote somehow..

print header();
# the following line sets the title, and loads in your style sheet
print start_html( -title => "your title", 
                  -style => { 
                       'src' => 'http://sulu.informatics.indiana.edu/~usr/styles.css'
                            } );

print div( {-class => 'headerClass'}, "your title" );
print div( {-class => 'quoteClass'}, $randomquote );

# print the form with the button...

# why not add a link of some sort
print a( { -href => "http://google.com" }, "click here" );

The -class => ... lines are what connects the div (division) tags in your HTML document to the styles you defined in your CSS file. Thus, you can control the way the stuff in those divs looks by changing parameters in your CSS file.

Once you have your script fully working, including the button that generates a new quote, it's time for the fun part.

 

The Fun Part

Change your CSS file so that your page looks cool. This is a good page with plenty of examples on CSS; plenty of others can be found by a Google search. Some examples of things to change are:

  • Put a border around the title text at the top of the page, put it in a bigger font, and give it a background color.
  • Put a fancy border around the quote text (dashed lines, maybe). Make the quote text appear with small caps.
  • Make the submit button's text appear in bold
  • Use the body class to make your whole document have a background color or background image.
Remember, it's possible to do some of these things with HTML rather than CSS, but the goal of this lab is to stick with CSS.

Finally, use a CSS pseudo-element to make the link do something cool when you mouse over it.

 

Turning in your assignment
We need the randomquote.cgi script and your styles.css stylesheet. Make sure they are both in your lab12 directory (you may need to copy styles.css from the public_html directory) then make a tarball out of it and submit it to the Lab 12 drop box on Oncourse.

 

Thanks to Jacob Ratkiewicz for lab content, Sid Stamm for CSS stylesheets, and Rob Signorelli for original syntax-highlighting JavaScript.