IT Community - Software Programming, Web Development and Technical Support - View Single Post - What is SHTML? How to Implement SHTML and its uses?

oxygen · #1 07-15-2007, 10:36 PM

A Web file with the suffix of ".shtml" (rather than the usual ".htm") indicates a file that includes some information that will be added "on the fly" by the server before it is sent to you.
SHTML is really not a "thing" so much as an extension used by Web servers to define a document that has Server Side Includes (SSI). SSI allows you to add real-time interactivity to your Web pages without programs or CGI. The drawback is that it requires that SSI be turned on for the Web server.
You use SSI to do things like add dates and times that change with each page access, database queries that display the results on the page, and displaying different information depending on the browser, DNS or IP, operating system, or other variables.
Shtml is so easy, and yet so efficient. Shtml is like frames within the html code. You have the top of the page, such as links, a menubar, or links. Save all the text in the top of the page as "top.html". Then we come to the content of the page. This should be called whatever the page is called. Such as, you have a page with links, you call the page "links.html". Then you have the bottom of the page. This closes all html tags. Save this last page "bottom.html". Now combine all the code from these pages together and you get the complete page. Well, obviously you are not done! One more simple step. You need to add the shtml code, and bring them all together using shtml.

Shtml syntax. You would think it would be hard and complicated to put it all together.





You would save this page as "links.shtml"
It will stack the code and put it all together.
Here is a sample...
<html>
<title>Shtml sample :: Links </title>
<body bgcolor="#ffffff">
<table width="500" border="0"
<tr>
<td>Header Links</td>
<td><a href="http://www.within-reason.com" target="_blank">Within-Reason.com</a></tr>
<tr>
<td> ... now save this as "top.html"

There is the top of the page... now we have the content in the middle.

<a href="http://www.designsbymark.com" target="_blank">Design's By
Mark</a>
-Great Photoshop Tutorial's Overall good webdesign
Page.<br>
<a href="http://www.screamdesign.com/" target="_blank">Scream
Design</a>
-Also a good site for photoshop tutorial's<br>
<a href="http://www.computerarts.co.uk/tutorials/2d/" target="_blank">Computer
Arts</a>
-Very good tutorial's for photoshop and other's<br>
<a href="http://www.russellbrown.com/body.html" target="_blank">Russel
Brown</a> -Good photoshop tips

This middle part would be saved as "links.html"

Now we come to the end. This part closes all the HTML Tags used above. And add copywrite or closing statements.
</td></tr>
</table>
<p align="center">Copywrite 2001 Shtml Tutorial</p>
</body>
</html>
Now save this part as "bottom.html"

This was a simple example but you can include as many files as you want. Shtml can save a lot of time and energy.
SSI Directives
SSI (Server Side Includes) are directives that are placed in HTML pages, and evaluated on the server while the pages are being served. They let you add dynamically generated content to an existing HTML page, without having to serve the entire page via a CGI program, or other dynamic technology.

The decision of when to use SSI, and when to have your page entirely generated by some program, is usually a matter of how much of the page is static, and how much needs to be recalculated every time the page is served. SSI is a great way to add small pieces of information, such as the current time. But if a majority of your page is being generated at the time that it is served, you need to look for some other solution.

Basic SSI directives
SSI directives have the following syntax:



It 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.

The element can be one of a number of things, and we'll talk some more about most of these in the next installment of this series. For now, here are some examples of what you can do with SSI

Today's date


The echo element just spits out the value of a variable. There are a number of standard variables, which include the whole set of environment variables that are available to CGI programs. Also, you can define your own variables with the set element.

If you don't like the format in which the date gets printed, you can use the config element, with a timefmt attribute, to modify that formatting.


Today is 

Modification date of the file
This document last modified 

This element is also subject to timefmt format configurations.

Including the results of a CGI program
This is one of the more common uses of SSI - to output the results of a CGI program, such as everybody's favorite, a ``hit counter.''