An Introduction to XSLT and XPath
Creating The Stylesheet
Now that we have the course information marked up in XML, let's see how we can devise a stylesheet for displaying the
XML document nicely on a web browser.
|
<![CDATA[
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<HTML>
<BODY bgcolor="wheat">
<B>Course Title: </B><xsl:value-of select="Course/Title" /><BR/>
<B>Synopsis: </B><CENTER><I><xsl:value-of select="Course/Synopsis" /></I></CENTER><BR/>
<B>Duration: </B><xsl:value-of select="(Course/Duration) div 8"/> days <BR/>
<B>Fees: </B>S$<xsl:value-of select="Course/Fees" /><BR/>
<B>Dates:</B><BR/>
<xsl:for-each select="Course/CourseDates/Date[Day!='']" >
<xsl:value-of select="Day"/>/<xsl:value-of select="Month"/>/<xsl:value-of select="Year"/>
From <xsl:value-of select="Time/From"/>hrs to <xsl:value-of select="Time/To" />hrs
@ <xsl:value-of select="Venue"/> -
<xsl:value-of select="(/Course/Duration) div (((Time/To) - (Time/From)) div 100)"/>
<xsl:value-of select="Mode" />
<BR/>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
]]>
|
To associate the stylesheet with the XML document, simply insert an additional PI at the top of the XML document:
|
<![CDATA[
<?xml version='1.0'?>
<?xml:stylesheet type='text/xsl' href='HTML.xsl'?>
<Course id="xmlxslt">
]]>
|
Refreshing the XML document on IE5 will yield a nicely formatted document:
What IE 5 did was to load the specified stylesheet and transform the XML document into HTML. It is important to note that
the transformation takes place on the browser-side. This is known as client-side transformation.
Next: Dissecting The Stylesheet
|
