Technologie XML: XML, DTD, CSS, XSL

Technologie XML: XML, DTD, CSS, XSL
October 18, 2006
Le but de ce premier TP est de faire connaissance avec la technologie XML
: fichier XML, DTD associée, feuilles de style CSS et XSLT. On va créer pour
cela une page Web simple contenant une liste de livres d’une bibliothèque. On
essaye de garder à l’esprit tout au long de ce TP la séparation du contenu de
l’affichage.
1
XML et DTD
Q1. Regardez le fichier liste.txt qui vous a été fourni. Proposez un balisage
pertinent et en accord avec les contraintes ci-dessous, afin de créer le fichier
liste.xml correspondant :
• un livre a deux attributs : un pour l’identifiant et l’autre pour caractériser
sa disponibilité.
• le prix a un attribut caractérisant la monnaie dans laquelle est exprimée
le prix.
Q2.
Créez le fichier liste.dtd contenant la grammaire de votre fichier xml.
Q3.
Complétez votre DTD en respectant les contraintes suivantes:
• l’identificateur de chaque livre est unique (et obligatoire).
• l’attribut de disponibilité ne peut prendre que 2 valeurs.
• un auteur est décrit par un nom et éventuellement des prénoms et une
nationalité.
• L’attribut monnaie de prix est obligatoire.
Q3. Vérifiez que votre document (liste.xml ) est valide par rapport à sa DTD
(liste.dtd ).
1
2
Affichage avec une feuille de style CSS
Q1.
Ajoutez une feuille de style simple à votre document.
Q2.
Complétez cette feuille de style pour arriver à un affichage respectant:
• Chaque livre est inclus dans dans un cadre plein, de couleur verte et est
affiché de couleur bleue.
• Sur la première ligne du cadre apparaît le titre du livre en gras, souligné
et de taille 20pt.
• Seonde ligne : le nom de l’auteur
• Troisième ligne : les prénoms de l’auteur en italique
• Ne pas faire apparaître sa nationalité
Q3. Modifiez votre feuille de style afin d’afficher en rouge les livres qui sont
empruntés.
3
3.1
Affichage avec une feuille de style XSL
Introduction au HTML et XSL
Q1: Ouvrez le fichier liste.html à l’aide de Mozilla. C’est le rendu html que l’on
désire obtenir du fichier liste.xml après transformation. Vous accédez au code
html de ce patron depuis le navigateur (’view->source’) ou avec votre éditeur
préféré.
Q2: Supprimez l’appel à la feuille de style CSS du fichier liste.xml. Ouvrez
le fichier liste.xml dans le navigateur. Modifiez ce fichier afin d’y attacher la
feuille de style liste.xsl fournie. Observez le résultat dans le navigateur.
Q3: Complétez le fichier liste.xsl afin d’avoir un affichage de tous les livres
semblable à celui proposé.
3.2
Q1:
Pour aller plus loin
Modifiez liste.xsl afin d’afficher le nombre de livre contenus dans la liste.
Q2: Modifiez liste.xsl pour convertir à l’affichage les prix en euros :
par exemple: 45 dollars devient 37.5 euros (taux de conversion de 1.2)
2
4
Ressources
a) http://www.w3.org
b) http://www.enseeiht.fr/lima/ia/page.html
c) http://www.w3schools.com
3