Your resource center for web design tips, css tutorials and many more!
Web Design Tips
Learn HTML
CSS Tutorials
Site Map
WEB DESIGN - Whats Inside: Basic Rules on Web Design [ More ]
HTML - Whats Inside: Should You Bother Learning HTML to Build Webpages? [ More ]
CSS - Whats Inside: CSS Web Site Design Basics [ More ]

Learn HTML - HTML Server Side

What the Heck is Server Side HTML?
by: Robert Plank

If you're stuck in the dark ages and are still editing the pages of your web site by hand, there's an easy way to change the look of your web site on a moment's notice, by editing only one file.

I know, there are all kinds of brand new blogging scripts, forums, CMSes, and other stuff to make your site easy to update. But on the other hand there are just as many desktop-based programs that churn out thousands of static HTML files for you to put on your server.

What do you do when you have to change these files later? Edit them by hand, one at a time? I don't think so.

You can save a lot of time down the road using Server Side Includes (SSI).

The point of using Server Side HTML is so you can include other pages on your regular HTML pages, things like a list of links you regularly update OR a header and footer.

Try it out. Take one of those static HTML pages on your site and rename it to something like "filename.shtml" instead of "filename.html." All we've done is changed the "html" at the end to "shtml."

Now, take the part of that site you want to appear on every page (the header graphic, link sidebar, etc.), copy and paste that part and save it into a file named "header.shtml." REMOVE that text from your filename.shtml file.

Now, in the filename.shtml file, place this at the top:

[!--#include virtual="/header.shtml"--]

(IMPORTANT: Replace the brackets [ and ] above with the greater-than and less-than "HTML" brackets... hold shift and press the "comma" and "period" keys on your keyboard.)

Upload filename.shtml and header.shtml to your server and load header.shtml. If everything went well, the page should look exactly as it did before. The only difference is: you only need that one "include virtual" line to show the top of the page, AND to change that top HTML later on all you have to do is edit header.shtml.

If you had this sort of code on 20,000 pages of your web site all you'd have to do was edit that ONE header.shtml file, and your entire site would change as soon as you uploaded that header.shtml file.

Not bad, huh?

Now do the same thing with the bottom of your web site, only save the new file as footer.shtml and at the bottom of filename.shtml place this:

[!--#include virtual="/header.shtml"--]

Again, not that exact code... replace the hard-brackets with HTML brackets.

But wait, your fancy page generator software will only save the files as .HTM or .HTML, and specifically links to certain files. You can't just go in and edit everything to link to .SHTML files.

Htaccess to the rescue.

Place this in a new text file:

AddHandler server-parsed .shtml .html .htm

Save that as "htaccess.txt", upload to your web server, and rename that htaccess.txt file you just uploaded to ".htaccess", WITH the dot in front. Now try renaming filename.shtml to filename.html. Guess what, your server side includes now work on .html and .htm files too.

Hopefully your page generator software allows you to edit the template and place these server-side include tags in there. (If not, look into a program called BKReplaceEm.) Don't worry, the pages will look funny and broken on your hard drive but once they are sitting on your web server everything will turn out ok.

If you find yourself doing a bunch of repetitive HTML editing it might be time to look into Server Side Includes to make instant changes.

About The Author

Robert Plank

You know what else, you can use a similar bit of HTACCESS code to make PHP scripts act as HTML files. That, plus 35 more "Why Didn't I Think of Those" secrets are revealed in my upcoming ebook: http://www.affiliatebattleplan.com