Website Tutorial: server side includes SSI

Home

About

Support

Contact




	The Design Process
	Inquiry Form
	Portfolio
	Redesign Examples
	Logos and Banners
	Advanced Features
	Resources
	Tutorials
	The Basics
	Terms Explained
	HTML Cheatsheet
	HTML Tips
	File Names & Folders
	Image File Size
	Moving to HostingCT
	Getting Ready
	Planning Your Site
	Web Site Worksheet
	Design Yourself or Hire
	Marketing
	Reading Site Stats
	Search Engine Friendly
	Track Your Ads
	Press Releases
	Tips and Tricks
	Favorites Icon
	Server Side Includes
	Spam-Proof Your Site
	Website Maintenance
	Using Archive Manager
	Using Diskspace Wisely
	Maintenance Checklist
	Reference Materials

Site Critique

If your current site is not producing
the results you want, you may need
a professional website makeover.

We will also provide you with our
version of an actual webpage that
reflects our recommendations.

Read More...

Using Server Side Includes (SSI)

SSI Instructions

Server Side Includes are HTML comments that direct the server to dynamically generate data and place it on a web page. SSI can be used to ensure that common info stays the same on all pages throughout your site.

The use of SSI can also save time when making site-wide changes to those components, since changes only need to be made in one place instead of to each page. SSI is commonly used for headers (top of web page, logo, etc), footers (copyrights) and navigation.

Example 1: Copyright

1. Create a file called copyright.shtml
In it, put your copyright notice in html like this:
©2005 Your Site Name. All rights reserved.

2.Do not include the <html>, <head> and <body> tags on this page.

3. Save the file in the root (main) directory of your web site.

4.Open the page on which the footer is to appear and insert the following HTML comment:


5. Upload both files to your browser (or open them in a WYSISYG program) to make sure your SSI works. If the copyright notice appears on the page with the include statement, it worked!

Example 2: Navigation

1.Create an html file with the following text:
Home | Contact Us | Products | Orders

3.After typing the desired text, create the links for each word or phrase like this:

<a href="http://www.yoursitename/home.htm">Home</a>
| <a href="mailto:myemail@address.com">Contact Us</a> | <a href="http://www.yoursitename/products.htm">Products</a>
| <a href="http://www.yoursitename/orders.htm">Orders</a>

5.Save the file as navigation.shtml

6.Next, open the pages in which the navigation is to appear.

8.Insert the following HTML comment:


9.Save the file. Upload your files to test.

To update your pages, simply open the SSI page such as navigation.shtml above and make your changes. Save your file. All pages with the corresponding include statement will be updated.

Notes:

Your website host must have SSI capability for SSI to work.
When creating SSI files for placement on your pages, you may want to add a single-cell table at 100% where you want your SSI to appear. Then place the SSI coding within the table's cell. 
You can use either #virtual or #file includes. The "file" attribute is a file path, relative to the current directory. It cannot be an absolute file path (starting with /), nor can it contain ../ as part of that path. The "virtual" attribute is probably more useful, and should specify a URL relative to the page it's on. It can start with a /, but must be on the same server as the file being served.
SSI is formatted like an HTML comment, so if you don't have SSI correctly enabled, the browser will ignore it, but it will still be visible in the HTML source. If you have SSI correctly configured, the directive will be replaced with its results. If it is configured correctly for SSI, but the include html is wrong or references an unknown file, an error will show where the SSI file should be.