How to Use XSLT to convert XML files to HTML5 web pages?

Source: Internet
Author: User
Tags xslt

How to Use XSLT to convert XML files to HTML5 web pages?
How to Use XSLT to convert XML files to HTML5 web pages

In this article, I will show how to use XSLT to output an XML file to an HTML5 web page.

Let's take a look at the next XML format file (Movies. xml), The file contains some information about the film:

<?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> </movies>

The next step is to convert the template file by using XSL (Movies. xslTo convert the original XML file to an HTML5 file:

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:output method="html"              doctype-system="about:legacy-compat"              encoding="UTF-8"              indent="yes" />  <xsl:template match="/">    <link rel="stylesheet" href="movies.css" />      

The template uses a CSS style file (Movies.css), Which 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 last step of the conversion is to associate the original XML file with the XSLT conversion template, as shown in the following figure:

<?xml version="1.0" encoding="UTF-8"?> <?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 conversion result. Create a directory and related files before conversion.Movies. xml,Movies. xslAndMovies.css. Directly use the browser to mount movies. open xml and you will see the Conversion Result of XML toHTML5 ., but if you want to see the structure of the HTML5 format, you need to use some web development tools or debugging tools ..


How to Use xslt to convert any xml file into HTML

XSLT specifically converts xml
Let's take a look at the tutorial. It's very simple.
We recommend w3school online tutorials.
 
How to convert an xml file into an html file using an xslt File

You can change the xslt extension to xsl to associate it with xml.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.