XSLT Example

Here's an example of an XML document that has been transformed using XSLT.

Before...

We can take a raw XML file that looks something like this:

Raw XML file

After...

...and apply XSLT so that it looks something like this:

XML XSL example

You might have noticed that the "After" shot contains more than the raw XML file. It contains a heading ("Cool Tutorials") and some text ("Hey, check out these tutorials!"). This is one of the benefits of XSLT. The following lessons explain XSLT in more detail, and demonstrate how to apply XSLT to an XML document.

How to Do This?

Instead of linking to a CSS file (as we did in the XML with CSS lesson), this time we link to a XSL file.

Step 1 (XML file): Create an XML file with the following content and save it.

Copy to Clipboard
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="tutorials.xsl"?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.quackit.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www.quackit.com/html/tutorial</url>
</tutorial>
</tutorials>

Step 2 (XSL file): Create a file with the following content and save it as tutorials.xsl into the same directory as the XML file.

Copy to Clipboard
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<title>XML XSL Example</title>
<style type="text/css">
body
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}

.tutorial-name
{
display:block;
font-weight:bold;
}

.tutorial-url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
</style>
</head>
<body>
<h2>Cool Tutorials</h2>
<p>Hey, check out these tutorials!</p>
  <xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="tutorial">
  <span class="tutorial-name"><xsl:value-of select="name"/></span>
  <span class="tutorial-url"><xsl:value-of select="url"/></span>
</xsl:template>

</xsl:stylesheet>

This XSL file contains XSL markup, HTML markup, and CSS. The following lessons explain XSLT in more detail, and demonstrate how to apply XSLT to an XML document.

Enjoy this page?

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
ZappyHost Banner Ad