Server-Side Includes, CSS and JavaScript files...

If you link many documents to a single file, it makes sense that a single change within that file is instantly brought to the ones linked to it.

Let's start from scratch...

Plain old default.html file...

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <meta name="Keywords" content="" />
  6. <meta name="Description" content="" />
  7. <title>Easy Maintenance</title>
  8. <style type="text/css" media="screen, projection">
  9. <!--
  10. img {border:0;}
  11. .myclass {color:red;background-color:yellow;font-size:120%;}
  12. -->
  13. </style>
  14. <script type="text/javascript">
  15. <!--
  16. // triggers an annoying alert box when the page loads
  17. function diva_sayHello(){alert("Hello World!");}
  18. //-->
  19. </script>
  20. </head>
  21. <body onload="diva_sayHello()">
  22. <div id="header">
  23. <ul><li><a href="default.html">Home</a></li><li><a href="aboutus.html">About Us</a></li>...</ul>
  24. <!-- /header --></div>
  25. <div id="main">
  26. <p class="myclass">The content here is specific to this document...</p>
  27. <!-- /main--></div>
  28. <div id="footer">
  29. <p>This is the content for the bottom of evey single page in the site...</p>
  30. <!-- /footer --></div>
  31. </body>
  32. </html>

Top of the page

The content that is common to many documents in the site is highlighted below

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <meta name="Keywords" content="" />
  6. <meta name="Description" content="" />
  7. <title>Easy Maintenance</title>
  8. <style type="text/css" media="screen, projection">
  9. <!--
  10. img {border:0;}
  11. .myclass {color:red;background-color:yellow;font-size:120%;}
  12. -->
  13. </style>
  14. <script type="text/javascript">
  15. <!--
  16. // triggers an annoying alert box when the page loads
  17. function diva_sayHello(){alert("Hello World!");}
  18. //-->
  19. </script>
  20. </head>
  21. <body onload="diva_sayHello()">
  22. <div id="header">
  23. <ul><li> <a href="default.html">Home</a></li><li><a href="aboutus.html">About Us</a></li>...</ul>
  24. </div><!-- /header -->
  25. <div id="main">
  26. <p class="myclass">The content here is specific to this document...</p>
  27. <!-- /main--></div>
  28. <div id="footer">
  29. <p>This is the content for the bottom of evey single page in the site...</p>
  30. <!-- /footer --></div>
  31. </body>
  32. </html>

Note that I didn't really highlight everything that was common to the files across the site. I limited myself to the "obvious", but there is no real limit to how much a file can be "stripped".

Top of the page

The "Tools"

To import these 4 different sections into our document, we'll use 4 different files. We need to create:

  1. One Style Sheet
  2. One JavaScript file
  3. Two Includes.

Top of the page

Files' content

File extensions are - in theory - not really important to make things work, but it is good practice to use ".css" for CSS files, ".js" for JavaScript files and ".inc" for Includes.

mystyle.css
  1. img {border:0;}
  2. .myclass {
  3.   color:red;
  4.   background-color:yellow;
  5.   font-size:120%;
  6. }
myjavascript.js
  1. // triggers an annoying alert box when the page loads
  2. function diva_sayHello(){alert("Hello World!");}
myinclude_header.inc
  1. <ul>
  2. <li><a href="default.html">Home</a></li>
  3. <li><a href="aboutus.html">About Us</a></li>
  4. ...
  5. </ul>
myinclude_footer.php
  1. <p>This is the content for the bottom of evey single page in the site...</p>

The call to the function is still attached to the ONLOAD attribute of the BODY element. You need to leave it there. You may include a function call inside the external file if it doesn't rely on an event handler to be "fired" (for example functions declared and called inside the head tags of a document).

  • If the information contained in your includes is sensitive, it is then better to use an extension relevant to the server model used to protect its content (asp, php, cf, etc.).
  • Note that there is no need to keep the opening and closing comments in the external files.

Some browsers won't recognize a CSS file as containing a Styles Sheet unless it actually ends in ".css". This is because some web servers won't hand over such CSS files unless the correct MIME type is sent to the client. If you are not on an Apache web server, you'll have to ask your WHC to take care of that for you, if you are on an Apache web server, you can either edit "mime.types" and add the MIME type you want or use an ".htaccess" file. The latter would include:

  1. AddType text/css .myOwnExtension

Top of the page

Linking the Styles Sheet to the Documents

This file may be "imported" in different ways:

Using the LINK element:
  1. <link rel="stylesheet" href="mystyle.css" type="text/css" />
