XML - ohjelmoinnin perusteet

XSLT, CSS ja XML - jatkoa

Harjoitus 10a: XML:n ja CSS:n yhdistäminen XSLT:hen

Ensimmäisissä harjoituksessa suunnittelit puhelinluettelon ja ravintolan ruokalistan. Laadi jommalle kummalle tyylitiedostot (XSL muunnos ja CSS), jonka avulla se voidaan tulostaa selaimen näytölle.

Harjoitus 10b  Oma sovellus ("projekti")

Kokeile XSL-muunnoksen soveltamista johonkin uuteen ongelmaan. Yhdistä tulostuksessa CSS-muotoiluun, jos se tuntuu tarpeelliselta. Sovelluksessa on oltava mukana ainakin XML, DTD (tai skeema) ja XSL. Mahdollisia aiheita ovat

• aikataulu junille, lentokoneille, tms.
• sukupuu: joko ihmissuvulle tai esim. ravihevoselle
• urheilukilpailun tulosluettelo
• sääennuste, taulukko, jossa esim. vaihtoehtoisesti kolmen, viiden ja yhdeksän päivän ennuste
• luettelo ostoskeskuksen kaupoista (vaikkapa Sellon)
• kaupan tai kioskin tuoteluettelo

Avuksi harjoituksiin:

Jos käytät sekä XSL- että CSS-tyylejä, voit sisällyttää css-määrittelyt sisäisenä tyylinä XSL-tulokseen tai kutsua tulos-HTML:n HEAD-osiossa erillistä CSS-tiedostoa
<link rel=stylesheet type="text/css" href="erillinen.css">

Jos haluat liittää kuvan tulostuksena olevaan HTML:ään, voit esim. käyttää xsl-tiedostossa viittausta:
<img src="{@KANSIKUVA}" />
ja alkuperäisessä XML-tiedostossa attribuuttia :
<LEVY NIMI="Get Back" KANSIKUVA="levy3.jpg">

vastaavasti linkin voit ilmaista:
<a href="{link-url}" target="_top">
  <xsl:value-of select="link-name" /> </a>
ja dokumentissa:
<link>
<link-name>opastusta</link-name>
<link-url>http://www.w3c.org</link-url>
</link>

Päivittänyt: Jaana Holvikivi Muutettu 2.2.2011