 | Webmaster Tips, Tricks & Utilities Taming the Update Monster Server Side Includes JavaScript includes | Have you ever spent two hours changing just one word that recurs on each page of your website? Anyone who has maintained a web site with many pages for an extended period of time knows the nightmare of having to edit a word or date that recurs on each page, such as copyright information. Having to edit every single page can be very time-consuming and tedious and often gets avoided for as long as possible (usually too long). But it doesn't have to be that way. There are good programs now that allow us to perform "search & replace" on multiple files, but there is an even better way to accomplish this task, and you won' t have to worry about inadvertently "replacing" something by mistake. By using simple Server Side Includes (SSI), you can streamline and simplify the maintenance of your site. | SSI can be used to accomplish a variety of things on your web site including running CGI scripts and posting the results on the web page (as in polls), posting the current time and date on the page, posting the date of the last update, etc. However, in this article, we'll just talk about the simplest use of SSI, the "Include" command. Before you can implement this SSI strategy, make sure you know whether your web site host allows the use of SSI. If it does not, find a host that does. | | The "Include" command allows you to create a text file with your common information, and then place a directive (tag) in your HTML file that "points" to the text file. When you view the web page, the server places the contents of the text file where the tag is in the HTML file. You can use this trick for anything that recurs on each page of your website. For instance, you can put a header and footer on each page. The header and footer would be contained in text files called "header.txt" and "footer.txt". These files would contain the html that recurs on each page, such as text links, contact information, copyright information, etc. In place of this html on each page, you would place these tags: <!--#include file="header.txt" -->
<!--#include file="menue.txt" -->
<!--#include file="footer.txt" --> | for same directory | | <!--#include virtual="../header.txt" --> | for different directory |
| Now, whenever anyone views the pages containing those tags, the server will place the contents of the text files in the appropriate place and the viewer will see the header and footer. Whenever a change is needed within the header or footer, only ONE file needs to be edited -- the text file. All of the pages using that file will be "automatically" updated. Changing the copyright date or address or phone number on every page of your web site will now take only 30 seconds because only one file has to be changed!
Not only that but all your HTML pages will be smaller, which means you will have more space left on your website. Make sure there is no space after the <!-- if you write it like this <!-- #include file="header.txt --> then the server will ignore your command. | The easiest way to do this is to create a web page with everything you'd like to have on it. Those parts that will recur on every other page are where you will use SSI. All you have to do is "cut & paste" all of the html that will be used on each page, pasting it into a text file. Where you "cut" the html, replace it with the tag, such as:
<!--#include file="header.txt" --> | Do the same thing for the footer and menu, if needed. Save the HTML files using SSI with the extension ".shtml". Also, depending on how your server is set up with your host, you may have to make sure the text file is in the same directory as the .shtml file. Some servers ie: Virtualave.net and Hypermart.net allow you to name your file .html no need for the (s). | | This also makes the initial design and development of web sites go much smoother. You can now have a "template" for each page using the header and footer directives, and then simply add the content in between for each page. | I guarantee that this little trick will save you hours and hours of tedious work. As I stated at the beginning, if you've been through these "simple" edits before, you will need very little convincing! Don't let that ugly monster ever rear its head again! |
JAVASCRIPT INCLUDES| Above we have discussed Server Side Includes (Virtual Includes) as a method of creating single files for multi-page components such as headers, footers, navigation menus, etc. Here is an alternative using JavaScript includes. Here's how it works | Rather than using a server-side solution, we can employ JavaScript includes to save our HTML code as a series of "document. write" statements in a .js file, then include it in our main page via a <SCRIPT> tag. For example, suppose we want the following code | Click <A HREF="http://pattayacitythailand.com"> here </A> to visit PCT Thailand.
to appear in several different html pages on a site. We simply create a .js file (yourname.js) with the following contents:
|
<!--
document.write('Click <A HREF="http://pattayacitytha'
+'iland.com"> here </A> to visit PCT Thailand. ');
// -->
| Note that we have omitted the "script" tag ... this comes later. We then save this .js file and then link to it at the appropriate places (within the BODY tags, not in the document HEAD) of our file(s) like this:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript" SRC="yourname.js"></SCRIPT> | This has the effect of displaying the code from our .js source file wherever we place this script tag. If we have a menu of links, for example, we can put that on all pages of our site using the included file; if we save a change to that file, all other pages that reference it will change as well. Pretty cool! |   convert html to javascript for free |
|
| |
