Académique Documents
Professionnel Documents
Culture Documents
1 - Quelques définitions
2 - Balises, éléments, entités
3 - Définition de Type de Document (DTD)
4 - Espace de noms, HTML dans XML, XML dans HTML
5 - Mise en page : CSS
6 - Mise en page : XSL
7 - Chemins et liens XML : XPath, XPointer, XLink
8 - XML et bases de données
Bibliographie
Gérard-Michel Cochard
cochard@u-picardie.fr
Introduction à XML
date de dernière mise à jour : 19 octobre 2002
Quelques définitions
SGML
SGML (Standard Generalized Markup Language) est un métalangage dont l'objectif est la description de
langages utilisant des balises (par exemple HTML est un langage Markup). SGML a été inventé pour afficher
un document quelle que soit la plate-forme de lecture. SGML prévoit qu'un document possède une structure
définie par un fichier spécifique appelé DTD (Définition de Type de Document ou Document Type
Definition). Dans un langage décrit par SGML, il faut donc produire
HTML
HTML, inventé par Tim Berners Lee, est basé sur une DTD particulière, comprise par les navigateurs et
qu'il n'est pas besoin de transmettre. HTLM est un langage de présentation de document multimédia ayant
une double fonctionnalité :
HTML utilise un certain nombre de balises prédéfinies, bien connues des développeurs sur Internet.
XML
XML (Extensible Markup Language) est une
simplification de SGML. C'est donc toujours un
métalangage et il peut décrire HTML par exemple. Son
objectif essentiel, comme celui de SGML, est la
description de la structure d'un document.
Un document XML est un document créé avec les spécifications de XML. Il possède des balises qui sont
décrites dans une DTD. Il n'y a donc plus, comme dans HTML, des balises prédéfinies : XML créé des
balises à volonté.
La mise en page n'est( pas du ressort de XML ; elle est définie par des fichiers annexes : CSS ou XSL.
Document valide
Il s'agit d'un document utilisant des balises définies dans une DTD.
Il s'agit d'un document HTML compatible avec XML, c'est à dire respectant un certain nombre de règles
dont les principales sont :
● l'imbrication des balises : le début et la fin d'une balise ne peut être que dans une zone limitée par
le début et la fin d'une autre balise.
En règle générale, depuis quelque temps, toutes les balises de XML doivent être formulées en
minuscules.
● Les noms de balise peuvent contenir des lettres, des chiffres, des "soulignés", des ":". Comme on le
verra plus loin, le ":" est utilisé dans le cas des espaces de noms. Les noms de balise ne peuvent
commencer par xml, XML. Le nom d'une balise ne peut commencer par un chiffre.
Les balises qui n'ont pas de "fin" doivent être terminées par un "/". Ainsi la balise de HTML
qui définit l'affichage d'une image doit être formulée comme suit :
● Le balises peuvent comporter des attributs (c'est à dire des propriétés). Un attribut est défini sou
la forme xyz = "tratala" ; tous les attributs doivent être définis entre guillemets (comme
"tralala")..Ils doivent obéir aux règles concernant les noms de balise.
A noter qu'un document bien formé peut ne pas être valide s'il n'y a pas de DTD associée.
XHTML
Ce sigle désigne du HTML respectant les règles relatives à un document bien formé.
Tests
1) Où sont les erreurs dans le code XML suivant :
<liste>
<machin>Car</mahin>
<machin>Plane</MACHIN>
<machin>Train</machin>
</liste>
<blabla>
<gras><italique>XML </gras> </italique>
</blabla>
<description>
Il y a <couleur>des <couleur> pommes <couleur>à </couleur> manger.
</description>
<NomsErronés>
<xmlchose/>
<XMLchose/>
<XmLchose/>
<xMlchose/>
<xmLchose/>
</NomsErronés>
<erreurs>
<mauvais_caractère tra*lala = "123456"/>
<mauvais_separateur value = "54'/>
<mauvais_separateur_type value="zozo"tagada"/>
<mauvais_separateur_type value='bibi'fricotin'/>
<mauvais_début XML-numéro = "xmlchéri"/>
</erreurs>
solution 1)
solution 2)
solution 3)
solution 4)
Les signes suivants ne sont pas admis dans les noms de balise : ; @ # $ % ^ ( ) % + ? = *
Un nom de balise ne peut commencer par un chiffre.
solution 5)
les balises commencent par les letres de XML (en minuscules ou en majuscules).
solution 6)
Ce fichier constitué avec n'importe quel éditeur de texte est enregistré sous le nom de salutations.xml. La première ligne (prologue) indique
qu'il s'agit d'un document XML dont la version est 1.0 et dont le jeu de caractères est Latin 1.
Japonais EUC-JP
<document> est la première balise rencontrée. Elle correspond à l'élément "racine". Un document XML a toujours un élément racine et un seul.
Les autres balises, utilisées dans le document, sont <questions> et <reponse>.
Si on affiche ce fichier (auquel, pour l'instant, on n'a pas affecté de DTD) dans un navigateur, on obtiendra des résultats très différents :
● avec Netscape 6, on obtient bien ce qu'on attend (la mise en page n'étant pas notre préoccupation pour l'instant) :
● avec Internet Explorer 5 ou 6, on obtient une présentation structurée :
Nous voyons donc que IE5 et IE6 permettent de visualiser la structure d'un document XML.
Imaginons maintenant un document incorrect comme le suivant (pourquoi n'est-il pas bien formé ?) :
● simples :
<tagada>tsoinstsoin</tagada>
● composés :
● vides :
<tagada></tagada> ou <tagada/>
D'un certain point de vue, on peut considérer que XML est une description d'arbre. Le code suivant
<coordonnees>
<adresse>
<rue>Jules Verne</rue>
<numero>200</numero>
<code_postal>80000<code_postal>
<ville>Amiens</ville>
</adresse>
<telephone>03 22 80 81 39</telephone>
<email>dep@u-picardie.fr</email>
</coordonnees>
Les balises qui délimitent les éléments obéissent à des règles d'écriture quant à leur nom :
● les noms de balises ne doivent contenir que des chiffres, des lettres, des signes particuliers (il faut éviter les signes ":", ">", "<",
""","'","-")
● les noms de balise balises doivent commencer par une lettre, le signe "_", ou le signe ":" à l'exclusion de tout autre signe.
● les noms de balise ne doivent pas comporter d'espace
● les noms de balise ne peuvent commencer par les lettres xml (mot réservé).
<nabuchodonosor >
<joseph dupont>
<1erprix>
<joseph_dupont>
Comme en HTML, il est possible d'ajouter des commentaires dans un code XML (la syntaxe est la même que pour HTML) :
Les entités sont des variables qui représentent des chaînes de caractères (ce qu'on trouve généralement entre une paire de balises). Elles se
représentent par un nom précédé du signe "&". Par exemple &rage est une entité qui référence la chaîne de caractères : "O rage, O désespoir,
O vieillesse ennemie, N'ai-je donc tant vécu que pour cette infamie et ne suis-je blanchi dans les travaux guerriers que pour voir en un jour
flétrir tant de lauriers"
Ainsi
<don_diegue>&rage</don_diegue>
remplace avantageusement
<don_diegue>O rage, O désespoir, O vieillesse ennemie, N'ai-je donc tant vécu que pour cette infamie et ne
suis-je blanchi dans les travaux guerriers que pour voir en un jour flétrir tant de lauriers</don_diegue>
Nous verrons que les entités se définissent dans les DTD (Document Type Definition).
il peut arriver que l'on veuille insérer dans du code XML des signes "interdits". On peut alors signaler à l'analyseur XML d'ignorer certains
passges du code avec une section CDATA :
permet d'afficher "huit > trois". Sans section CDATA, le signe ">" aurait provoqué une erreur car aurait été analysé comme une fermeture de
balise.
Les attributs complètent les balises en apportant des informations complémentaires ou indispensables. Dans HTML, les attributs étaient déjà
connus ; exemples : src, href,...
<img src="photo.gif">
<a href="http://www.ici.fr">
Tests
1) Utilisez le parser (analyseur) de Microsoft pour valide le fichier XML suivant (vous pouvez coller le vôtre !)
Laurel
<a>Hardy</a>
Rappel
N'oublie pas la partie de pêche de dimanche !
Validate
<?xml version="1.0"?>
<commerce>
<boutique>
<quantité>
100
</quantité>
<boss>
Mike Hammer
</boss>
</boutique>
<produit>
<nom>
tomates
</nom>
<montant>
50
</montant>
</produit>
</commerce>
3) On souhaite utiliser XML pour enregistrer des recettes de cuisine. Proposez une solution en se basant sur un exemple de recette :
Gratin de navets aux herbes de Provence
Pour 4 personnes
préparation : 25 min
Cuisson : 25 min
1- Epluchez les navets et coupez les en rondelles d'environ 1 cm d'épaisseur. Faites les cuire à la vapeur
pendant environ 15 min. Râpez le fromage.
2 - Faites fondre le beurre dans une casserole, ajoutez la farine et laissez cuire 2 min jusqu'à ce que le
mélange devienne mousseux. Ajoutez progressivement le lait préalablement chauffé en remuant. Salez,
poivrez.
3 - Portez la sauce à ébullition en mélangeant sans arrêt jusqu'à épaississement. Eteignez le feu,
ajoutez les trois quarts du comté et mélangez de nouveau.
4 - Disposez une première couche de rondelles de navets dans le fond d'un plat à gratin beurré et
nappez-le de sauce. Recommencez cette opération jusqu'à épuisement des ingrédients en terminant par
une dernière couche de sauce.
5 - Parsemez avec le reste de fromage râpé et les herbes de Provence. Faites dorer sous le gril du four
et servez aussitôt.
solution 2)
solution 3)
<?xml version="1.0"?>
<livre_cuisine>
<recette>
<titre>Gratin de navets aux herbes de Provence </titre>
<nombre>Pour 4 personnes </nombre>
<durée-preparation>25 min </durée_preparation>
<durée_cuisson>25 min</durée_cuisson>
<ingredients>
<ingredient>1 kg de navets</ingredient>
<ingredient>40 g de beurre + 15 g pour le plat</ingredient>
<ingredient>40 g de farine</ingredient>
<ingredient>50 cl de lait</ingredient>
<ingredient>200 g de comté</ingredient>
<ingredient>1 cuillère à soupe d'herbes de Provence</ingredient>
<ingredient>sel</ingredient>
<ingredient>poivre</ingredient>
</ingredients>
<phases>
<phase>1- Epluchez les navets et coupez les en rondelles d'environ 1 cm d'épaisseur. Faites les cuire à la vapeur pendant environ 15
min. Râpez le fromage. </phase>
<phase>2 - Faites fondre le beurre dans une casserole, ajoutez la farine et laissez cuire 2 min jusqu'à ce que le mélange devienne
mousseux. Ajoutez progressivement le lait préalablement chauffé en remuant. Salez, poivrez. </phase>
<phase>3 - Portez la sauce à ébullition en mélangeant sans arrêt jusqu'à épaississement. Eteignez le feu, ajoutez les trois quarts
du comté et mélangez de nouveau. </phase>
<phase>4 - Disposez une première couche de rondelles de navets dans le fond d'un plat à gratin beurré et nappez-le de sauce.
Recommencez cette opération jusqu'à épuisement des ingrédients en terminant par une dernière couche de sauce. </phase>
<phase>5 - Parsemez avec le reste de fromage râpé et les herbes de Provence. Faites dorer sous le gril du four et servez
aussitôt.</phase>
</phases>
</recette>
</livre_cuisine>
Introduction à XML
date de dernière mise à jour : 19 octobre 2002
Eléments
Dans une DTD, on définit principalement les éléments intervenant dans un fichier XML. La définition d'un élément possède la syntaxe suivante :
<!ELEMENT nom_élément (modèle_contenu)>
nom_élément est le nom de la balise qui sera utilisée ; modèle_contenu renseigne sur ce qui est compris entre <nom_élément> et </nom_élément>.
Ainsi
définit un élément composé, date, contenant trois éléments simples, jour, mois, année. Ces trois éléments ont un contenu de caractères (PCDATA signifie
Parsed Character Data ou chaîne de caractères analysée).
un élément vide, comme la balise <hr/> par exemple se définira par emploi du mot réservé EMPTY :
<!ELEMENT hr EMPTY>
Prenons maintenant un exemple plus complet. Imaginons une bibliothèque composés d'ouvrages. Chaque ouvrage est décrit par un numéro d'inventaire, un
titre, un ou plusieurs auteurs, une maison d'édition, un prix d'achat.
Nous avons à construire le fichier XML et la DTD qui définira les balises employées..
Les figures suivantes donnent la visualisation du fichier livres.xml dans les navigateurs Netscape6 et Internet Explorer 5 :
Il nous faut maintenant établir la DTD qui définit les balises utilisées. Elle correspondra au fichier suivant enregistré sous le nom de livres.dtd :
"livre+" indique que plusieurs occurrences de "livre" vont intervenir. Autrement dit "bouquins" possède plusieurs "livres".
"prix?" indique que le champ "prix" est facultatif : il peut être absent.
Les signes "+", "?" indiquent des contraintes d'occurrence. Il y en a en fait trois :
contrainte signification
? 0 ou 1 (optionnel)
* 0 ou plus
+ au moins 1
Il faut évidemment indiquer dans le fichier livres.xml quelle DTD il faut utiliser. Pour cela, on rajoute une ligne (en rouge) :
Attributs
Les composants d'un fichier XML ne comportent pas que des balises ; celles-ci peuvent contenir des attributs. Il faut donc que la DTD puisse expliciter les
attributs de balises. Ceci est effectué avec la syntaxe suivante :
nom_élément est le nom de l'élement auquel est attaché l'attribut ; nom_attribut est le nom de l'attribut ; type_attribut est le type de l'attribut ; les
différents types sont donnés dans le tableau ci-dessous :
type signification
valeur signification
exemples :
Entités
Une entité est une variable remplaçant du texte. Elle est définie dans une DTD par la syntaxe
exemples :
Les entités s'utiliseront dans le document XML sous la forme &souris, &texte.
Les entités précédentes sont des entités internes. On peut aussi définir des entités externes. Leur définition se situe dans un autre document. La syntaxe
est alors :
exemple :
<!ENTITY Noe SYSTEM "http://www.bible.fr/arche.dtd">
exemple
Nous avons vu qu'Internet Explorer 5 pouvait agir comme afficheur de structure, mais il ne tient pas compte du contenu de la DTD. Internet Explorer 5 est
un "analyseur non validant". Existe-t-il des analyseurs "validants", c'est à dire faisant le lien entre le fichier XML et la DTD ? La réponse est oui. Il en existe
un, gratuit, offert par Microsoft (Si ! Ca existe !), appelé msxml.
Pour activer cet analyseur validant, il faut ajouter le code Javascript suivant (que l'on peut placer dans un document HTML) :
Information : http://www.xmlwriter.net/msxml.shtml#UseMSXML
XML Schema
XML Schema vise à remplacer les DTD. C'est une technologie encore en développement.
Avec les DTD, on avait par exemple un couple (fichier XML, fichier DTD) :
fichier XML
<?xml version="1.0"?>
<!DOCTYPE bouquins SYSTEM "livres.dtd">
<message>
<de>Marius</de>
<vers>Olive</vers>
<objet> anniversaire</objet>
<corps>Bon anniversaire, Olive!</corps>
</message>
fichier DTD
<?xml version="1.0"?>
<message xmlns:xsi="http//www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.w3schools.com/schema/message.xsd">
<de>Marius</de>
<vers>Olive</vers>
<objet> anniversaire</objet>
<corps>Bon anniversaire, Olive!</corps>
</message>
● XMLSchema est écrit en XML ce qui permet une simplification, l'utilisation d'un éditeur XML, la transformation du schéma avec XSLT
● XMLSchema définit des types de données ce qui permet de simplifier la description, de travailler avec des bases de données
● XMLSchema est extensible on peut définir ses propres types de données à partir des types de base
Comme on peut le voir sur l'exemple précédent, les éléments peuvent être
Comme dans les DTD, les éléments peuvent avoir des attributs déclarés comme suit :
truc1.xml
truc2.xml
truc3.xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE truc SYSTEM "truc.dtd">
<truc>
<alpha>Tagada</alpha>
<beta>Tsoin</beta>
<gamma>tsoin</gamma>
</truc>
truc4.xml
truc1.xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE truc SYSTEM "truc.dtd">
<truc>
<alpha>Tagada</alpha>
<beta>Tsoin Tsoin</beta>
</truc>
truc2.xml
truc3.xml
truc1.xml
truc2.xml
truc3.xml
</truc>
solution 1)
truc3.xml : correct
solution 2)
solution 3)
Etant donné que les balises sont d'une utilisation libre en XML, il doit fatalement arriver qu'un même nom
de balise peut correspondre à des significations différentes. Par exemple la balise <table>, bien connue en
HTML, et qui sert à désigner un tableau, pourrait être utilisée en XML, par exemple :
<table>
<tr>
<td>Athos</td>
<td>Porthos</td>
<td>Aramis</td>
</tr>
</table>
Par ailleurs, on pourrait utiliser une balise <table> pour désigner.....une table tout simplement :
<table>
<style>Louis XV</style>
<forme>rectangulaire</forme>
<hauteur>1 m</hauteur>
<largeur>1,50 m</largeur>
<longueur>2,50 m</longueur>
</table>
Imaginons que dans un même document XML, on utilise les deux types de balise <table>. Une confusion est
inévitable. Pour l'éviter, on peut utiliser un préfixe qui évite cette confusion (le nom de la balise n'est alors
plus le même : h:table est différent de m:table) :
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Athos</h:td>
<h:td>Porthos</h:td>
<h:td>Aramis</h:td>
</h:tr>
</h:table>
<m:table xmlns:m="http://www.u-picardie.fr">
<m:style>Louis XV</m:style>
<m:forme>rectangulaire</m:forme>
<m:hauteur>1 m</m:hauteur>
<m:largeur>1,50 m</m:largeur>
<m:longueur>2,50 m</m:longueur>
</m:table>
Dans l'exemple ci-dessous, un attribut xmlns (xml name space) a été ajouté aux balises <h:table> et
<m:table> ; cet attribut définit un espace de noms (name space) unique par l'intermédiaire d'une URI
(Uniform Resource Identifier) qui identifie une ressource Internet de manière unique.
Dans la pratique, on peut utiliser comme URI, une URL (Uniform Resource Locator) désignant un domaine
Internet ; c'est ce qui a été utilisé dans l'exemple précédent.
Peu importe sur quoi pointe l'URL (elle n'est pas censée pointer sur quelque chose de particulier), l'intérêt
est de définir de manière unique un espace de noms (évidemment l'URL doit correspondre à un domaine
existant).
Il est aussi possible de définir un espace de noms par défaut ; dans ce cas le préfixe est absent :
<table xmlns="http://www.w3.org/TR/html4/">
<tr>
<td>Athos</td>
<td>Porthos</td>
<td>Aramis</td>
</tr>
</table>
<m:table xmlns:m="http://www.u-picardie.fr">
<m:style>Louis XV</m:style>
<m:forme>rectangulaire</m:forme>
<m:hauteur>1 m</m:hauteur>
<m:largeur>1,50 m</m:largeur>
<m:longueur>2,50 m</m:longueur>
</m:table>
Supposons que l'on souhaite intégrer dans un fichier XML le code HTML suivant :
<hr/>
<h1>Attention</h1>
<p>Ce texte est issu d'un fichier en code HTML</p>
<hr/>
Dans le document XML, par exemple celui du début de ce chapitre, on définit un espace de noms :
La procédure inverse existe aussi. Il faut créer dans le document HTML un ilot de données XML compris
entre les balises <xml id=nom_de_l'_ilot> et </xml>. Par exemple, soit le fichier HTML suivant :
<html>
<head>
<titre>code XML imbriqué dans du code HTML</titre>
</head>
<body>
<p>ceci est du code HTML</p>
<hr/>
<hr/>
</body>
</html>
<tagada>
<tsoin>coucou></tsoin>
<tralala>voici du code XML</tralala>
</tagada>
ce qui donne :
<html>
<head>
<titre>code XML imbriqué dans du code HTML</titre>
</head>
<body>
<p>ceci est du code HTML</p>
<hr/>
<xml id="ilotXml">
<tagada>
<tsoin>coucou</tsoin>
<tralala>voici du code XML</tralala>
</tagada>
</xml>
<hr/>
</body>
</html>
On peut aussi imbriquer du texte XML provenant d'un fichier externe dans un document HTML. Supposons
que l'on ait le fichier XML suivant enregistré quelque part (pour la simplicité on supposera que ce fichier
est dans le même répertoire que le présent document) : bibliotheque.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<bouquins>
<livre>
<numero>123</numero>
<titre>Les Trois Mousquetaires</titre>
<auteur>A.Dumas</auteur>
<editeur>Gallimard</editeur>
<prix>246FF</prix>
</livre>
<livre>
<numero>124</numero>
<titre>Les Diaboliques</titre>
<auteur>Boileau</auteur>
<auteur>Narcejac</auteur>
<editeur>Duchnok</editeur>
<prix>210FF</prix>
</livre>
</bouquins>
<html>
<body>
</body>
</html>
Ce fichier, par la balise xml, mentionne l'insertion d'un fichier XML appelé par l'ID "catalogue". Les balises
span permettent d'afficher des données de ce fichier (ici sous forme d'un tableau). Essayez en cliquant sur
le nom du fichier voir_biblio.htm
Une autre possibilité consiste à utiliser du code javascript. Examinons cette possibilité sur un exemple :
soit le fichier XML
note.xml
<note>
<a>Dupont</a>
<de>Secrétariat</de>
<heading>rappel</heading>
<body>Votre carte d'étudiant est à retirer au secrétariat!</body>
</note>
On écrit un fichier HTML pour appeler, via du code javascript le fichier note.xml et afficher les données :
affiche.htm
<html>
<head>
<script type="text/javascript" for="window" event="onload">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes=xmlDoc.documentElement.childNodes
a1.innerText=nodes.item(0).text
a2.innerText=nodes.item(1).text
a3.innerText=nodes.item(2).text
a4.innerText=nodes.item(3).text
</script>
</head>
<body bgcolor="yellow">
<h1>Note aux étudiants</h1>
<b>A:</b>
<span id="a1"></span>
<br/>
<b>De:</b>
<span id="a2"></span>
<hr/><b><span id="a3"></span></b><hr/>
<span id="a4"></span>
</body>
</html>
Comme nous l'avons vu, XML ne se préoccupe que de la structure des documents, pas de la mise en page.
Pour mettre en page un document XML, deux possibilités sont offertes : CSS et XSL. Nous étudions ici la
première possibilité.
Cascading Style Sheets (CSS) permet de définir des feuilles de style qui accompagnent un document (HTML
ou XML). Une feuille de style, comme indique son nom, définit les styles qui sont utilisés dans un document.
Elle correspond elle-même à un document reconnaissable à son suffixe .css.
Pour faire comprendre leur utilisation, nous utiliserons un exemple en HTML . Soit le document HTML
suivant :
<html>
<head><title>Bonjour</title></head>
<body>
<h1>Bonjour les petits enfants</h1>
<p>Une <b>grande nouvelle</b> :</p>
<img border="0" src="joueur.gif" width="156" height="157" align="right">
<p>à partir d'aujourd'hui vous pourrez consulter les résultats des
compétitions sportives
en cliquant sur les liens suivants :</p>
<ul>
<li>le <a href="tennis.htm"> tennis</a></li>
<li>le <a href="foot.htm"> foot-ball</a></li>
<li>le <a href="velo.htm"> cyclisme</a></li>
<li>la <a href="cochonnet.htm"> pétanque</a></li>
</ul>
<p>Vous pouvez aussi faire du sport.</p>
<p>Inscrivez-vous au plus vite au club en cliquant sur
<a href="mailto:zidane@u-picardie.fr">contact</a></p>
<p>A très bientôt</p>
</body>
</html>
Ensuite il faut rédiger la feuille de style sous forme d'un document texte (style1.css) :
body {margin: 1.0cm;}
h1 {font-family: Comic Sans MS, Helvetica, sans-serif; font-size:
30pt;}
p {font-family: Arial, Helvetica, sans-serif; font-size: 15pt;}
b {color: red;}
ul {font-family: Times New Roman, Helvetica, sans-serif; font-size :
18pt;}
a:link {color: blue;}
a:hover {color: red;}
a:active {color: green;}
où l'on peut constater que, pour chaque balise, le style est défini. En particulier, on remarquera que pour les
polices de caractères, il est utile d'en définir plusieurs car l'utilisateur ne possède pas forcément sur sa
machine les polices que vous utilisez.
Cette feuille peut être ajoutée en déclaration dans le fichier HTML, en plus de la feuille de style,
style1.css.
<html>
<head><title>Bonjour</title>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<h1>Bonjour les petits enfants</h1>
<p>Une <b>grande nouvelle</b> :</p>
<img border="0" src="joueur.gif" width="156" height="157" align="right">
<p>à partir d'aujourd'hui vous pourrez consulter les résultats des
compétitions sportives
en cliquant sur les liens suivants :</p>
<ul>
<li>le <a href="tennis.htm"> tennis</a></li>
<li>le <a href="foot.htm"> foot-ball</a></li>
<li>le <a href="velo.htm"> cyclisme</a></li>
<li>la <a href="cochonnet.htm"> pétanque</a></li>
</ul>
<p>Vous pouvez aussi faire du sport.</p>
<p>Inscrivez-vous au plus vite au club en cliquant sur
<a href="mailto:zidane@u-picardie.fr">contact</a></p>
<p>A très bientôt</p>
</body>
</html>
Qu'en est-il pour un document XML. C'est à peu près la même chose. Reprenons l'exemple des livres
(livres.xml) donné plus haut. Intercalons le lien avec la feuille de style appelée livres.css (en rouge en
deuxième ligne) ; soit livres2.xml, le fichier correspondant :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="livres.css" type="text/css"?>
<bouquins>
<livre>
<numero>123</numero>
<titre>Les Trois Mousquetaires</titre>
<auteur>A.Dumas</auteur>
<editeur>Gallimard</editeur>
<prix>246FF</prix>
</livre>
<livre>
<numero>124</numero>
<titre>Les Diaboliques</titre>
<auteur>Boileau</auteur>
<auteur>Narcejac</auteur>
<editeur>Duchnok</editeur>
<prix>210FF</prix>
</livre>
</bouquins>
La feuille de style doit maintenant être établie suivant un mode opératoire assez similaire à celui utilisé plus
haut : pour chaque balise on définit le style :
L'attribut display est particulièrement utile. Il permet d'afficher quelque chose, puis, soit de passer à la
ligne suivante ("block" - en fait l'affichage correspond à un bloc), soit de continuer sur la même ligne
("inline"). On notera aussi que la police de caractère étant définie dans "bouquins" est commune aux
éléments "intérieurs". Le résultat est donné ci-dessous dans Internet Explorer :
Un aspect intéressant de CSS concerne les images d'arrière plan. Imaginons que l'on souhaite ajouter une
image d'arrière-plan à l'affichage précédent. Voici quelques possibilités
CSS a fait l'objet d'une standardisation en 1996 sous le nom CSS1. Depuis une nouvelle version CSS2 a vu le
jour en 1998 et encore une autre, CSS3, est en préparation. Mais les navigateurs usuels ne reconnaissant
encore que CSS1 !
Introduction à XML
date de dernière mise à jour : 23 février 2002
XSL signifie Extensible Style Sheet Language. Dans sa version de base, il exploite les balises de HTML (qui
ne sont pas si mauvaises que cela après tout !) mais au bénéfice de XML. Il peut aussi utiliser une mise en
forme spécifique basée sur les FO (Formatting Objects ou Objets de formatage). En fait XSL est bien plus
qu'un langage de feuille de style car il peut
● transformer les documents XML (le plus souvent en XHTML) : cette partie s'appelle XSLT
● filtrer et trier les données XML : cette partie s'appelle XPath
● formater les données XML pour une restitution à l'écran, sur papier,... : cette partie est basée sur
les FO
XSL est un standard défini et recommandé par le W3 Consortium. Pour voir les résultats de XSL, il faut
employer un navigateur compatible XSL. Internet Explorer 5 n'est pas totalement compatible avec XSL ;
par contre Internet Explorer 6 l'est ; on supposera donc dans la suite que l'on utilise Internet Explorer 6.
Contrairement à CSS, XSL correspond à un fichier qui doit être "inséré" dans un document XML ; c'est
pourquoi, on peut considérer le contenu d'un fichier XSL comme un espace de noms. Pour expliquer
l'utilisation de XSL, reprenons l'exemple du début du chapitre :
La première ligne correspond à la définition correcte (au sens de la conformité avec la recommandation du
W3C) d'une feuille de style XML, donc utilisable avec Internet explorer 6. Si on utilise Internet Explorer
5, il faut mettre la ligne suivante :
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
Dans l'exemple ci-dessus, nous voyons que les balises de HTML sont ici réutilisées pour des portions de
document. Le résultat sera le suivant :
On peut changer la présentation en utilisant le même fichier xml, mais un fichier xsl différents, par
exemple bonjour2.xml :
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<table border="1">
<tr>
<td><font color="green">
<xsl:value-of select="document/question"/>
</font>
</td>
<td><font color="red">
<xsl:value-of select="document/reponse"/>
</font>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
Contrairement à CSS, XSL utilise des modèles (templates) associés à des éléments d'un fichier XML.
L'association d'un modèle à un élément s'opère avec la balise <xsl:template> et avec l'attribut "match".
Dans l'exemple ci-dessus, la ligne
<xsl:template match="/">
indique que le modèle défini entre les balises "template" s'applique à l'élément racine "/". Les éléments à
présenter sont définis à l'aide de la balise <xsl:value-of>
<xsl:value-of select="document/question"/>
L'attribut "select" indique la position de l'élément dans la structure.
L'utilisation de XSL permet de faire un véritable traitement du texte contenu dans un fichier XML. Pour
illustrer ces possibilités, reprenons l'exemple des livres vu au chapitre sur CSS et appelons biblio.htm le
fichier suivant qui comprend la description de trois ouvrages :
<?xml version="1.0"?>
<?xml-stylesheet href="biblio.xsl" type="text/xsl"?>
<bouquins>
<livre>
<numero>123</numero>
<titre>Les Trois Mousquetaires</titre>
<auteur>A.Dumas</auteur>
<editeur>Gallimard</editeur>
<prix>60 Euros</prix>
</livre>
<livre>
<numero>124</numero>
<titre>Les Diaboliques</titre>
<auteur>Boileau</auteur>
<auteur>Narcejac</auteur>
<editeur>Duchnok</editeur>
<prix>78 Euros</prix>
</livre>
<livre>
<numero>125</numero>
<titre>Cinq semaines en ballon</titre>
<auteur>Jules Verne</auteur>
<editeur>Hetzel</editeur>
<prix>inestimable</prix>
</livre>
</bouquins>
Imaginons que nous souhaitions faire la liste des livres avec mention du numéro, des auteurs, du titre, de
l'éditeur.
On utilise dans l'exemple ci-dessus des boucles, définies par la balise "for-each" :
<xsl:for-each select="nom_de_noeud">
et on notera en particulier l'imbrication des boucles de ce type (qui permet de faire afficher plusieurs
auteurs pour le même livre).
Tests
1) On donne le fichier suivant décrivant une personne :
<?xml version="1.0" ?>
<?xml-stylesheet href="carte.xsl" type="text/xsl"?>
<card>
<name>Jean Dupont</name>
<title>PDG, Papeteries du Limousin.</title>
<email>jean.dupont@paplim.com</email>
<phone>(33)5 45 67 89</phone>
<logo url="photo.gif"/>
</card>
solution 1)
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="card">
<html>
<head>
<title> <xsl:value-of select="name/text()"/> </title>
</head>
<body bgcolor="#ffffff">
<table border="3">
<tr> <td><xsl:if test="logo"><img src="{logo/@url}"/></xsl:if></td>
<td> <xsl:apply-templates select="name"/><br/>
<xsl:apply-templates select="title"/><p/>
<xsl:apply-templates select="email"/><br/>
<xsl:if test="phone"> Téléphone:
<xsl:apply-templates select="phone"/><br/>
</xsl:if>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="name"><xsl:value-of select="text()"/></xsl:template>
<xsl:template match="title"><xsl:value-of select="text()"/></xsl:template>
<xsl:template match="email"><xsl:value-of select="text()"/></xsl:template>
<xsl:template match="phone"><xsl:value-of select="text()"/></xsl:template>
</xsl:stylesheet>
Introduction à XML
date de dernière mise à jour : 19 octobre 2002
XPath
XPath est un moyen de désigner un élément d'un fichier XML en se basant sur la structure arborescente d'un tel document. Il
emploie une notation relativement parlante (on l'espère !).
format signification
Dans les exemples suivants, nous mettons en rouge, les éléments ou attributs sélectionnés par le langage XPath.
exemple : <alpha>
<beta/>
/alpha/beta[1] <beta/>
<beta/>
<beta/>
sélection du premier fils <beta> de <alpha>
</alpha>
/alpha/beta[last()] <alpha>
<beta/>
<beta/>
sélection du dernier fils <beta> de <alpha>
<beta/>
<beta/>
</alpha>
Dans l'exemple précédent la fonction last() renvoie le numéro du dernier noeud de la liste. Il s'agit d'une fonction XPath. Il existe
un grand nombre de fonctions XPath. Nous en donnons ci-dessous quelques échantillons :
fonction signification
exemple :
<alpha>
<beta id="beta1"/>
//beta[@truc]
<beta id="beta2"/>
<beta truc="beta3"/>
tous les éléments "beta" qui possède un attribut "truc" sont <beta/>
sélectionnés </alpha>
//beta[not(@*)] <alpha>
<beta id="beta1"/>
<beta id="beta2"/>
tous les éléments "beta" qui ne possèdent pas d'attribut sont <beta truc="beta3"/>
sélectionnés
<beta/>
</alpha>
L'expression entre crochets dans l'exemple précédent constitue un prédicat qui est soit vrai, soit faux. Ce prédicat opère comme
un filtre, c'est à dire qu'il permet de ne sélectionner que les éléments pour lesquels l'expression est vraie.
Autre caractéristique intéressante de XPath, les axes de sélection. Ces axes permettent de définir le domaine dans lequel une
sélection peut s'opérer. La syntaxe est très simple :
nom_axe::<conditions de sélection>
axe définition
XPointer
IL s'agit d'un mode de désignation d'une cible en employant XPointer qui n'est autre qu'une extension de XPath.
Imaginons que dans un fichier xml, on fasse référence, par exemple pour sélectionner, à un élément d'un autre fichier xml dont un
attribut possède une certaine valeur. Il est alors possible d'identifier cet élément avec la notation XPointer.
exemple : xlink:href="http://www.site_machin.fr/trucmuche/cefichier.xml#xpointer(chose("285"))"
sélectionnera dans le fichier "cefichier.xml" les éléments possédant un attribut chose dont la valeur est 285 :
-----
<bidule chose="285"/>
-----
On peut aussi utiliser une forme simplifiée dès lors que l'attribut est défini comme un ID
exemple : xlink:href="http://www.site_machin.fr/trucmuche/cefichier.xml#285"
La méthode est simple mais atteint vite des limites dont on peut dresser la liste :
● les liens sont désignés par des noms d'éléments précis : "a", "img" par exemple
● la sémantique d'un lien est définie dans les spécifications HTML
● Une ancre doit être placée effectivement à chaque destination (la liaison est donc prédéfinie)
● La définition du lien doit être effective à chaque source du lien
● les liens sont 1-1 : un lien possède une seule source et une seule destination.
● Aucune historique des liens utilisés n'est disponible (à part les navigateurs qui sont des applications)
● On ne peut connaître la source d'un lien quand on est sur la cible
● On doit pouvoir accéder à un document cible pour y placer une ancre <a> servant d'index (problème de possibilité
d'écriture).
XML propose d'autres méthodes de constituer des liens : XLink et XPointer qui permettent
Un lien simple est un lien unique entre une source et une destination.
Reprenons l'exemple des livres et supposons que les adresses des éditeurs soient dans un fichier XML, adresses.xml, distinct du
fichier livres.xml :
Pour réaliser le lien, l'élément "éditeur" comprendra alors la définition du lien :
<editeur xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"
xlink:href="http://www.truc/adresses.xml#xpointer(child::coordonnées)
xlink:title="adresse">
Gallimard
</editeur>
Dans cet exemple, la source est locale (le lien est défini dans l'élément source) et la cible est distante. Les attributs qui peuvent
être utilisés dans un lien simple permettent de spécifier le type de lien (xlink:type), la source (xlink:href), les caractéristiques du
lien (xlink:title), l'endroit où on affiche le document cible (xlink:show), le moment où on affiche le document cible (xlink:actuate).
On peut aussi définir le lien simple dan sune DTD au lieu de le faire figurer dans le fichier source XML :
exemple : reprenons l'exemple précédent avec une DTD (nous ne donnons ci-dessous que l'extrait correspondant de la DTD)
<!ELEMENT logo>
<!ATTLIST logo
xmlns:xlink CDATA #FIXED
"http://www.w3.org/1999/xlink"
xlink:type (simple) #FIXED "simple"
xlink:href CDATA #FIXED "images0/logoupjv.gif"
xlink:title CDATA #FIXED "logo université"
xlink:show (new|replace|embed|undefined) #FIXED "new"
xlink:actuate (onLoad|onRequest|undefined) #FIXED "onRequest">
● resource : ressource locale : la ressource est dan sle document où figure la définition du lien
● locator : ressource distante : la resource est extérieure au document où figure la définition du lien
● arc : relation entre ressources indiquant le sens (point de départ et point d'arrivée) du lien.
Imaginons , dans l'exemple des livres que l'éditeur possède une adresse administrative (siège social par exemple) et une adresse
pour les livraisons.
Dasn un premier temps, on définira le lien dans le fichier livres.xml. L'élément "editeur" sera alors une ressource locale et les
adresses des ressources distantes. On aura donc dans le fichier livres.xml :
<editeur
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="extended"
xlink:title="adresse_editeur">
<nomediteur
xlink:type="resource"
xlink:label="nom">
Gallimard
</nomediteur>
<adressead
xlink:type="locator"
xlink:href="http:/www.carnet1/adresse.xml#xpointer(/child::adressead/child::ville)"
xlink:label="adresse_adm" />
<adresseliv
xlink:type="locator"
xlink:href="http:/www.carnet2/adresse.xml#xpointer(/child::adresseliv/child::ville)"
xlink:label="adresse_liv" />
<arc_adm
xlink:type="arc"
xlink:from="nom"
xlink:to="adresse_adm" />
<arc_liv
xlink:type="arc"
xlink:from="nom"
xlink:to="adresse_liv" />
</editeur>
Le code ci-dessus est assez explicite. Tout d'abord, on constate que le lien étendu "editeur" est un élément composite comprenant
plusieurs éléments : la ressource locale "nom" (avec l'attribut "ressource", les ressources distances (avec l'attribut "locator")
adress_adm" et "adresse_liv" et deux arcs "arc_adm" et "arc_liv" qui précisent chacun la source et la cible à l'aide de l'attribut
label. On notera que
Supposons maintenant que l'on souhaite définir les mêmes liens dans un document particulier différent des documents livres.xml,
http:/www.carnet1/adresse.xml et http:/www.carnet2/adresse.xml. On créera alors un fichier XML spécifique, relations.xml dont
le contenu est le suivant :
exemple :
<?xml version="1.0"?>
<?xml-stylesheet href="biblio.xsl" type="text/xsl"?>
<bouquins>
<livre>
<numero>123</numero>
<titre>Les Trois Mousquetaires</titre>
<auteur>A.Dumas</auteur>
<editeur>Gallimard</editeur>
<prix>60</prix>
</livre>
<livre>
<numero>124</numero>
<titre>Les Diaboliques</titre>
<auteur>Boileau</auteur>
<auteur>Narcejac</auteur>
<editeur>Duchnok</editeur>
<prix>78</prix>
</livre>
<livre>
<numero>125</numero>
<titre>Cinq semaines en ballon</titre>
<auteur>Jules Verne</auteur>
<editeur>Hetzel</editeur>
<prix>inestimable</prix>
</livre>
</bouquins>
Cet exemple illustre bien, même avec le nombre réduit de données, que cette solution est loin d'être satisfaisante, notamment du fait des nombreuses
répétitions. En fait, nous souhaiterions décrire une base de données.
Une base de données relationnelle est un ensemble de tables possédant des lignes (enregistrements) et des colonnes (attributs). La normalisation
impose que chaque table possède une clé "primaire", identifiant unique de chaque enregistrement de la table.
Les associations entre les tables s'effectuent, pour les jointures, par utilisation de clés étrangères.
● une base de données est décrite par un schéma qui doit être physiquement séparé des données et qui décrit la structure ;
● les schéma comprend la description des tables (relations)
● une table est caractérisée par son nom, les noms de ses attributs, la déclaration d'un attribut (ou plusieurs) comme clé primaire, le type de
chaque attribut (chaîne de caractères, numérique, booléen, ...), la mention NOT NULL pour certains attributs (dont la clé primaire), des
contraintes d'appartenance des valeurs des attributs à des domaines ;
● une table peut avoir comme attributs des clés étrangères qui sont des clés primaires pour d'autres tables et permettent effectuer des
opérations de jointure.
exemple : base de données "biblio"
modèle relationnel
Le modèle conceptuel des données (avec les cardinalités suivant le formalisme "entité-association") et le graphe des dépendances fonctionnelles
explicitent cette structure.
Dans ce schéma, on admet qu'un livre peut être écrit par plusieurs auteurs, qu'un auteur peut avoir écrit plusieurs livres, qu'un livre ne correspond
qu'à un seul éditeur.
<?xml version="1.0"?>
<biblio>
<livre>
<numliv>123</numliv>
<titre>Les Trois Mousquetaires</titre>
<numedit>521</numedit>
<prix>60</prix>
</livre>
<livre>
<numliv>124</numliv>
<titre>Les Diaboliques</titre>
<numedit>522</numedit>
<prix>78</prix>
</livre>
<livre>
<numliv>125</numliv>
<titre>Cinq semaines en ballon</titre>
<numedit>523</numedit>
<prix>inestimable</prix>
</livre>
<auteur>
<numaut>321</numaut>
<nomaut>Dumas</nomaut>
<pnomaut>Alexandre</pnomaut>
</auteur>
<auteur>
<numaut>322</numaut>
<nomaut>Boileau</nomaut>
<pnomaut></pnomaut>
</auteur>
<auteur>
<numaut>323</numaut>
<nomaut>Narcejac</nomaut>
<pnomaut></pnomaut>
</auteur>
<auteur>
<numaut>324</numaut>
<nomaut>Verne</nomaut>
<pnomaut>Jules</pnomaut>
</auteur>
<editeur>
<numedit>521</numedit>
<nomedit>Gallimard</nomedit>
<adedit></adedit>
</editeur>
<editeur>
<numedit>522</numedit>
<nomedit>Duchnok</nomedit>
<adedit></adedit>
</editeur>
<editeur>
<numedit>523</numedit>
<nomedit>Hetzel</nomedit>
<adedit></adedit>
</editeur>
<liv_aut>
<numliv>123
<numaut>321
</liv_aut>
<liv_aut>
<numliv>124
<numaut>322
</liv_aut>
<liv_aut>
<numliv>125
<numaut>324
</liv_aut>
<liv_aut>
<numliv>124
<numaut>323
</liv_aut>
</biblio>
<?xml version="1.0"?>
<biblio>
<livre numero="123",titre="Les Trois Mousquetaires",numedit="521",prix="60" />
<livre numero="124",titre="Les Diaboliques",numedit="522", prix="78"/>
<livre numero="125",titre="Cinq semaines en ballon",numedit="523", prix="inestimable" />
<auteur numaut="321", nomaut="Dumas",pnomaut="Alexandre" />
<auteur numaut="322",nomaut="Boileau",pnomaut="" />
<auteur numaut="323",nomaut="Narcejac",pnomaut="" />
<auteur numaut="324",nomaut="Verne",pnomaut="Jules" />
<editeur numedit="521",nomedit="Gallimard",adedit="" />
<editeur numedit="522",nomedit="Duchnok",adedit="" />
<editeur numedit="523",nomedit="Hetzel",adedit="" />
<liv_aut numliv="123",numaut="321" />
<liv_aut numliv="124",numaut="322" />
<liv_aut numliv="125",numaut="324" />
<liv_aut numliv="124",numaut="323"/>
</biblio>
● elle est proche du schéma relationnel : le mot attribut correspond à la même signification dans la base et dans XML ;
● on ne peut avoir qu'un attribut unique par table
● on peut renvoyer à une DTD les plages de valeurs prises par les valeurs des attributs XML
● le fichier XML est moins volumineux
Dans la version XML, les recherches sont des filtres qui sont définis dans un fichier XSLT.
Voici une liste de sites proposant des cours ou tutoriels sur XML :
Zvon Tutorials
XML Seminars, Tutorials, and Presentations
XML Revolution: XML Tutorial Slides
Doing It with XML partie 1 et partie 2
On Display: XML Web Pages with Opera 4.0
On Display: XML Web Pages with Mozilla
Next Generation HTML: The Big Picture
Frequently Asked Questions about the Extensible Markup
Language
xml-zone.com
Ask The XML Pro
XML Namespaces
Extensible Markup Language (XML) 1.0 (Second Edition)
Introduction technique à XML
Server-side XML
Introduction to XHTML
DTD de XHTML, syntaxe stricte
XSL Tutorial,
Zvon Tutorials
eXtensible Stylesheet Language
XSL Transformations
site feuilles de style
Understanding XSL
XSL Developer's Guide
XSL Considered Harmful partie 1 et partie 2
Liste de ressources de xml.about.com sur l'utilisation de XSL
avec XML
Introduction technique à XSLT
Introduction à XSL/FO
Quelques livres :