Working with CGI.pm In-Depth - Creating an HTML Document

Before we finish up with the start_html function, let's take a look at a couple more attributes we can use to build stylesheet and javascript include code. If you're trying to keep clean and efficient code, you'll want to put your CSS and Javascript into separate files and simply include them rather than writing it all inline. This is done with the HTML <link> and <script> tags in the header of your document.

First, let's take a look at the -style attribute, which is used to include style sheets:

print $cgi->start_html(
-title => 'My CGI.pm Web Page',
-style => {
-src => '/css/main.css'
}
);

As you can see, it includes another hash, which would contain a name of src and a value of the style sheet you'd like included. This could extend on if there are multiple style sheets to include. The key difference you'll see when you run this version of our script is the addition of the <src> tag near the bottom:

<link rel="stylesheet" type="text/css" href="/css/main.css" />

Next we'll look at the -script attribute that can be used to include a javascript (or other) script file. Similar to the CSS -style attribute, -script is a has that includes the key / value pairs for -language and -src, with -src being the path to the file itself. Take a look at this example that includes the javascript file main.js:

print $cgi->start_html(
-title => 'My CGI.pm Web Page',
-script => {
-language => 'javascript',
-src => '/javascript/main.js'
}
);

This produces a nice <script> tag in the header:

<script src="/javascript/main.js" type="text/javascript"></script>