Web Services, Part V: XML and XSLT Programming: Converting XML to HTML - Doc JavaScript | WebReference

Web Services, Part V: XML and XSLT Programming: Converting XML to HTML - Doc JavaScript


Web Services, Part V: XML and XSLT Programming

Converting XML to HTML

You can convert an XML file to HTML on the fly. You just load the XML file in your browser, and out will come the desired HTML. In order to do this conversion on the fly, you need to specify the XSLT file (formatting directives) in the body of the XML file. The top two lines of the XML file should be as follows:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>

where transform.xsl is the name of the formatting file.

To convert an XML file to HTML, you start by writing the skeleton of the HTML file, specifying all tags such as <BODY> and <H1>. The content between each pair of tags is selected by XML directives. Take a look at the following line:

<H2><xsl:value-of select="//summary/subhead"/></H2>
The XML code is written within matching HTML brackets, and it includes one XML tag: xsl:value-of. This XML tag also contains a switch, select, by which it matches XML data. In the above example, it searches for the <summary><subhead> combination. Here is the top portion of the XML file: 

<summary>
  <heading>MyDVD Rental Store</heading>
    <subhead>Periodical Sales Report</subhead>
    <description>Sales report for January, February,
      and March of 2001</description>
</summary>

You can see that the value matching the above specification (//summary/subhead) is "Periodical Sales Report". In a similar fashion, we find that //summary/heading is "MyDVD Rental Store", and that //summary/description is "Sales Report for January, February, and March of 2001". Here is the full XSLT file:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="
  https://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE><xsl:value-of select="//summary/heading"/></TITLE>
</HEAD>
<BODY>
<H1><xsl:value-of select="//summary/heading"/></H1>
<H2><xsl:value-of select="//summary/subhead"/></H2>
<P><xsl:value-of select="//summary/description"/></P>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>

Load the XML and XSLT files onto your drive, by right-clicking these links and selecting "Save Target As...." Try reading the XML file in your browser. Left-click the XML link directly on this page, to achieve the same effect. You will get the full Sales Report on this as well as all other pages of this column. The header of the report is formatted and displayed like this:


Next: How to loop through XML data tags

https://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: December 31, 2001
Revised: December 31, 2001

URL: https://www.webreference.com/js/column100/4.html