SSI – Server side includes are files in the server that contain html snippet to be included in different web pages. The web server takes care of replacing the include tag with the content of ssi file when it delivers the parent page to the client.
Why SSI ?
SSI helps you organize repeating code in you site better. A large website might have multiple pages having same header, footer, left/right margins or menus. But for ssi, same code has to be repeated in all the pages and maintaining them would become nightmare as the website grows. The same site can be redesigned to pull out the header, footer, left/right margins and menu code snippets into different ssi files. These ssi files can be included in different web pages. So in future any change in the general layout would require a change in corresponding ssi file only. There by enabling you to maintain the site effectively.
SSI include markup:
Common code can be removed from the parent page and saved as ssi file in the server. To get the content of the ssi in the parent page you will have to add include tag in the parent page. When the parent page is delivered to the client, the server takes care of replacing the include markup with the content of the ssi file.
The syntax to embed the contents of an external file onto the current page is:
<!–#include virtual="/ssifolder/myssi.shtml" –>
<!–#include file="myssi.shtml" –>
Virtual attribute can be used when the ssi is not in the same folder as the parent page.
File attribute can be used when the ssi is in the same or sub folder as the parent page.
Typically you would be using the “virtual” attribute as it would be good practice to club all the ssi file in a folder and have the rest of the web pages in the site refer to them with a site root relative path.
Can I edit a webpage containing ssi in Contribute?
When you edit a web page using Contribute, it would pull the included ssi content form the server and render the full page like a web browser. The ssi regions in the page are locked. Hence you can not edit the ssi content in the main page. This is to prevent the user from accidently editing the ssi content, at the same time have the WYSIWYG feel when you edit the main web page.
Sample web page using ssi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<p>This text is from main page</p>
<p>This is a simple SSI test. The objects between the horizontal lines are within
<p><img src="../images/contrib_team.jpg" width="209" height="122"></p>
<table width="635" height="353" border="1" cellpadding="3" cellspacing="0">
<td><img src="../images/contrib_team.jpg" width="378" height="221"></td>
<td bgcolor="#33CC33"> </td>
<td><h3>Hello, nested SSI!</h3>
<p><em>Hello, nested SSI!</em></p>
<p align="center"><font color="#669900" face="Verdana, Arial, Helvetica, sans-serif"><strong>Hello,
<td width="397" height="122" bgcolor="#9966FF"><h2> </h2></td>
<td width="90"><p align="right"><strong>Hello,<br>
<td width="122" bgcolor="#FFCC00"> </td>
<p><font color="#FF3300" size="3" face="Georgia, Times New Roman, Times, serif"><strong>¡Hola,
<table width="129" height="62" border="1" cellpadding="3" cellspacing="0">
Following is the result when you edit the main page using Contribute: