Example study: How to transform XML into HTML using XSL.The details of this example will be explained in the next chapter. 

Start with your XML Document

First you start with the XML document that you want to transform into HTML:

Create an XSL Style Sheet Document

Then you create an XSL Style Sheet with a transformation template:

Link the Style Sheet to the XML document

Then you add an XSL Style Sheet reference to your XML document:

If you have an XSL compliant browser, like Internet Explorer 5.0 or later, your browser will nicely transform your XML into HTML.

XSL - Templates

XSL uses TEMPLATES to describe how to output XML.

CSS uses Rules

If you have studied our CSS School, you will know that CSS uses one or more rules to define the output of HTML elements. A selector is used to associate the rule with an HTML element.

The p selector in this CSS rule tells that a <p> element should be displayed using a font named arial:

XSL uses Templates

XSL uses one or more templates to define how to output XML elements. A match attribute is used to associate the template with an XML element. (The match attribute can also be used to define a template for a whole branch of the XML document).

Look at the following XSL Style Sheet that contains a template to output the XML CD Catalog from the previous chapter:

Since the style sheet is an XML document itself, the document begins with an xml declaration: <?xml version='1.0'?>

The xsl:stylesheet tag in the second line defines the start of the stylesheet.

The xsl:template tag in the third line defines the start of a template. The template attribute match="/" associates (matches) the template to the root (/) of the XML source document.

The rest of the document contains the template itself, except for the last two lines that defines the end of the template and the end of the style sheet.

The result of the transformation will look (a little disappointing) like this:

The <xsl:value-of> Element

The result from the previous sample was a little disappointing, because no data was copied from the XML document to the output.

The XSL <xsl:value-of> element can be used to select XML elements into the output stream of the XSL transformation:

Note: the syntax for the select attribute value is called an XSL Pattern. It works like navigating a file system where a forward slash (/) selects subdirectories.

The result of the transformation will look like this:

The <xsl:for-each> Element

The result from the previous sample was also a little disappointing, because only one line of data was copied from the XML document to the output.

The XSL <xsl:for-each> element can be used to select every XML element into the output stream of the XSL transformation:

The xsl:for-each element locates elements in the XML document and repeats a part of the template for each one.

The result of the transformation will look like this:

Page    1     2    3    4