Moderate

This example expands the modest example towards a more realistic Web page employing Cascading Style Sheets (CSS) and navigation. The XML file stays basically the same, but with more content added to it. Most of the changes occur in the XSL file to produce a more sophisticated set of HTML pages. Again, this example will help as a starting point; it's not an in-depth tutorial on XML/XSL. Please refer to the Tips section of this Web site for links to more comprehensive tutorials.

>> Download zipped files of examples used on this page


Part 1. XML Document with Content for Multiple HTML Pages

The XML sample shown below adheres to the DocBook standard. Notice how the elements (<book>, <chapter>, <title>, <para>) describe the structure the content. This XML file contains text that would typically be displayed in an "About Us" section of a Web site. In this XML file, those sections are broken down into DocBook "chapter" elements (Mission, At a Glance, Partners, Directions).

				
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="moderate_xml.xsl"?>
<book label="CTG">
 <title>About Us</title>
<!-- **************** MISSION ******************************************-->
  <chapter label="mission">
   <title>Mission</title>
   <para>
     The <emphasis>Center for</emphasis> Technology in Government works with government to develop 
      information strategies that foster innovation and enhance the quality and coordination of public 
     services.
    </para>
    <para>
     We carry out this mission through applied research and partnership projects that address the 
     policy, management, and technology dimensions of information use in the public sector.
    </para>
    <para>
     The results generated by each project add to a growing knowledge base designed to 
      support the work of both government professionals and academic researchers. Our guides, reports, 
      and tools are freely available on our <ulink url="/publications">Publications</ulink> page.
   </para>
  </chapter>
<!-- **************** AT-A-GLANCE ******************************************-->
 <chapter label="glance">
	<title>At-A-Glance</title>
	<para>
     The Center for Technology in Government (CTG) is an applied research center devoted 
	  to improving government and public services through policy, management, and 
	  technology innovation.
	 </para>
	 <para>
	  Through its program of partnership, research, and innovation, the Center provides 
	  government organizations and individuals with an array of tools and resources designed to 
	  support the development of a digital government. 
	 </para>
 </chapter>
<!-- **************** PARTNERS ******************************************-->
 <chapter label="partners">
	<title>Partners</title>
	<para>
	 CTG projects depend on active and ongoing partnerships with government agencies, technology 
	 companies, and academic scholars. Each sector makes a unique and critical contribution and 
	 each gains distinct benefits from participation in the Center and its research program.
	</para>
	<para>
	 Our government partnerships</ulink> are laboratories for learning, experimentation, and 
	 problem-solving. Each project is supported by the involvement of experienced public managers 
	 working cooperatively on projects of concern to government organizations around the country. 
	</para>
 </chapter>
<!-- **************** DIRECTIONS ******************************************-->
 <chapter label="directions">
	 <title>Directions</title>
	<para>
	 Located in Albany, the Center for Technology in Government is within minutes of the New York 
	 State Capitol, the State Legislature, and state agency headquarters.
	</para>
	<para>
     We are centrally-located in the Northeast: 150 miles from New York City, 165 miles from Boston, 
     and 242 miles from Montreal, Canada. Our offices are located near the intersection of the New 
     York State Thruway, the Adirondack Northway, and Interstate 90. We are within five miles of an 
     AMTRAK rail station and the Albany International Airport, which is served by several 
     major airlines. 
	</para>
 </chapter>
</book>

			

As in the modest example, this XML file contains the normal XML declarations in the top lines, followed by the root and nested elements according to the DocBook standard. Notice especially how each chapter element contains a "label" attribute (mission, glance, partners, directions). This label attribute will be used by the XSL file to select a specific chapter within the XML file and display each chapter as an individual Web page.


Part 2. An XSL File to Transform the XML

Using XSL as in the example below enables selection and display of specific parts of the entire XML file in different ways. This XSL file will select chapter titles to create a navigation menu and then display the entire contents of one chapter per Web page.


 <?xml version="1.0" encoding="UTF-8"?>      
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Declare parameters that identifies which chapter to select from xml file -->
<xsl:param name="sub">mission</xsl:param>
<!-- Main Template: 
  Match moderate_xml.xml file document root node,  called "book" into html page tags -->
  <xsl:template match="book">
