CIT041X Index > Assignment 6

Assignment 6
Converting XML to XHTML

The object of this assignment is to write an XSLT stylesheet that will transform the catalog from assignment 2 to an XHTML file.

The XML file you should use is a modified version of the XML file from assignment 2. Here it is.

The Style Sheet - Requirements

Your final layout should look like the following. Text that is underlined should be replaced by data from the XML file.

company name Catalog

department name

item name
$price units
<summary> or <description>

color name

color name

item name
<summary> or <description> SKU: sku


  1. Please put this line right after your <xsl:stylesheet> starting tag:

    <xsl:output method="html" indent="yes"/>

    It will ensure that you generate HTML instead of XML, and will put output elements on new lines so that you can read your output file more easily if you need to look at it.

  2. You should create one table for each <department> in the catalog.

  3. If an item has a <color> or <color-list>, you should display color swatches as shown in the right column of the first row of the table. Don't use styles to create the color swatches; it makes the problem far more difficult. Instead, use a nested table with a cell that looks like this (for an item that is pastel yellow with a hex value of #ffffcc):

    <td bgcolor="#ffffcc" width="30">

    Notice that you must put a border around the color swatch if the hex value is #ffffff, since white on white is invisible. You will need a style to do this.

  4. If an item has no <color> nor <color-list> element, then show the <sku> in the right column of the table.

  5. The first cell in the second row of the table shows the output for an item without a listed manufacturer but with a units attribute on the price.

  6. The center cell shows the long <description> of an item if it exists. If an item has no <description>, then show the required <summary> instead.

  7. You want to take the embedded XHTML in summaries and descriptions, which has a namespace prefix, and transfer it to the output document. Here's the code for that template; just take it as it is—it works great. I will be glad to explain why it works in class.

    <!-- set up the name space for HTML in the root element -->
    <xsl:stylesheet xmlns:xsl=""
    <!-- rest of your stylesheet goes here -->
    <!-- this transfers the HTML without the prefix -->
    <xsl:template match="h:ul|h:li|h:p|h:em|h:strong">
    	<xsl:element name="{local-name()}">
  8. You may use stylesheets or the XHTML <big> and <small> elements to change the size of the items in the table. You may also use heading elements such as <h1>, <h2>, <h3>, etc. If you use headings, you may have to use styles to adjust the spacing.

  9. The <title> element of your output document must be: <title>company name Catalog</title>

  10. The main heading and the department headings must use heading elements such as <h1>, <h2>, <h3>, etc. That's because they aren't just large text; they're truly headings.

  11. Feel free to adjust the font family and font sizes to produce output that is visually pleasing to you.

See what a correct solution might look like.