How To Convert XML InTo HTML Using XLST

Published on November 19, 2012

I believe XML is the king of Web-technology. I think there is no Web development technology with out XML technology in it. XML is a great Tool sending data over internet. Here the data may be any thing. It may be DataBase,It may styles, anything. For example lets take our blogger.com, In this the blogger templates are in XML format and also we can download all our posts in XML format. Ok! I know that other story. What all I mean is if you want to be in web development field you should know about XML technology.

Demo

Download

To-day we will learn XLST(eXtensible Stylesheet Language Transformations). The XLST used to apply HTML(or)xHTML template to a XML document. In order to explain we have following XML file. posts.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<posts>
<post>
<title>Simple Chat Engine Using HTML5(Server Sent Events) And PHP</title>
<url>//www.techumber.com/Simple-Chat-Engine-Using-HTML5-Server-Sent-Events-And-PHP.html
</url>
</post>
<post>
<title>Amazing Photo Flip Effect Using Pure CSS3</title>
<url>//www.techumber.com/Amazing-Photo-Flip-Effect-Using-Pure-CSS3.html
</url>
</post>
<post>
<title>Basic File Operations Create,Write,Read,Append and Delete In PHP
</title>
<url>//www.techumber.com/Basic-File-Operations-Create-Write-Read-Append-Delete-Operations-In-PHP.html
</url>
</post>
<post>
<title>Simple Meta Tag Generator Using JavaScript</title>
<url>//www.techumber.com/Simple-Meta-Tag-Generator-Using-JavaScript.html
</url>
</post>
<post>
<title>Wow, Quotes Showcase Widget Using Pure CSS3</title>
<url>//www.techumber.com/Wow-Quotes-Showcase-Widget-Using-Pure-CSS3.html
</url>
</post>
<post>
<title>Exactly Facebook Like URL Parsing Using PHP and Jquery</title>
<url>//www.techumber.com/exactly-facebook-like-url-parsing-using.html
</url>
</post>
<post>
<title>Ultimate Matrix Like Effect Using Pure CSS3</title>
<url>//www.techumber.com/ultimate-matrix-like-effect-using-pure.html
</url>
</post>
<post>
<title>Amazing Neon Text Effect With Pure CSS3</title>
<url>//www.techumber.com/amazing-neon-text-effect-with-pure-css3.html
</url>
</post>
<post>
<title>Online Voting System With PHP And AJAX</title>
<url>//www.techumber.com/2012/10/online-voting-system-with-php-and-ajax.html
</url>
</post>
<post>
<title>Create Twitter Like Follow And Unfollow With Jquery</title>
<url>//www.techumber.com/2012/10/create-twitter-like-follow-and-unfollow.html
</url>
</post>
</posts>

It is just a example xml file. In this posts is the root node. It contains post details like title and url. posts.xsl

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="//www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<div class="wrapper">
<table border="1">
<tr>
<th>Title</th>
<th>URL</th>
</tr>
<xsl:for-each select="posts/post">
<tr>
<td><xsl:value-of select="title"/></td>
<td>
<a>
<xsl:attribute name="href">
<xsl:value-of select="url"/>
</xsl:attribute>Tutorial
</a>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

This is the template. The XML file will be processed according to this template. In this we displaying Title and URL links in a HTML table. Read:How To Create Slide Show With Pure CSS3 Applying xls to xml IN order to apply xls to xml just add the following like

<?xml-stylesheet type="text/xsl" href="posts.xsl"?>

after

<?xml version="1.0" encoding="ISO-8859-1"?>

Just Make sure both files under same folder. Applying Styles Applying styles is just same as applying styles to html page. Add the following code between head tags.

body {
  background: #ddd;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
.wrapper {
  margin: 0 auto;
  width: 700px;
}
.logo {
  text-align: center;
}
table {
  background: #fff;
}
th {
  background: #333;
  color: #fff;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: underline;
}

That’s it if you want to test just open the posts.xml file in a browser. If you using Google-Chrome right-click > Inspect elements. There you can see everything will be in HTML format but actually we opened XML. Thank you if you need more ask me. I am always happy to help you!