<!-- Print DOCTYPE declaration at top of HTML document  -->
<xsl:text disable-output-escaping="yes">
	<![CDATA[
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  ]]>
</xsl:text>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<!-- Set the Browser title, get exernal css stylesheet  --> 
 <head> 
  <title><xsl:value-of select="@label"/>: <xsl:value-of select="$sub"/></title>
   <style type="text/css">
   <xsl:comment>
    h1 { color: #000000; font-weight: bold; font-size: 1em;
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;  text-transform: none; }
    p {color: #000; font-size: .85em; font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
    h1.menu { color: #800000; font-weight: bold; font-size: .9em;
       font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;  text-transform: none; }
    #left_themes  {position: absolute;width: 125px;	top: 20px;left: 15px;padding-right: 10px;
        margin: 0px;background-image: url(../img/common/dotted.gif);
        background-repeat: repeat-y;	background-position: top right;}
    div.main {position: absolute;width: 480px;top: 20px;left: 160px;padding-left: 15px;
        padding-right: 5px;	padding-top: 0px;padding-bottom: 5px;	margin: 0px;}
    .lftmenu { color: #354283; font-weight: normal; font-size: .75em;
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
    .lftmenublack { color: #000000; font-weight: normal; font-size: .75em;
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
   </xsl:comment>
   </style>
 </head>
<!-- Create the Main Body of the HTML page  -->
 <body>
<!-- Create left navigation bar from chapter titles in moderate_xml.xml file
  using cascading style sheet and xsl -->
 <div id="left_themes">
  <h1 class="menu">
   <xsl:value-of select="title"/>
  </h1>
  <!-- xsl:for-each reads through each chapter in xml file and selects the title for a menu item-->
   <xsl:for-each select="chapter">
    <xsl:variable name="label"><xsl:value-of select="@label"/></xsl:variable>
  <!-- compares chapter label attribute to sub parameter to determine if link should be inserted -->
    <xsl:choose>
     <xsl:when test="@label=$sub">
      <span class="lftmenublack">
       <xsl:value-of select="title"/>
      </span>
     </xsl:when>
     <xsl:otherwise>
      <span class="lftmenublack">
       <a href="about?sub={$label}">
        <xsl:value-of select="title"/>
       </a>
      </span>
     </xsl:otherwise>
    </xsl:choose>
    <br /><br />
   </xsl:for-each>
 </div>
<!-- START Main Content Section -->
 <div class="main">
 <!-- Selects only chapter that matches the sub parameters, in this case "mission" -->
  <xsl:for-each select="chapter[@label=$sub]">
    <h1><xsl:apply-templates select="title"/></h1>
     <xsl:for-each select="para">
      <p><xsl:apply-templates select="."/></p>
     </xsl:for-each>
   </xsl:for-each>
 </div>
<!-- END Main Content Section -->
 </body>
</html>
</xsl:template>
<!-- END Main Template -->

<xsl:template match="title">
 <xsl:value-of select="."/>
</xsl:template>

<xsl:template match="para">
 <xsl:apply-templates/>
</xsl:template>

<xsl:template match="emphasis">
 <strong>
   <xsl:apply-templates/>
 </strong>
</xsl:template>

<xsl:template match="ulink">
 <xsl:variable name="ref">
  <xsl:value-of select="@url"/>
 </xsl:variable>
 <a href="{$ref}" accesskey="" tabindex="0"><xsl:apply-templates/></a>
</xsl:template>

<xsl:template match="strong|br">
 <xsl:copy>
  <xsl:apply-templates/>
 </xsl:copy>
</xsl:template>	

</xsl:stylesheet>


			

This XSL file is a bit more complicated than the previous modest example. First of all, it incorporates an embedded CSS stylesheet that, among other uses, splits the Web page into a left navigation menu and a main body section. The navigation menu is built using the "for-each" in XSL to select every chapter title in the XML file and list it in the menu. The main body text selects a specific chapter based on its "label" attribute. (Note that in this case, the chapter label is hardcoded as "mission" for simplicity's sake; but in a more realistic setting, the label attribute would probably be passed as a parameter in the URL query string to make a more dynamic match.) Thus, a few relatively simple XSL elements can create a navigation scheme and multiple, linked Web pages from a single XML file.


Step 3. The Resulting HTML

As shown in the example below, the XML/XSL combination above produces an HTML file. The big difference here is that it produces the standard navigation and as many HTML pages as there are chapters in the XML file from just one XML and one XSL file. Multiple HTML files are not created and saved to the Web server, nor is there a need to maintain multiple HTML files. XML/XSL creates the HTML for the Web site. This sample has only 4 chapters in the XML file, but it could have 100 chapters or more. Regardless of whether the XML/XSL produces 4 or 100 HTML pages, only those 2 XML and XSL files will need to be maintained.

				
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>CTG: mission</title>
<style type="text/css">
<!--
    h1 { color: #000000; font-weight: bold; font-size: 1em; 
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;  text-transform: none; } 
    p {color: #000; font-size: .85em; font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
    h1.menu { color: #800000; font-weight: bold; font-size: .9em; 
       font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;  text-transform: none; }
    #left_themes  {position: absolute;width: 125px;	top: 20px;left: 15px;padding-right: 10px;
        margin: 0px;background-image: url(../img/common/dotted.gif);
        background-repeat: repeat-y;	background-position: top right;}
    div.main {position: absolute;width: 480px;top: 20px;left: 160px;padding-left: 15px;	
        padding-right: 5px;	padding-top: 0px;padding-bottom: 5px;	margin: 0px;}
    .lftmenu { color: #354283; font-weight: normal; font-size: .75em; 
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
    .lftmenublack { color: #000000; font-weight: normal; font-size: .75em; 
        font-family: Arial, Helvetica, Geneva, Swiss, sans-serif; }
   -->
   </style>
   </head>
   <body>
   <div id="left_themes">
   <h1 class="menu">About Us</h1>
   <span class="lftmenublack">Mission</span>
   <br/><br/>
   <span class="lftmenublack"><a href="about?sub=glance">At-A-Glance</a></span>
   <br/><br/>
   <span class="lftmenublack"><a href="about?sub=partners">Partners</a></span>
   <br/><br/>
   <span class="lftmenublack"><a href="about?sub=directions">Directions</a></span>
   <br/><br/>
   </div>
   <div class="main">
   <h1>Mission</h1>
   <p>
     The <strong>Center for</strong> Technology in Government works with government to develop 
      information strategies that foster innovation and enhance the quality and coordination of public 
     services.
    </p>
    <p>
     We carry out this mission through applied research and partnership projects that address the 
     policy, management, and technology dimensions of information use in the public sector.
    </p>
    <p>
     The results generated by each project add to a growing knowledge base designed to 
      support the work of both government professionals and academic researchers. Our guides, reports, 
      and tools are freely available on our 
      <a href="/publications" accesskey="" tabindex="0">Publications</a> page.
   </p>
 </div>
 </body>
</html>
		
			

A Sample Moderate Web Page

The moderate Web page formatted and processed by the XML/XSL files above would appear like the sample shown below.

Moderate HTML Web Page created by XML/XSL