Beginning XHTML | 19 | WebReference

Beginning XHTML | 19

To page 1To page 2To page 3current page

Beginning XHTML

How It Works

In Step 1, we specified an XSL style sheet. The first couple of lines are standard boilerplate:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="">

They specify the version of XML and the namespace for the XSL style sheet.

The next line is more important:

<xsl:template match="/">

This "/" string indicates that the following template should be applied to the root node of the XML document, i.e. to all of it.

The next dozen or so lines (beginning with <html> and ending with </html>) define the XHTML template. Within this template are some XSL instructions for extracting data from the XML document. Look at the <title> element:

<title>Film Library:<xsl:value-of select="filmlibrary/name"/></title>

The <xsl:value-of> element says that we want to use the element content for the element that matches the value of the select attribute. In this case, we are going to use the value of the <name> element that is a child of the <filmlibrary> element.


<title>Film Library:<xsl:value-of select="filmlibrary/name"/></title>

gets transformed into:

<title>Film Library:Classic Films</title>

because 'Classic Films' is the content of then <name> tag contained within the <filmlibrary> tag in the XML file:

 <name>Classic Films</name>

That is, <xsl:value-of select="filmlibrary/name"/> is replaced with Classic Films because 'Classic Films' is the value of the "filmlibrary/name" selection used in the <xsl:value-of> element. (One may think of it almost as a programmed find-and-replace technique.)

The next occurrence of an XSL element is in the <table> element:

<xsl:for-each select="filmlibrary/movie">

The <xsl:for-each> element instructs the browser that we want to repeat the following template for each occurrence of the element which matches the value of the select attribute. In this case, we are going to repeat the template for each <movie> element that is a child of the <filmlibrary> element.

Within this for-each loop are a set of <xsl:value-of> elements which put the value of the <title>, <director>, <year>, and <genre> elements into the table:

<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="credits/director"/></td>
<td><xsl:value-of select="year"/></td>
<td><xsl:value-of select="genre"/></td>

So even though we have two <movie> elements within our XML file, we only need the one <xsl:for-each> block in our XSL file to perform the same operation on both the <movie> elements. Obviously, we could have as many <movie> elements as we wanted in our file and we would still need only one <xsl:for-each> element to process all of them.

In Step 2, we authored the XML document. Like the XML style sheet, the first line indicates the version of XML that we are using:

<?xml version="1.0"?>

The second line associates the style sheet with our XML document:

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

The rest of the document contains the content that gets transformed by the XSL style sheet.

In Step 5, we create a second XSL style sheet. Looking at the first couple of lines in this style sheet:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="">
 <xsl:template match="/">

we see the same XML version and XSL style sheet namespace identifiers, as well as the <xsl:template> element, as in the previous sheet.

Where this style sheet departs from the previous one is that rather than formatting the XML document as a table, we format it using headers and paragraphs.

Looking at the <body> element, we wrote:

 <xsl:for-each select="filmlibrary/movie">

This means that the element content of the <body> element will be based on each occurrence of the <movie> element in our XML document.

The <h1> element is defined by the following lines of XML:

<h1 style="text-align: center">
<xsl:value-of select="title"/>

The <xsl:value-of> element means that the <h1> element will contain the content of the <title> element. Similarly, the <h2> element will contain the content of the <year> and <director> elements:

<h2 style="text-align: center">
<xsl:value-of select="year"/> <xsl:value-of select="credits/director"/>

and the <p> element will contain the content of the <genre> and <plot> elements:

<xsl:value-of select="genre"/>.<xsl:value-of select="plot"/>

In Step 7, we associate the style sheet with the XML document:

<?xml-stylesheet type='text/xsl' href='movie2.xsl'?>

When we load the XML document into Microsoft Internet Explorer, the document is then transformed using the associated style sheet.


In this chapter, we learned a little about media types:

We also learned about three types of problems affecting our ability to target different devices:

Finally, we introduced some strategies for overcoming these constraints. We can author different versions of our content for different devices, use tools that adapt content to different devices, or generate content based on the type of device.

To page 1To page 2To page 3current page

Created: May 04, 2001
Revised: May 04, 2001