Description

CGIs get muddy quickly. The mix of code and HTML in a long form that is designed to be eye pleasing can make an eyesore for the coder. You can do lots of HERE statements to print your HTML to help or move to a templating system when the HTML going gets tough.

Here’s a little trick that helps keep it in the realm of a single CGI when that’s what you need. Notice too that we’re calling CGI::Pretty instead of CGI. It works exactly the same but the HTML output is much easier on the eyes.

Update: see use CGI Perl with CSS for many more options for Perl + CSS.

#!/usr/bin/perl
use strict;
#================================================================
#  DECLARATIONS
#================================================================
use CGI::Pretty ":standard";
my $title = 'CGI Style!';
#================================================================
#  PROGRAM PROPER
#================================================================
print
    header(),
    start_html(-title => $title,
               -head  => style({type => 'text/css'},
                               join('',<DATA>), # slurp __DATA__
                               ),
	       ),
    p({class=>'title'}, 
      a({href=>'/perl/cgi-style.html'},
        "Return to $title" )
      ),
    something_interesting_and_lyrical(),
    end_html();

exit 0;
#================================================================
#  SUBROUTINES
#================================================================
sub something_interesting_and_lyrical {

    return <<IchooseYouWilliamButler;
<p class="quote">
A statesman is an easy man, he tells his lies by rote.
     <br />
A journalist invents his lies, and rams them down your throat.
     <br />
So stay at home and drink your beer and let the neighbors vote.
</p>

<div class="attribution">&#8211;W.B. Yeats</div>
IchooseYouWilliamButler
}
# main:: ends ====================================================

__DATA__
/* The stylesheet! Could comment it for older browsers... Naw. */
body { 
  background:#FFF; 
  padding:90px;
}
p.quote {
  width:575px;
  letter-spacing:-1px;
  font-family: garamond,caslon,palatino,georgia,times;
  font-size: 13pt;
  line-height: 18pt;
  font-style: italic;
  font-weight:bold;
}  
.title {
   font-size:14pt;
   font-style:normal;
   font-family:helvetica,sans-serif;
   font-weight:bold;
}
div.attribution {
   font-style:normal;
   text-align:right;
}

Discussion

Stylesheets go a long way to trimming HTML. Usually you’d want to have the stylesheet be outside the CGI or HTML files. But if you are doing a stand alone CGI for someone or for generic distribution it might be best to have the style guides in the CGI. Makes for easier installs. It also ensures some webtwerp won’t edit or delete the stylesheet without letting everyone know.

It’s also quite easy to use CGI or CGI::Pretty to include external stylesheets too. Just add it in your start_html(). One example below and many more explored here: use CGI Perl with CSS.

print start_html(-title => 'My Pretty Web Page, Suckers!',
                 -style => { -src => '/css/rez.css' },
                 );