XSLT tutorial
How to create static HTML website with navigation using XSLT

The following text shows how to create the simple multi page website with navigation using XSLT. The resulting website is shown in the following figure:

Contents
Intro
Page two
Page three
Intro
Text text text text text text text
text text text text text

Dynamic or static website?

When creating a static website using plain HTML, it is necessary to repeat common elements in every single HTML file like like navigation, header, etc. In order to enable highlighting of the active page in navigation, it means not only copying but also manual editing. Changing the name of a single page means to change the contents in all HTML files.

The typical solution of this problem is to use a dynamic website (PHP, ASP, ...), where the contents is loaded from database and dynamically displayed including the navigation by a program. To change the contents of the web in the database one must use administrative pages. This is rather complex infrastructure for a simple website and future changes in the web design often requires its modification.

XSLT generating website

For effective creation and administration of smaller website it is suitable to use the XSLT technology.

For XSLT, the bare contents of the website and the structured information as the labels and resulting HTML files are stored in a XML file in a suitable form. The resulting HTML files are generated including required layout by a XSLT file, that interprets structure of our XML file and creates also the navigation for every HTML page. The bare contents can be edited by any text editor in the XML file and the layout properties independently in the XSLT file. The XSLT file is usually much simpler than equivalent dynamic website such as PHP and the XML file replaces needs of database.

Translation of the pair XML and XSLT files into the set of resulting HTML files is done by a XSLT processor such as the Saxon. The created HTML files can be then uploaded to the web server and our website is complete.

Example

XML file web.xml

<site>
        <page file="index.htm" title="Intro">
                Here is the introduction <b>text</b> text text text text text text text text text text text text text text text text
        </page>
        <page file="second.htm" title="Second page">
                Here is a second text text text text text text text text text text text text text text text text text
        </page>
        <page file="third.htm" title="Third page">
                Here is a third text text text text text text text text text text text text text text text text text
        </page>
</site>
        
        

XSLT file web.xslt

<?xml version="1.0" encoding="UTF-8"?>
<!-- XSLT header and selection output in the form of HTML etc. -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0" xmlns:saxon="http://saxon.sf.net/" exclude-result-prefixes="saxon">
  <xsl:output method="html" version="4.01" encoding="UTF-8" indent="yes" doctype-public="-//W3C//DTD HTML 4.01//EN" 
    doctype-system="http://www.w3.org/TR/html4/strict.dtd" saxon:character-representation="native;entity;decimal" />

  <!-- XSLT will operate on elements <page> of source XML -->
    <xsl:template match="page"> 
      <!-- For debugging purposes, the name of the actual processed page is dispplayed -->
      <xsl:message>Processing: <xsl:value-of select="@file"/></xsl:message>
      <!-- Set the output document according to the attribute file, the referred xpath expression is in curly braces -->
      <xsl:result-document href="{@file}">
        <!-- The usual html follows with xsl elements for inserting contents from the source XSML file -->
        <html>
          <head>
            <title>
              <!-- The title of the page is inserted by the xsl element <value-of> with the attribute select containing appropriate xpath expression -->
                <xsl:value-of select="@title"/>
              </title>
            </head>
            <body>
              <div style="float:left; margin-right:5ex">
                Table of contents
                <ul>
                  <!-- The whole XML file will be processed independently in the mode "tableofcontents" -->
                  <xsl:apply-templates select="/" mode="tableofcontents">
                    <!-- in order to highlight the actual page, its name is given as a parameter -->
                    <xsl:with-param name="actpage">
                      <xsl:value-of select="@file"/>
                    </xsl:with-param>
                  </xsl:apply-templates>

                </ul>
              </div>
              <h1>
                <xsl:value-of select="@title"/>
              </h1>
              <!-- the body of the actual <page> element is inserted by a function node() -->
                <xsl:copy-of select="node()"/>
              </body>
            </html>
          </xsl:result-document>
        </xsl:template>

        <!-- this template is active only in the toc mode -->
        <xsl:template match="page" mode="tableofcontents">
          <!-- declare the accepted parameter -->
          <xsl:param name="actpage"/>
          <li>
            <!-- distinguish the active and inactive page according to the parameter -->
            <xsl:choose>
              <xsl:when test="@file=$actpage">
                <b>
                  <xsl:value-of select="@title"/>
                </b>
              </xsl:when>
              <xsl:otherwise>
                <a href="{@file}">
                  <xsl:value-of select="@title"/>
                </a>
              </xsl:otherwise>
            </xsl:choose>
          </li>
        </xsl:template>

      </xsl:stylesheet>


Compilation

First, download a compilation tool for XSLT. A suitable one is Saxon. Saxon requires installed Java. Run compilation from command line by entering
java -jar saxon9.jar web.xml web.xsl

After the compilation, the files index.htm, second.htm, third.htm are created. Each od the file contains the navigation and the files are mutually linked. You can see the resulting website here. The source files can be downloaded web.xml and web.xsl.

Conclusion

This article presented a possibility of simple generation of static HTML website. This possibility is suitable for many small to medium sized websites. It does not require any dynamic web programming nor database. The database is substituted by a XML file and the program by the XSLT file. The XSLT gives you great flexibility in the layout modifications and design of the website.

 

Discussion
Empty discussion Add note