tutorialtastic

Server Side Includes (.shtml)

If your server doesn't support PHP and you still want the convenience of PHP Includes, you need not resort to badly coded iframes or some other mad method — there's a way to do it with SHTML that's just as easy.

First things first, all of your pages need to be converted from .html and .htm to .shtml. You new pages should look a bit like index.shtml or domain.shtml for example. You also need to separate your style (layout information) from your content. If you don't know how; you need to read my Separating Style from Content tutorial.

Here's an example of what your page might look like — the "style" coding, as well as other repeated data is in bold:

<html>
<head>
  <title>web page title</title>
</head>
<body>
  <table border="0">
  <tr><td>

    <h1>welcome to my website</h1>
      <p>welcome to my website! this site is really awesome and you can find my content all over. the navigation is on the right and my friends are linked there too.</p>

    <h2>updates</h2>
      <p><strong>3.4.05</strong> - today i updated my reviews page!</p>
  </td></tr>
  </table>

  </body>
</html>

Copy all the coding above the content (welcome to my website, etc) into a text (e.g. Notepad) file and save it as header.txt, then copy the coding below the content into a text file and save it as footer.txt. You can now remove the copied data from every other file you have — leaving behind only the content (the middle stuff), like so:

    <h1>welcome to my website</h1>
      <p>welcome to my website! this site is really awesome and you can find my content all over. the navigation is on the right and my friends are linked there too.</p>

    <h2>updates</h2>
      <p><strong>3.4.05</strong> - today i updated my reviews page!</p>

You now need to add the coding which references the header and footer files, completing each page. At the of top of every page, above the content, you need to add: <!--#include file="header.txt" -->, and below the content you need to write: <!--#include file="footer.txt" -->. Your pages should now look something like this:

<!--#include file="header.txt" -->

    <h1>welcome to my website</h1>
      <p>welcome to my website! this site is really awesome and you can find my content all over. the navigation is on the right and my friends are linked there too.</p>

    <h2>updates</h2>
      <p><strong>3.4.05</strong> - today i updated my reviews page!</p>

<!--#include file="footer.txt" -->

Save each page as you go, and once you're complete you can upload all of the new copies of each page to your server for testing. Don't forget to change navigational page links in your website menu to a .shtml extension, and all should work well!

Important Note

A common misconception of includes is that they can only be used to control headers and footers. This is not true — you can use them to include any file into any .shtml file in any location. For example, if you have a business address that you want to include in certain pages, you could save your address in a file called address.txt and call it like so:

<!--#include file="header.txt" -->

    <h1>welcome to my website</h1>
      <p>welcome to my business website! bla bla bla, bla bla bla, business address for snail mail:</p>
<!--#include file="address.txt" -->

    <h2>updates</h2>
      <p><strong>3.4.05</strong> - today i updated my reviews page!</p>
<!--#include file="footer.txt" -->

Tags: ,
Last Updated On: 01st February 06 by Jem
Bookmark At: StumbleUpon, Digg

tutorialtastic — ultimately better than pixelfx
Copyright © Jem Turner 2003-08. (About | Disclaimer | Link In)