How to use XSLT to convert an XML file into a HTML5 Web page

How to use XSLT to convert an XML file into a HTML5 Web page

In this article, I'll show you how to use the XSLT language to output an XML file to a Web page in HTML5 format.

Let's take a look at the following XML format file (movies.xml), which contains some information about the movie:

<?xml version= "1.0" encoding= "UTF-8"?><movies> <movie> <title>aliens</title > <year>1986</year> <rank>8.2</rank> </movie> <movie> <title> Apollo 13</title> <year>1995</year> <rank>7.5</rank> </movie> <movie>     ; <title>Pi</title> <year>1998</year> <rank>7.1</rank> </movie> </mov Ies>

The next step is to convert the original XML file into a HTML5 format file by using the XSL conversion template file (movies.xsl):

<?xml version= "1.0" encoding= "UTF-8"? ><xsl:stylesheet version= "1.0" xmlns:xsl= "HTTP://WWW.W3.ORG/1 999/xsl/transform "> <xsl:output method=" html "doctype-system=" About:legacy-compat "Encodi ng= "UTF-8" indent= "yes"/> <xsl:template match= "/" > <link rel= "stylesheet" href= "Movies.css"/>      
A CSS style file (movies.css) is used in the template and will be used in the converted HTML5 file:
table.movies {background-color: #CDCDCD;  font-family:arial;  margin:10px 0pt 15px;  font-size:8pt;  width:100%; Text-align:left;}  Table.movies thead tr th {background-color: #E6EEEE;  border:1px solid #FFF;  font-size:8pt; padding:10px;}  Table.movies tbody tr td {Background-color: #FFF;  Color: #3D3D3D;  Vertical-align:top; padding:10px;}
The final step in the transformation effort is to connect the original XML file with the XSLT transformation template, which is highlighted in bold characters:
<?xml-stylesheet type= "text/xsl" href= "movies.xsl"?><movies> <movie> <title>     aliens</title> <year>1986</year> <rank>8.2</rank> </movie> <movie> <title>apollo 13</title> <year>1995</year> <rank>7.5</rank> </movie>   ; <movie> <title>Pi</title> <year>1998</year> <rank>7.1</rank> </ Movie> </movies>
Now, let's look at the results of the transformation. Before conversion, you need to create a directory and related files movies.xml,movies.xsl and movies.css . Open the Movies.xml directly with the browser and you will see the conversion results of the XML toHTML5. But if you want to see the structure of generating HTML5 format, you need to use some Web page development tools or Debugging tools.
 How to use XSLT to convert an XML file to a HTML5 Web page