How2Day: Xslt HTML Tutorial

XSLT, or Extensible Stylesheet Language Transformations, are used to transform XML content into other formats for display. One of the most common practices with XSLT is transforming XML data into HTML for display within a Web browser. XSLT can also read HTML, and can do so with little difficulty as long as the HTML conforms to XHTML recommendations, making it a valid XML format. Whether you're reading or writing HTML with your XSLT code, the same basic practices are involved.

1

Create XML data. Model and construct your XML content according to the needs of your own particular project, as in the following example, representing data about films:

<?xml version="1.0"?>

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

<library>

<genre>

<title>Science Fiction</title>

<film>Star Wars</film>

<film>ET</film>

</genre>

<genre>

<title>Comedy</title>

<film>Some Like It Hot</film>

</genre>

</library>

Notice the link to an ".xsl" document within the XML, indicating that Web browsers should use this when presenting the content. Save your XML file.
2

Create an outline of how you want your data to be displayed in HTML. This can be anything from a simple sketch on paper of the kind of layout you want to achieve, to something more detailed with specific structures outlined in HTML. Your purpose in creating these structures is to present XML data in a format that is readable to humans via the Web browser, and you should therefore choose HTML structures that best serve this aim.
3

Create XSLT to transform your XML into HTML. Create a new file named "transformations.xsl" in the same directory as your XML and enter the following outline:

<?xml version="1.0"?>

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

<xsl:output method="html"/>

<xsl:template match="/">

</xsl:template>

</xsl:stylesheet>

This is the basic structure of an XSLT document. In between the opening and closing "<xsl:template>" tags you will place the rules that you want to apply to the XML data in order to transform it into HTML.
4

List your XSLT transformation rules. In your XSLT document, include code to create the basic outline of an HTML page. Replace your code with the following extended version:

<?xml version="1.0"?>

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

<xsl:output method="html"/>

<xsl:template match="/">

<html><head><title>My Transformed Library Data</title></head><body>

</body></html>

</xsl:template>

</xsl:stylesheet>

This HTML page structure will be able to hold your XML data, once it has also been transformed into HTML.
5

Display the elements in your XML as HTML by including them in your XSLT transformations. Between the "<body>" tags in your XSLT, include the following:

<h1>Library Data</h1>

<xsl:apply-templates select="library/genre"/>

Include these specific rules after the closing "</xsl:template>" tag and before the closing "</xsl:stylesheet>" tag:

<xsl:template match="genre">

<div>

<h3><xsl:value-of select="title"/></h3>

<xsl:apply-templates select='film'/>

</div>

</xsl:template>

<xsl:template match="film">

<p><xsl:apply-templates/></p>

</xsl:template>

Place your XML and XSLT files on a Web server and browse to the XML file, you should see that the XML data has been transformed into HTML.

How2Day

5/3/11

Xslt HTML Tutorial

No comments:

Archives