Server side includes, or SSI, is very similar to PHP includes. However, many servers don’t allow the use of PHP, which is why people revert to SSI.
So why change? Well, it’s a better thing to stick to. It is better than iframes, and makes layout changes easier if you’re working with something like divs. You won’t have to edit every page.
Firstly – you have to change the extension of all your files. Instead of index.htm or index.html, it must be index.shtml.
You can do this by opening the file in Notepad and going to File > Save As and typing “index.shtml” (with the quotes). This is tedious, but so worth it.
Say your typical homepage (index.shtml now, after renaming) has this coding:
<html> <head> <title>Webpage title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <img src="image.jpg"> <a href="about.htm">About</a> <a href="photos.htm">Photos</a> <a href="index.htm">Home</a> <h1>Welcome!</h1> <p>Welcome to my site, I hope you enjoy your stay! Navigation is above.</p> </div> </body> </html>
Notice how there is certain data on this page that will be repeated on every page – of course, that’s the things that don’t change – like the layout image and the links, and the html, head and body codes.
Now take out all the coding before your content. If you have a sidebar, for example, the sidebar usually won’t change, so copy that too. In the above case, you should copy the following:
<html> <head> <title>Webpage title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <img src="image.jpg"> <a href="about.htm">About</a> <a href="photos.htm">Photos</a> <a href="index.htm">Home</a>
Copy all that into a new file and name it header.txt. If you’re using Notepad, go to File > Save As and type “header.txt” (with the quotes).
(So cool, we’re using .txt files!)
Return to your original document and replace that coding with this:
<!--#include file="header.txt" -->
Now go to the end of your document and take out all the coding after your content. In this case it would be:
</div> </body> </html>
Copy all that into a new file and name it footer.txt.
Return to your original document and replace that coding with this:
<!--#include file="footer.txt" -->
Your document should look something like this:
<!--#include file="header.txt" --> <h1>Welcome!</h1> <p>Welcome to my site, I hope you enjoy your stay! Navigation is above.</p> <!--#include file="footer.txt" -->
Now you must save this file with a .shtml extension (if you haven’t already, silly banana).
Simply save the pages, upload them to your server, and delete the old ones. Remember though, you must change the links to have a .shtml extension! So don’t link to .htm files anymore! Change your navigation links and everything. Yes, that is another tedious part.
You not only can use this for your header and footer sections, but also for text in your document. If you want a certain block of text repeated somewhere on a different page, place it into a .txt and it should look something like this:
<!--#include file="header.txt" --> <h1>Welcome!</h1> <p>Welcome to my site, I hope you enjoy your stay! Navigation is above.</p> <p>Below you will find my contact details:</p> <!--#include file="contact.txt" --> <!--#include file="footer.txt" -->
Now when you want to change your layout, you just have to edit the header and footer files, and of course your CSS. Simple!