Outer Court

Tech - MSIE5 - XML/XSL

XML (eXtensible Markup Language) and XSL (eXtensible Stylesheet Language) takes seperation of form and content a step further then HTML with CSS. XML is a W3C standard while XSL is yet in the making and not yet a standard. An XML page is like valid HTML with all tags closed, all attribute values enclosed in quotation marks, case-sensitive tags etc., so it's a lot more strict. Then some style-sheet language like XSL can output this page into HTML, even in a complete different order then the XML elements where written. I noticed that when you reload an XML/XSL page several times (like when you edit and change it), you have to restart the browser in order to see the page again.

Sample page

The following sample *.XML (take a look at how this XML page is displayed) contains structured information about some comics:

<?xml version='1.0' ?>
<?xml:stylesheet type="text/xsl" href="comic.xsl" ?>
<comics>
                                                                                               
<comic>
<company>Marvel</company>
<title>Spider-Man</title><subtitle>The Amazing</subtitle>
<issue>300</issue>
<pencils>Todd McFarlane</pencils>
<content>Special Issue with an appearance of Spawn</content>
<price>20</price>
<status>near-mint</status>
</comic>

<comic>
<company>Marvel</company>
<title>Punisher</title><subtitle>The</subtitle>
<issue>1</issue>
<pencils>John Romita, JR</pencils>
<content>The new Punisher</content>
<comment>Good story and artwork</comment>
<price>6</price>
<status>mint</status>
</comic>

</comics>

This page has two entries describing a comic. With HTML/CSS you'd probably write it like <div class="price">$20</div> etc. With XSL (to which the sample above links to in line 2) you can now process this page, and also add text like the dollar symbol.

<?xml version='1.0' ?>

<html xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<body style="background-color: #003; text-align: center; color: #fcc; font-family: sans-serif">
  <h1 style="font-size: 20px; text-align: center">List of Comics</h1>
  <xsl:for-each select="comics/comic">
    <div style="width: 300px; background-color: #336; border: 2px; border-color: #99c; border-style: solid; margin-bottom: 10px; padding: 6px">
    <span style="font-weight: bold"><xsl:value-of select="title"/></span>,
    <xsl:value-of select="subtitle"/>
    <div style="background-color: #fff; text-align:left; color: #000; margin: 3px; padding: 6px; font-size: 14px">
    <p style="font-style: italic">
    Published by <xsl:value-of select="company"/><br/>
    Pencilled by <xsl:value-of select="pencils"/><br/>
    Current price $<xsl:value-of select="price"/>
    </p>
    <p><xsl:value-of select="content"/></p>
    </div>
    </div>
  </xsl:for-each>
</body>
</html>

This XSL goes through all the "comic" elements and assigns styles to them, or adds text before and after. You could even put this information in a table.

Continue with: CSS.

 
Basic
Goodies
Design
Tech
Email
Make a donation