Design Techniques

XSL: Extensible Stylesheet Language

Building a site using XML and XSL

The Basics

This tutorial works through the basics of creating a small web site using Extensible Markup LanguageXML and Extensible Stylesheet LanguageXSL. It is aimed at web designers primarily to demonstrate how easy XML technology is to use and assumes that you are familiar with Cascading Stylesheets. This tutorial builds on the previous CSS tutorial.

Note: The later browsers are now pretty good at parsing XML files directly which is useful during development. Using Internet Explorer it helps to have MSXML installed. Mozilla also does a pretty good job of parsing and will presumably only get better. We'll use a pretty simple method to get the XHTML output rendering in a browser as the focus of the tutorial is the XSL and XML files (normally XML parsing would happen server side).

Setting Up

I've included all the files you'll need to work through the tutorial in a zip file (52k). This includes all the graphical elements, the .css files, the finished XSL and XML and the final HTML file to demonstrate what it should look like. Also it is best to use a late model browser for this sort of development so that 1) the CSS renders correctly and 2) you can parse XML directly in the browser. If you stick with something like Mozilla or Internet Explorer 5.5 (or later) all should be well.

The XML

The XML file holds all the content for the page and I usually have one for each page in the site to keep it simple. The trick with XML is that it is 'extensible' which means you can use any tag you like to mark up the content. Without getting too deep this is both good and bad. I tend to use tags that describe the content in english terms and keep it real simple. eg. A paragraph is define as a <paragraph> tag etc. You'll get the idea pretty quickly.

So, let's start with the XML file and build up the content for a page that will then be 'styled' into XHTML by the XSL. Start a new file in a text editor (or xml editor if you're keen) called ninja.xml and start it off with the following tags:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="ninja.xsl"?>

The first line simply states what kind of file it is. The second line allows us to specify the xsl we want to render against so that the browser can parse it. Next we'll start building the XML elements into a structure. Remember you can call these elements anything you want so if you think the names I've used are odd feel free to change them...just remember them when we come to the XSL. The next line defines the top level of the strucure:

There can be only one top level element so all the other elements go inside this one.

Next we'll start throwing in the content and getting it marked up.