Webpage Coding
Example #5 Sharing Code As SSIs
The »previous example introduced some basic JavaScript to protect email addresses within the pages from spam-spiders. It also placed the JS code into an external file so that it can be shared by the other pages.
Despite this we still have a fairly clunky page with a good deal of code that will need to be repeated in every page.
Using Server-Side Includes (SSI), repeated sections of the page need only be coded once and can then be shared.
The main change in this fifth example is to break the page down into sensible 'modular' sections which can be shared between other pages as required.
SSI functionality is one of the benefits of running your own development webserver. If you rent host space from a third party hosting provider make sure that their setup allows SSIs, if it doesn't look elsewhere!
To enable SSI functionality under Apache you will need to set the required 'handler':
This tells Apache that any page with the .shtml extension is to be 'parsed' for include lines.
Note! You could simply set this for all .html files instead. However this would mean parsing every single page on the site, a great deal of extra and unnecessary work and an unwanted drain on server resources.
The following display is of the full page source-code, different sections have been high-lighted in different colours to show where the page will be 'chopped' up. This and SSIs are discussed in more detail below...
The full source code is shown below, »the page itself is here, and will open in another window.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #5</title>
<meta name="description" content="A good description of the page here..." />
<meta name="keywords" content="search,engine,keywords,in,here" />
<meta name="charset" content="ISO-8859-1" />
<meta name="author" content="Andy Belcher" />
<meta name="generator" content="Notetab" />
<meta name="copyright" content="Andy Belcher 2006 DandyWebDesign" />
<link rel="stylesheet" href="/css/simpleskel.css" type="text/css" />
<script type="text/javascript" src="/src/common.js">//</script>
</head>
<body>
<div id="frame">
<div id="header">
<h1>Example Webpage</h1>
</div><!--header-->
<div id="content">
<div id="rightbar">
Site Links
<div class="navbar">
<a href="./simpleskel5.shtml#link" title="Return to the example notes page..."
>Link to Notes</a>
<a href="./example1.shtml#link" title="View the first example page - raw..."
>Example #1</a>
<a href="./example2.shtml#link" title="View the second example page - CSS tidied away - content separated from style..."
>Example #2</a>
<a href="./example3.shtml#link" title="View the third example page - External CSS and page metadata added..."
>Example #3</a>
<a href="./example4.shtml#link" title="View the fourth example page - Email addresses masked using JavaScript..."
>Example #4</a>
<a href="./example5.shtml#link" title="View the fifth example page - Code sharing using server-side includes..."
>Example #5</a>
<a href="./example6.shtml#link" title="View the sixth example page - Testing for DHTML and 'advanced' support..."
>Example #6</a>
</div><!--navbar-->
More text here in the sidebar
</div><!--rightbar-->
<h2>Example #5</h2>
<p class="loud">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
</div><!--content-->
<div id="footer">Footer section code and credits here... Email:
<script type="text/javascript">
antiSpamMailTo('fred','nowhere.com');//</script>
</div><!--footer-->
</div><!--frame-->
</body>
</html>
SSI Sharing Notes
Above there are four highlighted blocks of code. Each of these should be
removed from the page file and stored as individual files, and named
head.ssi, header.ssi, sidebar.ssi
and footer.ssi respectively. Within the page file these should
be replaced with the following SSI directive:
The header and footer sections are entirely self contained and unlikely to
vary at all through all of the pages of the site; thus we can confidently
cut out the entire <div> element.
The following display is of the full page source-code, various sections have been out-sourced as SSIs which are discussed in more detail above, »the page itself is here, and will open in another window.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #6</title>
<meta name="description" content="An example webpage... A good description of the page here..." />
<meta name="keywords" content="search,engine,keywords,in,here" />
<!--#include virtual="/tech/webpage/head.ssi" -->
</head>
<body>
<div id="frame">
<!--#include virtual="/tech/webpage/header.ssi" -->
<div id="content">
<div id="rightbar">
<!--#include virtual="/tech/webpage/sidebar.ssi" -->
</div><!--rightbar-->
<h2>Example #6</h2>
<p class="loud">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
</div><!--content-->
<!--#include virtual="/tech/webpage/footer.ssi" -->
</div><!--frame-->
</body>
</html>
As you can see the code volume has reduced considerably leaving just those parts specific to the page.
However both the head and sidebar are a little different, we must choose
our cut location with care. In the case of the head.ssi section
the description and keywords metatags as well as
the page <title> have been left within the page. This is
because they will vary from page to page, each of these will usually have
a set of values unique to the page. All of the other metatags there are not
likely to vary between pages so can be safely shared.
Note also that all of the CSS and JS inclusion lines are also shared making these external files a part of every page.
The sidebar.ssi does not include the <div
id="rightbar"> tags so as not to 'close' the element
within the ssi file. By leaving the tags within the page itself any page
can have its own individual additions to the sidebar. This is particularly
useful if it is to be used for links to other parts of the site, these may
well differ between pages.
Think carefully about how you will 'chop' your pages up as SSIs, make sure you do not compromise yourself at a later date.
The resulting page is significantly lighter with all this repeated code removed. Working on the page is far easier as a much higher proportion of it is actual page content without all of the code clutter. This has been done for the next example... where we will also look at the last remaining issue:
- Support for DHTML and 'advanced' features?