5. Selecting text

This tutorial will explain how the file collection.xml can be transformed into an HTML document. In the previous section, we saw that we can initiate this transformation by adding a <template> element to the stylesheet (directly underneath the <stylesheet> root element, with a match attribute which references the root element of the XML source document (i.e. the XML file that we want to transform).

In this very first template, we can begin to construct the new file. As the XML file needs to transformed into an HTML file, we can already put up the HTML structure, as follows.

<?xml version="1.0" encoding="UTF-8"?>

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

    <xsl:template match="collection">


        <html>
            <head>
      <title>XSLT transformation</title>
            </head>

            <body>

            </body>
        </html>
      

    </xsl:template>

    </xsl:stylesheet>
    
As a next step, we are going to select some text from the XML source tree and copy and paste it into the HTML file.

The easiest way to select data from an XML document is by making use of the <xsl:value-of> element. This element needs to be used with a select attribute which refers to the element that contains the text we want to display. In the result tree, the entire <xsl:value-of> element will be replaced with the contents of the element that is mentioned in the select attribute.

If we want to display the <title> from <head> in an HTML <h2>, for example, the following stylesheet can be used:

<?xml version="1.0" encoding="UTF-8"?>

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

    <xsl:template match="collection">

        <html>
            <head>
	    <title>XSLT transformation</title>
            </head>

            <body>
            <h2>
            
            <xsl:value-of select="head/title"/>
          
            </h2>
            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>

The XSLT processor will perform the instructions between the opening and closing <template> tags if, in the source tree (i.e. collection.xml), an element is found with the name <collection>. If a match can indeed be established, a number of HTML codes are created first: the <html> root element, <head> and <body> among other elements.

The contents of the <title> element under <head> will be inserted into the HTML page that has just been made, at the location of the <xsl:value-of>-element.

When the XSLT processor finds a "match" between the XML source tree and an XSLT template, this establishes a certain context. This means that the attention of the XSLT processor is focused on a particular location in the source tree, namely on the element that is mentioned in the match attribute, together with its direct children. In such a given context, these are the only elements the XSLT parser can 'see'.

In the example above, the 'context' focuses on the element named <collection>, the element that is mentioned as value of the match attribute, and on <head> and on <body>

In the stylesheet that was discussed, <title> is NOT a direct child of <collection>. If we need to refer of elements that are not in the immediate context, we need to tell the XSLT parser where this element can be found in the tree by providing the path to this element. Different levels in the XML document are separated using the forward slash (“/").This is in fact a rule from the XPath language, which will be discussed in more detail in a later section of this tutorial. XPath, in short, is a technique which enables us to refer to specific locations in XML documents. The paths that are given must depart from the element that is mentioned in the match attribute.

In the tree diagram representing collection.xml, we can see that, if we want to jump from <collection> to <title>, we need to go via <head>. The path that is mentioned in <xsl:value-of> is thus head/title. <collection> itself does not need to be mentioned, as this element is already mentioned in the match attribute.

Transorming collection.xml on the basis of the stylesheet above would result in the following HTML code:

<html>

    <head>XSLT Transformation</head>

    <body>
    <h2>Letter Collection of the University of Leiden </h2>
    </body>

</html>

Make exercise 4