Notice: Undefined index: ORIG_PATH_INFO.
1   IN FILE   "/home/webdevinfo/public_html/include/Url.class.php"   ON LINE   61
2   IN FILE   "/home/webdevinfo/public_html/include/ConfigPublic.inc.php"   ON LINE   13
3   IN FILE   "/home/webdevinfo/public_html/article.php"   ON LINE   3

Learning SSI - Include Me In!
Home Login Registration Authors Contact Us About Us Subscribe
Want to receive new articles via e-mail? Click here!
: Home  :: Web Design  :: Design Tips
Learning SSI - Include Me In!
by Webdevinfo - Webmaster
Views: 737
Votes: 1
Rating: 0.00
Synopsis:
According to WhatIs.com: "A server-side include is a variable value (for example, a file "Last modified" date) that a server can include in an HTML file before it sends it to the requestor."
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Page:  1 | 2 |  Next >  Last
The Article

 

According to WhatIs.com:

"A server-side include is a variable value (for example, a file "Last modified" date) that a server can include in an HTML file before it sends it to the requestor."


But what does this mean?
Server Side Includes allow you to dynamically include another file inside your webpage. By this, I mean that you can use two or more files, combine them together and have them displayed as one webpage. The best way to show the power of SSI is by creating a working example.

Before we do, you will first need to check that your server has SSI enabled. Copy the text below into a text editor like Notepad and save it as ssitest.shtml, making sure the file has a .shtml extention and not .html, otherwise the test will not work.

<html>
<head>
<title>SSI Server Test</title>
</head>
<body>
<h1>SSI Test</h1>
<p>Today is <!--#echo var="DATE_LOCAL" --></p>
</body>
</html>

Then browse to the file on your server and if the date is displayed, your server has SSI enabled. If not, you will need to contact your host to have it enabled.

Create a Working Example - Part I

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.

Page:  1 | 2 |  Next >  Last
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Similar/related articles:
Advanced Search
Site Search:


FirstWebHosting
Top Ten Hosts as picked by our editors - with reviews and interviews.
The Host Planet
Web hosting reviews and ratings. Learn how to spot a great host.
Hosts2002
The first and greatest hosting directory with the consumer in mind.
Hostcue.com
Hosting directory for the masses with special offers Check us out!
WebDevForums
Web developers or all levels discuss the details of design and ecommerce.
Needscripts.com
Free scripts and applications for web developers.