The power of SSI
Here you will get to see how the use of SSI will greatly speed up the process of updating your website!
Let's create a quick four page website. Copy the code below into a text editor like Notepad and save it as index.shtml
Alternatively you can download the support file containing the files. The link can be found at the end of this article.
<html>
<head>
<title>My Website!</title>
</head>
<body>
<table width="100%" bgcolor="#808080" border="0" cellpadding="18" cellspacing="1">
<tr bgcolor="#ffffff">
<td width="140" bgcolor="#d0d9e6">
<!--#include file="menu.html"-->
</td>
<td width="*" bgcolor="#ffffff" valign="top">
<h1>Welcome to my website!</h1>
</td>
</tr>
</table>
</body>
</html>
Do the same with the code below, but this time save it as menu.html
Notice we do not give it a .shtml file extention? This is because this is the file that we will be including in the other pages, therefore the .shtml extention is not necessary.
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About Me</a></li>
<li><a href="photos.shtml">Photos</a></li>
<li><a href="contact.shtml">Contact Me</a></li>
</ul>
Again, copy the code below and save it as about.shtml
<html>
<head>
<title>My Website!</title>
</head>
<body>
<table width="100%" bgcolor="#808080" border="0" cellpadding="18" cellspacing="1">
<tr bgcolor="#ffffff">
<td width="140" bgcolor="#d0d9e6">
<!--#include file="menu.html"-->
</td>
<td width="*" bgcolor="#ffffff" valign="top">
<h1>About Me!</h1>
</td>
</tr>
</table>
</body>
</html>
Save this code as photos.shtml
<html>
<head>
<title>My Website!</title>
</head>
<body>
<table width="100%" bgcolor="#808080" border="0" cellpadding="18" cellspacing="1">
<tr bgcolor="#ffffff">
<td width="140" bgcolor="#d0d9e6">
<!--#include file="menu.html"-->
</td>
<td width="*" bgcolor="#ffffff" valign="top">
<h1>My Photos!</h1>
</td>
</tr>
</table>
</body>
</html>
Next, save this code as contact.shtml
<html>
<head>
<title>My Website!</title>
</head>
<body>
<table width="100%" bgcolor="#808080" border="0" cellpadding="18" cellspacing="1">
<tr bgcolor="#ffffff">
<td width="140" bgcolor="#d0d9e6">
<!--#include file="menu.html"-->
</td>
<td width="*" bgcolor="#ffffff" valign="top">
<h1>Contact Me!</h1>
</td>
</tr>
</table>
</body>
</html>
OK, now that you have all the files created, upload them to your host and go to http://www.yourdomain.com/path_to_ssi_files/
You should now be able to see your homepage with "Welcome to my website!" on it. Click the links in your menu on the left to make sure everything works fine.