Using the @import directive:
  1. <style type="text/css">
  2. <!--
  3. @import url("mystyle.css");
  4. -->
  5. </style>
Using a SCRIPT element:
  1. <script type="text/javascript">
  2. <!--
  3. document.write('<link rel="stylesheet" href="mystyle.css" type="text/css" />')
  4. //-->
  5. </script>
Using a Conditional Comment:
  1. <!--[if IE 5]>
  2. <style type="text/css">
  3. <!--
  4. @import url("mystyle.css");
  5. -->
  6. </style>
  7. <![endif]-->

Only Internet Explorer 5 (Windows) will import the above Styles Sheet

These techniques allow a designer/developer to serve a different Styles Sheets depending on the visitor's browser; this is called "branching". For more on this, read "Branching Techniques".

Top of the page

Linking the JavaScript file to the Documents

  1. <script type="text/css" src="myjavascript.js"></script>

Remember the previous note about the call to the function that must stay inside the document.

Top of the page

Linking the Includes files to the Documents

This is for the content of the "header" DIV:
  1. <!--#include virtual="/myinclude_header.inc" -->
This is for the content of the "footer" DIV:
  1. <!--#include virtual="/myinclude_footer.php" -->

By default, the server does not parse a document with an .htm or .html extension. To make sure the server "processes" these files inside your pages, give your documents an .shtml extension or an extension relevant to the server model used (check with your Web Hosting Company if you're unsure what extension to use).

The above example is proper syntax for ASP, .NET and Apache SSI. Below are examples for other Server Languages:

ColdFusion:
  1. <cfinclude template="include_footer.php">
JSP:
  1. <%@ include file="myinclude_footer.php" %>
PHP:
  1. <?php include('myinclude_footer.php'); ?>

The INCLUDE directive accepts another keyword: FILE. Use FILE to indicate a relative path and VIRTUAL to declare a root relative path. You should not use the FILE directive to link your pages to includes that sit in higher directories.

Top of the page

Default.html becomes default.shtml

New "plugs" are highlighted

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <meta name="Keywords" content="" />
  6. <meta name="Description" content="" />
  7. <title>Easy Maintenance</title>
  8. <link rel="stylesheet" href="mystyle.css" type="text/css" />
  9. <script type="text/css" src="myjavascript.js"></script>
  10. </head>
  11. <body onload="diva_sayHello()">
  12. <div id="header">
  13. <!--#include virtual="/myinclude_header.inc" -->
  14. <!-- /header --></div>
  15. <div id="main">
  16. <p class="myclass">The content here is specific to this document...</p>
  17. <!-- /main--></div>
  18. <div id="footer">
  19. <!--#include virtual="/myinclude_footer.php" -->
  20. <!-- /footer --></div>
  21. </body>
  22. </html>

Doing this, we've killed two birds at once; managing common data across multiple pages is a snap and reading the structure of a document is much easier.

Top of the page

What's next?

Using external files is supposed to save a lot of headaches. Unfortunately, reading a document that includes a lot of them can be "tricky". If the content of a JavaScript file can help one to understand what it does, most often, the name of the file itself doesn't shed much light. The same goes for includes...

So let's pick another tool in the box: the HTML comment! That's an easy fix to prevent "meaningless" lines of code:

  1. ...
  2. <title>Easy Maintenance</title>
  3. <!-- Basic Style Sheet -->
  4. <link rel="stylesheet" href="mystyle.css" type="text/css" />
  5. <!-- Hello World! Alert Box -->
  6. <script type="text/css" src="myjavascript.js"></script>
  7. </head>
  8. <body onload="diva_sayHello()">
  9. <div id="header">
  10. <!-- navigation links: unordered list -->
  11. <!--#include virtual="/myinclude_header.inc" -->
  12. <!-- /header --></div>
  13. <div id="main">
  14. <p class="myclass">The content here is specific to this document...</p>
  15. <!-- /main--></div>
  16. <div id="footer">
  17. <!-- links in #footer -->
  18. <!--#include virtual="/myinclude_footer.php" -->
  19. <!-- /footer --></div>
  20. </body>
  21. </html>

Your file will not validate if you have 2 hyphens( "--") within an HTML comment (within the string between the opening and closing tags, which utilize those double-hyphens).

Important things to keep in mind

  • Be aware that most of the time, browsers don't return any error if they cannot load an external CSS or JavaScript file.
  • You should favor absolute paths in Styles Sheets for NN4 since this browser has its own way of interpreting relative paths.