The XSLT may transform an XML document into many types of documents such as HTML, plain text, PDF, postscript, etc... This tutorial is showing how to convert an XML document into an HTML webpage.

Consider the movie.xml file given below, which can be opened in all major browsers.

movie.xml

<?xml version="1.0" encoding="UTF-8"?>

<root>

    <cinema>

    <film>Predestination</film>

    <director>Spierig Brothers</director>

    <year>2014</year>

    </cinema>

   

    <cinema>

    <film>Inception</film>

    <director>Christopher Nolan</director>

    <year>2010</year>

    </cinema>

   

    <cinema>

    <film>The expendables</film>

    <director>Sylvester Stallone</director>

    <year>2014</year>

    </cinema>

   

    <cinema>

    <film>The Dark Knight</film>

    <director>Christopher Nolan</director>

    <year>2008</year>

    </cinema>

   

    <cinema>

    <film>Mission:Impossible</film>

    <director>Brad Bird</director>

    <year>2011</year>

    </cinema>   

</root>

For the .xml file given above, XSLT stylesheet document has to be defined. Create a file movie.xsl with below content. This stylesheet displays the XML data in a table with movie name sorted in ascending order. If the year of release of the movie is in 2014, the data is highlighted in blue. 

Read more about XML and stylesheets here...

movie.xsl

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:output method="html"/>

 

     <xsl:template match="/">

        <html>

            <head>

                <title>movie.xsl</title>

            </head>

            <body>

                <h2 style="color:green;">cinema collection</h2>

                <table border="1">

                    <tr style="color:#9acd32">

                        <th>film</th>

                        <th>director</th>

                        <th>year</th>

                    </tr>

                    <xsl:for-each select="/root/cinema">

                    <xsl:sort select="film" />

                        <xsl:if test="year!='2014'">

                        <tr>

                            <td><xsl:value-of select="film" /></td>

                            <td><xsl:value-of select="director" /></td>

                            <td><xsl:value-of select="year" /></td>

                        </tr>

                        </xsl:if>

                        <xsl:if test="year='2014'">

                            <tr>

                                <td style="color:blue"><xsl:value-of select="film" /></td>

                                <td style="color:blue"><xsl:value-of select="director" /></td>

                                <td style="color:blue"><xsl:value-of select="year" /></td>

                            </tr>

                        </xsl:if>

                    </xsl:for-each>

                </table>

            </body>

        </html>

    </xsl:template>

</xsl:stylesheet>

Now in the XML  document the stylesheet is added using <xml-stylesheet> element as below.

Example of how to convert an XML document into an HTML webpage

 

›› go to examples ››