XML Home

XML Tutorial
About XML
XML Viewers
XML Editors
XML Documents
XML Syntax
XML Elements
XML Attributes
XML with CSS
XML with XSL
XML Namespace
XML Local Namespace
XML Default Namespace
XML Entities
XML Creating Entities
XML CDATA

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:

After...

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

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.


<?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.


<?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 website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/xml/tutorial/xslt_example.cfm">XSLT Example</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites