XML programming

More about XML, XSLT and CSS

Practice 6a: XML, XSLT and CSS: a listing of items

Take your earlier menu or curriculum XML file, and make a transformation (XSLT and a style sheet CSS) to display the content with a browser. Preferably add images and/ or sorting.

Practice 6b: Displaying XML with XSLT and CSS with images 

Create your individual XML application based on a teacher assigned task. The resulting application should include

Develop the layout using tables, images, etc. to make it look appealing.

Alternatives, confim with the teacher:

  1. news or messages updates or thumbs up updates from an interactive site
  2. animals in a pet shop
  3. airport departures and arrivals
  4. classrooms in a school building
  5. Youtube favorites
  6. a family tree (for people or i.e. race horses)
  7. train/ bus timetable, you might use the HSL API/ XML distribution
  8. fitness center classes and reservations
  9. concert listings
  10. result table for a sports event

Some help for your own transformations:

If you use both XSLT and CSS styles, you either include the CSS as an internal style to the resulting HTML or call an external style from the resulting HTML file in <head> section.

<link rel="stylesheet" type="text/css" href="external.css">

To attach a picture to the resulting HTML, refer to it in the xslt:

<img src="{@COVER}" />
and in the original XML you would use an attribute :
<CD NAME="Get Back" COVER="pict3.jpg">

The animals.xml in the example 3 would have a change:

<animal>
<name picture="penny.jpg">Penny</name>
        <species>cat</species>
</animal>

and the stylesheet needs to be modified like this:

<td><img src="{name/@picture}" /></td></tr>

A link looks in the XSLT:

<a href="{link-url}" target="_top">
  <xsl:value-of select="link-name" /> </a>

and in the XML file:

<link>
<link-name>info</link-name>
<link-url>http://www.w3c.org</link-url>
</link>

 

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Created by: Jaana Holvikivi
Updated:14.4.2015