Server Side Includes

If you've done any web design, you know what it's like to you realize that something in the navigation or header of your page has to be changed. If you've got very many pages, it usually involves going through each page and changing that one little piece of code. If you're lucky, you had a search a replace tool to help.

With include statements, you can have your header, navigation, and footer all in separate files. You link all of them to each page of your site. Then if you want to add a tab in your navigation, you just change that little bit in your navigation file.

Here's a sample page.

default.shtml

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

            <title>My Home Page</title>

            </head>

            <body>

            <!--#include virtual="/common/header.shtml" -->

            <!--#include virtual="/common/navigation.shtml" -->

            Content of your page goes here

            <!--#include virtual="/common/footer.shtml" -->

            </body>

            </html>

Then the files included look like this:

header.shtml

            <div id="header">

            <h1>This is my header</h1>

         </div>

navigation.shtml

           <div id="navigation">

              <ul>

                     <li>Home</li>

                     <li>Contact</li>

                     <li>About Us</li>

               </ul>

         </div>

footer.shtml

         <div id="footer"<p>

            This is my footer down here</p>

         </div> 

Results

The server puts all of these files together and sends them to the browser. Below is the results that the browser receives.

HTML

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

         <html xmlns="http://www.w3.org/1999/xhtml">

         <head>

         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

         <title>My Home Page</title>

         </head>

         <body>

         <div id="header">

               <h1>This is my header</h1>

            </div>

            <div id="navigation">

               <ul>

                     <li>Home</li>

                     <li>Contact</li>

                     <li>About Us</li>

               </ul>

            </div>

            <div id="content">

               Content of your page goes here

            </div>

            <div id="footer">

               <p>This is my footer down here</p>

            </div>

         </body>

         </html>

Output

This is my header

Home
Contact
About Us

Content of your page goes here

This is my footer down here

FAQ

Q. What if I'm not using HTML?: A. Of course, if you are using a different language, you have to use a different syntax. For help with other languages, go to www.w3schools.com.
Q. What if I've already built several pages?: A. You'd have to go through and replace the code that you're including with include statements. You'll also have to change all the filenames to something that accepts server side includes (.shtml, .shtm, .php, .php). There is another option of editing the .htaccess.