Those of you who have been reading DevNewz for a few months already know that XML is one of the greatest things to come along. It is, therefore, ironic that the very features of XML which give it its strength and versatility also make it impractical for use as a Web authoring language: most mainstream browsers don’t know what to do with it. This will change. Before you know it, every Web browser on the planet will be able to handle XML just fine, but for now we must live with those that are equipped to deal with HTML.
XHTML, the XML application of the HTML standard, seems to be a step in the right direction, but it’s just a baby step. XHTML is really no more than HTML on its best behavior. It uses (fundamentally) the same tag designations to define analagous elements. Wonderful, if you want your current pages to be properly displayed in an XML-enabled browser, but lacking the aforementioned ‘strength and versatility’ of XML.
Which brings me to one of my favorite things about XML: you can define your own tags. Rather than fill a page with content that consists of <p>aragraphs, your page can be made up of an
<introduction>,
<summary>,
<analysis>,
<speculation>,
<prevarication>,
<transmogrification>,
<thisgreatnation>,
<hyperventilation>, and
<conclusion>, or whatever makes sense to you.
Unfortunately, HTML browsers have been designed to ignore unknown tags. It’s fine to consider the future when building your Web site, but one must also consider today. In order for most of today’s browsers to display your XML-marked-up code properly, it must be converted to HTML, which is where XSL comes in.
XSL, the eXtensible Stylesheet Language, is actually a language suite of sorts. The most important part of XSL is XSLT, which transforms raw XML code into some other language that a browser can understand, like HTML. As such, it allows you virtually unlimited creative control over the structure and organization of your data (using XML) while keeping you tethered to the real world (HTML).
As an example, let’s consider a hypothetical fan site for an old 60s band that was still touring well into the 90s. The band in question produced a number of albums, but it’s their live performances, and the bootleg tapes thereof, that have been at the root of their success. The webmaster of this site wants to have a page at which one can search through his (extensive!) collection of recordings.
For starters, his theoretical XML file might look something like this:
<?xml version=”1.0″?>
<band>
<show>
<location>Way
Big Stadium</location>
<date>
<year>1983</year>
<month>2</month>
<day>29</day>
</date>
<song>
<title>If You’re Happy and You Know It</title>
<key>CMajor</key>
<time>4:32</time>
<coolness>Fred’s sax solo really
rocks!</coolness>
</song>
<song>
<title>Michael Row the Boat Ashore</title>
<key>GMajor</key>
<time>7:16</time>
<coolness>Segue to He’s Got the Whole
World</coolness>
</song>
.
.
</show>
<show>
.
.
</show>
</band>
The problem with trying to use this file in its present form is that Web browsers will ignore unrecognized markup and just display the rest as best they can. The above XML file would appear as:
Way Big Stadium 1983 2 29 CMajor 4:32 Fred’s sax solo really rocks!…
(Notice that the text within the <title> element does not appear in the browser window. It does, however, appear in the browser’s title bar. That’s because <title> is a recognized HTML tag. Try it.)
In order to display the content of this XML document properly, our friend must create an XSL document which will serve as a template for the eventual HTML output:
<?xml version=’1.0′?>
<xsl:stylesheet
xmlns:xsl=”http://www.w3.org/TR/WD-xsl”>
<xsl:template match=”/”>
<html>
<body>
<table border=”1″>
<tr>
<th>Title</th>
<th>Key</th>
<th>Time</th>
<th>Really Cool Stuff About This
Performance</th>
</tr>
<tr>
<td><xsl:value-of
select=”band/show/song/title”/></td>
<td><xsl:value-of
select=”band/show/song/key”/></td>
<td><xsl:value-of
select=”band/show/song/time”/></td>
<td><xsl:value-of
select=”band/show/song/coolness”/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
If our friend saves this document as deadandlovingit.xsl in the same directory as his XML document, all he need do now is add the line
<?xml-stylesheet type=”text/xsl”
href=”deadandlovingit.xsl”?>
to his original XML document, so that it looks like:
<?xml version=”1.0″?>
<?xml-stylesheet type=”text/xsl”
href=”deadandlovingit.xsl”?>
<band>
<show>
.
.
</show>
</band>
If any of you try this, you’ll notice that it only creates a table with two rows. We’ll get to the explanations of how and why, as well as the additional code to display the full table, next time.
Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.
