Example 1: Saving Bandwidth by Using XSLT for Headers and Footers

Let's start by taking a normal web page, and seeing how we can use XSLT to add some standard content to the page. In this example, we'll add a header and footer to a simple page of XHTML.

All of the examples in this chapter can be downloaded from the glasshaus web site at http://www.glasshaus.com. The downloadable versions have additional comments so you don't need to keep referring back to the book as you read them.

The benefits of doing this in XSLT are as follows:

·          We only need to store one copy of the header and footer code to cover every page on the site, making it easy to change them globally without editing every single page.

·          Users only need to download the header and footer XSLT code once, even though they are used on every page in the site. This can give bandwidth savings, which is important if your service provider charges by the megabyte, or if you are supporting modem users.

·          Server processing is reduced as all the work is being done on the client.

How else could we do it? We could manually add the header and footer to every web page, but this would result in a site maintenance nightmare, especially for a large site. The other alternatives are as follows:

·          By using Server-Side Includes (SSI) to include standard header and footer content on every page.

·          By using a scripting language (such as ASP, PHP, or JSP) to generate web pages with the header and footer included.

Although these methods share the first advantage of only storing one copy of the header and footer, they do not reduce the bandwidth or server load.

Take it From the Top

Here's our starting XHTML page, dinosaur.html. It's nice and simple, not very pretty, but functional (don't worry: we'll beautify it later):

And here's that code in action:

(Well, we did say it wasn't that exciting.)

Let's spice up our page by adding a header and footer. We could of course just add some extra header and footer XHTML into our page and do things the old-fashioned way, but that wouldn't give us the benefits we describe above. Instead, we'll add an extra line to the top of dinosaur.html, and save the resulting code as dinosaur_1.xml:

This new line performs one very important task: referencing our first XSLT stylesheet file, headerfooter_1.xsl. The rest of our XHTML stays the same.

During this chapter, we will encounter slight differences between how various browsers deal with stylesheets. In a minute, we'll learn a useful trick to specify different stylesheets for different browsers, but for now we'll keep things simple and just specify headerfooter_1.xsl.

You may have spotted that our new page has an .xml extension rather than .html. There's a reason for this. In order to start using XSLT to transform our page, we need to be sure that the page is well-formed XML, rather than just any old HTML we've chucked together. Our new page is in fact XHTML, as introduced in Chapter 2  we therefore give it the .xml extension.