Transform XML into HTML using XSLT

Introduction

XSLT stands for Extensible Stylesheet Language for Transformations. As you can see, there is no XML in name, and that is just strange if you
think about it, because XSLT is used for XML document transformation (transform input XML document into output (no necessary XML) document).
One of the advantage of parsing and handling XML documents with XSLT is that XSLT is W3C recommendation (so you have standard tool set and
concepts that are transferable).

Please download example from my google code repository:

XSLT: download
XML example file: download

Concepts

XSLT language should be based on pattern matching. Most of your stylesheet consist of rules (called templates) used to transform
XML documents. Each rule says, "When you see part of a document that look like this (when you see specific tag in XML document), here's how you convert
it into something else.". XSLT is heavily influenced by the design of functional programming languages (Lisp, Scheme, F#, Haskel, ...).

You can think of templates as equivalent to functions in functional languages. In XSLT you do everything with recursion, as in any other F. language.

In oder to follow this tutorial, you need to understand what XML is all about. It is (XML) basically document that holds data and describe meaning of data. You can
describe data by defining schema's (similar to database schema's...).

When we create XML stylesheets we use two standards: XSLT and XPath. You can see my short XPath tutorial if you are not familiar with
this standard. There is also XQuery that is more similar to SQL, but we will not use it here.

There are number of free XSLT processors (Xalan, Saxon, Microsoft XSLT Processor, Altova XSLT Engine). We will use Altova XSLT Engine that is used
in their program XML Spy.

Example

This tutorial will show how to transform XML to HTML file. We will use XML files from
US National Weather Service

They already include XSLT in their XML files, so you need to remove that file name and assign XSL file we will create here.

We will transform weather XML file in rather simple HTML file.

Here's how XML file look like:

You can see that this XML file is quite simple. Only one root element and bunch of child elements.

From this XML file we will create HTML page that looks like this:

You can see that page is also pretty simple. Only subset of elements are shown.

XSLT file for this page looks like this:

As you can see we are using XSLT 1.0 for browser compatibility reasons.

Line-by-line review:
4-6: We match root of the element and then apply templates for all other child elements.
8-17: Create HTML HEAD element and fill some styles.
18: Start BODY element filling.
20 and 24: Set some DIV's (not important)
21: Construct img element by combining two elements from XML.
25: We will not show all elements, we are interested only in "location", "observation_time", "pressure_string" and "wind_string".
30-34: For temperature element we will use special template.
35-37: For all other elements we will use same template. In this template we
use another template for extracting sensible name from XML element tag names (why not use it if they are mostly ok).
38-52: If element tag name contains "string" string then we will remove it. If element tag name contains only '_' char, then replace that char with space ' '. If this is not the case, then just return tag name. In this way we can use single template for processing all elements.

Ok that's it! Let's move on another tutorial...