CIS 97YT Index > Assignment 5

Assignment 5
Converting XML to XHTML

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

The XML File

The XML file you should use is a very slightly modified version of the XML file from assignment 3. 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

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

color name
sku

color name
sku

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

Notes

  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">
    <br/>
    </td>

    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. If an item has a manufacturer, show it. If an item's price has units, show them.

  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.

    <!-- set up the name space for HTML in the root element -->
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    	version="1.0"
    	xmlns:h="http://www.w3.org/1999/xhtml">
    
    <!-- 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()}">
    		<xsl:apply-templates/>
    	</xsl:element>
    </xsl:template>
    
  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.