010329.html | WebReference


((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) March 29, 2001


Sponsored by: Informative Graphics and Building Dynamic Web Sites Conference __________________________________________________________________

This week we have an article from our very own Alexander Rylance. He shows how you can use server side includes to make your site easier to create and maintain.


Are you having the bottleneck blues? Do you look forward to a day when you can clear from your plate all those little departmental updates and changes to the website and focus on what is really priority? Net-It Central™ empowers departments with the ability to maintain their own intra /inter-net web site for basic document publishing. You won't be putting yourself out of a job, you will simply make it possible to focus on the more critical tasks at hand. http://www.infograph.com/wr.htm


http://www.webreference.com *- link to us today http://www.webreference.com/new/ *- newsletter home http://www.webreference.com/new/submit.html *- submit article

New this week on WebReference.com and the Web:

1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win! 2. FEATURED ARTICLE: Webmaster's Guide to Server Side Includes 3. NET NEWS: * Adobe Goes 3-D * New Windows virus works for Linux, too * Where Humans and Machines Meet

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win

>Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0!

Submit your article today and you could win SoftQuad's HoTMetaL Pro 6.0 and XMetaL 2.0! If your article makes the cut, and we publish it on the site or in this newsletter, you win! See the submission page for details:


>New Signup & Win!

Sign up for the WebReference Update newsletter, and you could win a killer software bundle from Pegasus Imaging, JPEG Wizard and PICShow. Each week we'll draw new winners from our new subscribers - you could be next. Already a subscriber? Not a problem - just fill out the form, and you'll be automatically entered to win. Tell your friends!


Signup & Win Winners for last week are: Mr. John MacAulay of Edinburgh, Scotland, Ian Williams of London, UK, Marcel Cordes of Suhl, Germany and Michelle McConnell of Auburn, WA. Congratulations! Enjoy the software.


Building Dynamic Web Sites * April 25 * Chicago, IL Still building Web sites the old fashioned way with static HTML pages? This one-day crash-course Apr. 25 in Chicago will show you how to move from a flat-file nightmare to an easy-to-manage database-driven set up. Sign up by March 31st and SAVE $100. For more information and to register: http://seminars.internet.com/webdev/chicago01/index.html

**********************************************************adv.**** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. FEATURED ARTICLE: Webmaster's Guide to Server Side Includes

Have you ever wanted to add the same content to hundreds of Web pages and not have to change each page individually? Or perhaps you've wanted your site to have different style sheets for different browsers or directories, but you can't think of a quick way to do it. Or maybe you just wanted to make your site a little more dynamic but don't want to get into all the intricacies of CGI or ASP. If you've wished for any these things, this article is for you.

We begin with an introduction to Server Side Includes, or SSI. For those of us most acquainted with SSI, we simply call them includes. SSI allow you to display and act upon environment variables and include external files in your HTML pages when displayed in a browser. In addition, SSI can control the content and style of your HTML pages conditionally with if/else logic. In short, SSI are directives that you can include in an HTML page. The directives are quite simple to write. Understanding what is going on behind the scenes isn't too difficult to understand either. If you include SSI in yourpage.html and yourpage.html is requested by a browser, your server will retrieve yourpage.html, parse the SSI and then send the page back to the requesting browser.

SSI are a feature of some Web servers, like Apache. A common misconception is that *all* Web servers allow the use of SSI. If your Web server is lucky enough to have SSI, the Web server needs to have SSI enabled, usually requiring a small edit to the configuration files. Moreover, when you enable SSI, you instruct the Web server to parse SSI directives only in files of a certain type. Usually, people instruct the Web server to only look for include directives (not the SSI) in files with a .shtml extension. If you instruct the Web server to look for includes in files with a .html extension, then your Web server will do exactly that. This will affect your Web server's performance to some degree by slowing down the download time for each HTML page. Thus, you need to decide if almost all of your HTML pages are going to have SSI or only a few of them. In addition, the amount of time your HTML pages are slowed down depends on the complexity of the SSI you write.


The syntax for a server side include directive is:

<!--#command parameter="argument" -->

Each directive requires a parameter and each parameter takes an argument. There are six server side include commands, namely: include, echo, config, exec, flastmod and fsize.

Perhaps the most important command is the include command. The include command allows you to include an external file in an HTML page. For example, you could save an embedded style sheet in the included file like so:

<STYLE TYPE="text/css"> <!-- .include font{ font-size: 75%; font-family: verdana, arial, helvetica;} .include A:link { color: blue; } .include A:visited { color: purple; } pre.code {color: #660099; margin-left:5%} address {text-align: right} --> </STYLE>

You could then save the above SSI, which is also an embedded style sheet as stylesheet.html. If you save stylesheet.html in the same directory as the HTML pages you want stylesheet.html to work with you can place the directive:

<!--#include file="stylesheet.html" -->

in the HTML pages you want stylesheet.html to be contained in.

However, if you save stylesheet.html in a different directory than the HTML pages you want this stylesheet.html to affect, you can use the more general:

<!--#include virtual="/directory_name/stylesheet.html"-->

In general, the virtual parameter allows you to place include directives in any HTML file regardless of its location relative to the file that's included.

>Using Environment Variables

The echo command is also very useful. You can use echo to output any of the CGI environment variables in addition to six environment variables specific to SSI, which are listed below.

* DATE_GMT: holds date and time in GMT * DATE_LOCAL: holds date and time in local time zone * DOCUMENT_NAME: holds the current filename * DOCUMENT_URI: holds path of file from server root to filename * LAST_MODIFIED: holds last modification date and time for current file * QUERY_STRING_UNESCAPED: holds unaltered query string with all shell metacharacters escaped with a "\".

So, in accordance with the list above, the include directive below will output the date the HTML page containing the directive was last modified.

<!--#echo var="LAST_MODIFIED" -->

With the exec command, you can place the output of a program in an HTML page. The exec command takes two parameters: cmd for any application and cgi for a CGI script. The syntax for the exec cgi directive is basically the same as other include directives. Here's an example:

<!--#exec cgi="/cgi-bin/some_cgi_program.cgi" -->

In this example the output of some_cgi_program.cgi from the directory cgi-bin will be included in any HTML file with the above directive.

The other three include commands follow the same grammar. The fsize command outputs the size of a file. You could even use the fsize command to output the size of one HTML page in another HTML page. The config command is useful for changing the server side include error message, and for formatting time and file size information. The flastmod command is useful for displaying the last time any file was modified.

>Conditional SSI

Most of the commands above are useful, but still haven't scratched the surface of the power of SSI. What if you are having trouble with CSS/browser incompatibility and need some relief? This kind of problem is perfect for conditional SSI. Conditional SSI use the same if/else control structures that many other programming languages use. However, since HTML doesn't have logic of it's own, the if/else statements need to be commented out, just like in other SSI directives. Here is an example of a conditional SSI that displays one style sheet for Netscape 4 and another style sheet for all other browsers.

<!--#if expr="(${HTTP_USER_AGENT} = /Mozilla\/4/) && (${HTTP_USER_AGENT} != /MSIE/)" --> <LINK rel="stylesheet" type="text/css" href="netstyle.css"> <!--#else --> <LINK rel="stylesheet" type="text/css" href="nonnetstyles.css"> <!--#endif -->

When looking at this example, first notice the <!--#endif --> directive at the end of the conditional logic. The meaning of this directive is obvious; however, note that the logic won't work if <!--#endif --> is left off. The other thing to notice is that the "if" statement says, "if Mozilla 4 and not MSIE (Internet Explorer or Opera)." The "not Internet Explorer" part is necessary since the HTTP_USER_AGENT value for IE 4 and above contains the string Mozilla/4.0. To make things a little clearer, here is the output of the HTTP_USER_AGENT environment variable for Internet Explorer 5.5:

Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)

and Opera 5:

Mozilla/4.0 (compatible; MSIE 5.0; Windows NT 5.0) Opera 5.02[en].

To output the value of the HTTP_USER_AGENT variable to your browser you can use the echo command mentioned above.

The browser example above can easily be extended; consider the case where you want three different style sheets for three different environments. Let's say you want one style sheet for all HTML files displayed in Netscape, one for HTML files in your /graphics directory when displayed in non-Netscape browsers and one for HTML files in all other directories when displayed in non-Netscape browsers.

<!--#if expr="(${HTTP_USER_AGENT} = /Mozilla/) && (${HTTP_USER_AGENT} != /MSIE/)" --> <!--#elif expr="${DOCUMENT_URI} = /^\/graphics\/.*/"--> <!--#else --> <!--#endif -->

There can only be one else directive in each if/else control structure. If you want more conditions you need to use the elif directive. Unlike the else directive, the elif directive can be used as many times as you like. In addition, the syntax of the elif directive is more similar to the if directive than it is to the else directive. The elif directive takes arguments just like the if directive. In the example above the DOCUMENT_URI environment variable is used to match the /graphics directory. Note that you can use regular expressions in conditional SSI statements. Note also that the style sheets are embedded style sheets saved as separate SSI, instead of linked style sheets like in the first example

>On Including an Include

By now you can probably see the power of SSI, but you're thinking, "what if I want to include an include in an include?" The answer is, "you can and it'll work" and you can include an include in an included include too. You can recursively include includes until your server cuts you off. That is, the number of layers of inclusion you are allowed is determined by a setting in the config files of your Web server. While it might be fun to think about infinite levels of inclusion, it certainly won't help the performance of your Web site. I know from experience that two layers of inclusion won't cause a problem. Here's an extension to the style sheet example above using two layers of inclusion. Say you don't want to include the long list of directives below in your HTML page:

<!--#if expr="(${HTTP_USER_AGENT} = /Mozilla/) && (${HTTP_USER_AGENT} != /MSIE/)" --> <!--#include virtual="/netstyle.css"> <!--#elif expr="${DOCUMENT_URI} = /^\/graphics\/.*/"--> <!--#else --> <!--#endif -->

Instead, you could save the long list in a file named include.html. Then you could include the below directive in place of the long list above in your HTML page:

<!--#include virtual="/directory/include.html" -->

The end result of the doubly included file will be the same as the first triple style sheet example. But in this case, you will have made your site easier to maintain by putting your logic and style sheet names in an external file. This way, if you change the logic or name of your style sheets, you only need to edit one file instead of many. Again, the benefits of SSI are easily recognizable. However, be careful when you write SSI.

>Common Pitfalls

There are two common pitfalls when trying to use SSI.

1. People usually put a space between the <!-- and the #. If you add this space your SSI won't work. 2. People forget that SSI depend on both Web server type and configuration. Remember, if your server is configured to only parse SSI in files with a .shtml extension and you save your HTML page with include directives as .html, your SSI won't be parsed by the server and consequently won't work.


In conclusion, SSI are a very useful tool for Web development. SSI can provide simple dynamic content without the use of CGI or ASP. SSI allow you to make site-wide changes by updating only one include file. In addition, SSI syntax has simple branching logic allowing you to tailor your Web pages to the environment in which they are displayed.


Having trouble keeping up with the latest Internet product releases and updates? Let Internet Product Watch do it for you! Browse our categorized product briefings, check out our top product listings, and sign up for our free daily and weekly newsletters. Visit today, and keep up with the Web! http://internetproductwatch.com/ Free weekly newsletter! Send a blank E-Mail to: mailto:join-ipw-alert-text@list4.internet.com

**********************************************************adv.**** Further Reading

Here are some links to some useful tutorials on SSI if you are interested in knowing more.

Regular SSI Reading

NCSA HTTPd Server Side Includes (SSI) http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

UseForeSite.com http://www.useforesite.com/tut_ssi.shtml

BigNoseBird.com http://bignosebird.com/ssi.shtml

Conditional SSI Articles

University of Kansas Academis Computing Services http://www.ukans.edu/acs/docs/other/ssi/ssi2.shtml

Siteexperts.com http://www.siteexperts.com/tips/ddrive/ts01/index.asp

Leland conditional SSI extensions http://www.stanford.edu/leland/ssi/ssimods.shtml

# # #

Alexander Rylance is Assistant Editor for WebReference.com. Prior to working for WebReference he was a Java T.A. at the University of Michigan - Ann Arbor and a Business Analyst at Banc of America Securites. His primary interests are Web Development, Asian culture and pretty much anything to do with the Internet. He can be contacted at: mailto:arylance@internet.com.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. NET NEWS: Adobe Goes 3-D New Windows virus works for Linux, too Where Humans and Machines Meet

>Adobe Goes 3-D

Read about the new Abobe application that does 3D. http://www.techweb.com/wire/story/TWB20010327S0001

>New Windows virus works for Linux, too

The first virus to attack both Windows and Linux is here. http://www.geek.com/news/geeknews/2001mar/gee20010328005073.htm

>Where Humans and Machines Meet

Learn what was said in the latest conference on the future of computer and human interaction. Contains comments by Ray Kurzweil. http://www.computerworld.com/cwi/stories/0,1199,NAV47_STO58971,00.html

That's it for this week, see you next time.

Andrew King Managing Editor, WebReference.com update@webreference.com

Alexander Rylance Assistant Editor, WebReference.com arylance@internet.com

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Frank Fazio on 1-203-662-2997 or send email to mailto:ffazio@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 150 Web sites are organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp. http://internet.com - The Internet & IT Network Copyright (c) 2001 Jupitermedia Corp.. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html