langages de l’internet (2) : xmlwebia.lip6.fr/~auzende/assas/coursxml.pdf · 2012-11-26 · les...

36
DEUST 2 Langages de l’Internet (2) : XML O. Auzende 2012-2013

Upload: others

Post on 30-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

DEUST 2

Langages de l’Internet (2) : XML

O. Auzende 2012-2013

Page 2: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

2

INTRODUCTION A XML ............................................................................................ 3

FEUILLES DE STYLE CSS ....................................................................................... 5

STRUCTURE D’UN DOCUMENT XML...................................................................... 7

LES DTD (DOCUMENT TYPE DEFINITION) ............................................................. 9

LES ESPACES DE NOMS ....................................................................................... 16

FEUILLES DE STYLE XSL ...................................................................................... 19

LES SCHEMAS XML ............................................................................................... 28

LES LIENS XML (XLINK) ........................................................................................ 29

ANNEXE 1 : CODAGE DES CARACTERES SELON LA NORME UTF-8 .............. 36

ANNEXE 2 : ELEMENTS HTML COURANTS UTILISABLES AVEC XSL ............. 36

Page 3: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

3

Introduction à XML

o SGML (Standard Generalized Markup Language) est un vaste langage destiné à décrire tous les types de documents. Très complexe, il a été simplifié pour donner naissance à HTML et XML.

o HTML (HyperText Markup Language) est uniquement destiné à l’écriture de pages Web. o XML (eXtensible Markup Language) est un langage de description et d’échange de documents, notamment

entre applications différentes. Les documents XML ne donnent jamais aucune indication sur la mise en page. Le contenu est ainsi complètement séparé de la forme.

o XHTML (eXtensible HyperText Markup Language, qui correspond à HTML + XML) est de plus en plus

préconisé sur le Web afin de garantir la bonne conformité des pages au format XML.

Exemples de documents XML

Inventaire01.xml <?xml version="1.0"?> <!-- Nom de fichier : Inventaire01.xml --> <INVENTAIRE> <LIVRE> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML &#233;tape par &#233;tape</TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML Langage et applications</TITRE> <AUTEUR>Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

Page 4: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

4

employes.xml <?xml version="1.0"?> <!-- Nom de fichier : Employes.xml --> <employes> <societe> <nom>EDS</nom> <adresse site="Nanterre"> <rue>avenue Pablo Picasso</rue> <ville>Nanterre</ville> </adresse> <adresse site="Blanc-Mesnil"> <rue>avenue Jean Jaures</rue> <ville>Blanc Mesnil</ville> </adresse> </societe> <personne> <nom>Dupont</nom> <prenom>Louis</prenom> <bureau site="Nanterre"> <num-bureau>205</num-bureau> <tel>0145455662</tel> </bureau> </personne> <personne> <nom>Michel</nom> <prenom>Pierre</prenom> <bureau site="Blanc-Mesnil"> <num-bureau>141</num-bureau> <tel>0185654575</tel> </bureau> </personne> </employes>

Les balises incluses dans les fichiers XML sont des balises personnalisées, dépendant de la nature du contenu du document. Les balises peuvent être écrites en majuscules ou en minuscules, mais dès qu'elles ont été écrites, la casse doit impérativement être respectée. Un navigateur affiche un fichier XML sous forme d’un arbre développable :

Page 5: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

5

Exercice 1

Ecrire un fichier XML appelé annuaire01.xml construisant un annuaire comportant des entités de type personne. Chaque personne a : o une identite (sans accent), elle-même composée d’un nom et d’un prenom (sans accent) o une adresse, elle-même composée d’une rue, d’un cp (code postal) et d’une ville o un tel. Faire afficher le fichier par le navigateur.

Feuilles de style CSS

Un document XML ne contient jamais de mise en forme (contrairement au HTML). Pour donner une mise en forme à un document XML, il faut utiliser : o Soit une feuille de style CSS (Cascading Style Sheets) o Soit une feuille de style XSL (EXtensible Style Language), qui est elle-même un document XML (voir plus

loin le chapitre « Feuilles de style XSL »). Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les fichiers HTML. On décrit dans un fichier externe spécifique tous les styles que l’on désire, associés aux balises concernées. Dans un document HTML, on référence un fichier CSS (vu en 1ère année) par : <LINK REL="stylesheet" TYPE="text/css" HREF="fichier.css"> Dans un document XML, une PI (Processor Instruction) donne au navigateur la référence à la feuille de style à appliquer : <?xml-stylesheet type="text/css" href="nom_document.css"?>. Les balises étant personnalisées, la propriété "display" doit systématiquement être spécifiée pour qu'un élément soit ou ne soit pas affiché (avec block pour retour à la ligne ensuite, inline sans retour à la ligne). Si un élément ne doit pas être affiché, on utilise display:none.

Exemples

inventaire02.xml inventaire02.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Inventaire02.css"?> <!-- Nom de fichier : Inventaire02.xml --> <INVENTAIRE>

<INTITULE>Bibliographie sur XML</INTITULE> <LIVRE> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML &#233;tape par &#233;tape</TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML Langage et applications</TITRE> <AUTEUR>Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

/* Inventaire02.css */ INTITULE {display:block; font-size:14pt; font-weight:bold} LIVRE {display:block; margin-top:12pt; font-size:10pt} TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} AUTEUR {display:block; margin-left:15pt; font-weight:bold} EDITEUR {display:block; margin-left:15pt; font-style:italic} PAGES {display:none} PRIX {display:block; margin-left:15pt}

Page 6: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

6

inventaire02b.xml inventaire02b.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Inventaire02b.css"?> <!-- Nom de fichier : Inventaire02b.xml --> <INVENTAIRE>

<INTITULE>Bibliographie sur XML</INTITULE> <LIVRE> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML &#233;tape par &#233;tape</TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML Langage et applications</TITRE> <AUTEUR>Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

/* Inventaire02b.css */ INTITULE, EDITEUR, PAGES, PRIX {display:none} LIVRE {display:block; margin-top:12pt; font-size:10pt} TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} AUTEUR {display:block; margin-left:15pt; font-weight:bold}

Propriétés des feuilles de styles CSS

Polices de caractères

font-size: taille des caractères. font-family: serif, sans serif, cursive, monospace ou fantasy font-style: normal ou italic. font-weight: normal ou bold (gras).

Propriétés des textes

line-height: interligne en pt ou en %. text-align: left, right, center, justify. text-indent: indentation en pt ou en %. text-transform:lowercase (minuscules), uppercase (majuscules) ou capitalize (1er caractère en majuscule).

Propriété des blocs

display:block provoque l’affichage avec un retour automatique à la ligne à la fin display:inline provoque l’affichage sans retour à la ligne display:none empêche l’affichage du bloc. Il est possible de positionner très précisément tous les blocs par rapport au dernier élément mis sur la page : height: taille en hauteur. width: taille en largeur. background-color: couleur de fond. background-image: image de fond. On peut choisir les marges : margin-right: marge de droite. margin-left: marge de gauche. margin-top: marge du haut. margin-bottom: marge du bas.

On peut régler le blanc autour du bloc : padding-right: espace à droite. padding-left: espace à gauche. padding-top: espace en haut. padding-bottom: espace en bas. On peut paramétrer la bordure : border-style:none (pas de bordure), 3D (effet de relief), solid (trait plein). border-color: couleur de la bordure.

Page 7: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

7

Exercice 1 (suite)

Enregistrer le fichier annuaire01.xml sous le nom annuaire02.xml. Lui ajouter une feuille de style CSS appelée annuaire02.css réalisant l’affichage de l’annuaire de la manière présentée ci-contre.

Limites des feuilles de styles CSS

Les éléments sont affichés ou ne le sont pas (si utilisation de display:none), mais le contenu du fichier XML est lu de manière séquentielle, de haut en bas. Une feuille de style CSS ne peut pas réorganiser le document, ce que fera par contre une feuille de style XSL.

Structure d’un document XML

Composition d’un document XML

Un document XML comporte : o un prologue qui contient toutes les informations autres que les données ou les éléments (entre crochets, les

attributs facultatifs) :

• une déclaration XML

<?xml version="1.0"[encoding="encodage"][standalone="yes|no"]?> Cette déclaration contient des informations pour le processeur. Elle indique que ce document est conforme à la version 1.0 de la norme XML. Elle peut préciser le jeu de caractères utilisés dans le document (encoding) et s'il y a des références externes ou non (standalone). des instructions de traitement (PI : Processor Instruction) Les instructions de traitement permettent de placer des informations spécifiques à l'intérieur du document, qui seront transmises à l'application. Exemple : <?xml-stylesheet type="text/css" href="Inventaire02.css"?> • souvent une déclaration de DTD Si le document se refère à une DTD, cette DTD peut être incluse dans le document ou être dans un fichier externe. Dans les deux cas, <!DOCTYPE ... > permet de déclarer le type du document (voir chapitre suivant).

o éventuellement des commentaires Les commentaires sont autorisés dans le document (après le prologue). Ils sont écrits, comme en HTML, sous la forme : <!-- commentaire -->

o l'arbre des éléments (le contenu du document) avec son élément racine : Un élément est constitué de trois parties, une balise ouvrante qui peut contenir des attributs, un contenu (des données et/ou d'autres éléments) et une balise fermante.

o éventuellement des sections CDATA

<![CDATA[ ... ]]> section de données littérales que le processeur XML n'interprète pas. Ces sections permettent de passer des caractères réservés à une application.

Page 8: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

8

Document bien formé, document valide

Un document est dit bien formé si l'analyseur XML peut construire son arborescence, donc s’il respecte les règles de balisage suivantes : o il contient une déclaration XML o il contient un ou plusieurs éléments (couples de balises) o il contient un et un seul élément racine encapsulant tous les autres éléments et leurs attributs o les éléments non vides ont une balise de début et de fin o les éléments non vides sont correctement imbriqués (<P> <EM> ... </EM> </P>) o les éléments vides ont un / à la fin de la balise avant le > : <ELEMENTVIDE /> o les noms des balises ouvrantes et fermantes correspondent o un nom d'attribut apparaît uniquement dans la balise ouvrante et une seule fois dans cette balise o les valeurs des attributs sont entre guillemets ou apostrophes o la valeur des attributs n'appelle pas d'entités externes1

o les caractères réservés sont remplacés par des références d'entités (par ex. &lt; pour <)

o toutes les références à des entités doivent commencer par & et finir par ; o s'il n'y a pas de DTD, les seules entités utilisées sont &amp; &lt; &gt; &apos; &quot; o s'il y a une DTD, toutes les autres entités utilisées sont déclarées dans la DTD. Un document est dit valide si : o il est bien formé o il fait référence à une DTD o il se conforme à cette DTD.

Validateur en ligne

Il existe de très nombreux validateurs. Sur le site du W3C http://validator.w3.org on trouve un validateur qui permet de vérifier si un document est bien formé et, s’il contient une DTD, s’il est valide. Faites l’essai sur Inventaire02.xml et Inventaire02b.xml, qui sont bien formés mais ne contiennent pas (encore) de DTD.

Encodage

Dans le jeu de caractères de la norme ISO 10646, les caractères sont identifiés par un nombre codé sur 4 octets, soit 32 bits. 1 octet (8 bits) va de 00 à FF en hexadécimal, donc 4 octets vont de 00000000 à FFFFFFFF. Ce jeu de caractères sur 4 octets constitue le jeu de caractères universel (UCS-4) appelé généralement Unicode. Les caractères ASCII sont codés entre 0000 et 007E. Les caractères de la norme ISO 8859-1 (ISO-Latin) sont codés entre 0000 et 00FF, les 128 premiers caractères de l'ISO-Latin étant commun avec les caractères ASCII. Les 65536 premières positions de l'UCS-4 (de 00000000 à 0000FFFF, donc sur 2 octets) suffisent largement pour les caractères courants. Elles forment l'UCS-2. Trois codages dits « codages de transformation » ont été définis : o UTF-16 réalise un pont entre UCS-2 et UCS-4 : il code l'UCS-2 (sur 2 octets) et permet de coder en UCS-2

certains caractères de l'UCS-4 a priori extérieurs au champ d’action de l’UCS-2 (des caractères qui nécessitent 3 ou 4 octets)

1 Une entité correspond à une sorte de variable. Il y a des entités internes au document XML et d’autres externes.

Page 9: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

9

o UTF-8 code l'UCS en utilisant le moins d'octets possible : un premier octet précise combien il faut ensuite d'octets pour coder le caractère

o UTF-7 permet la transmission de caractères Unicode par les serveurs de courrier Internet.

UTF-8 est le codage par défaut utilisé par les applications XML Conséquences : o En UTF-8, on code les caractères spéciaux par leur valeur numérique (cf annexe 1). o Si l'on souhaite utiliser le codage de caractères français (ISO-Latin) avec les lettres accentuées, il faut le

spécifier : <?xml version="1.0" encoding="ISO-8859-1"?>

Les DTD (Document Type Definition)

Une définition type de document (Document Type Definition ou DTD) décrit ce qui est autorisé dans une classe particulière de documents XML. Il existe un grand nombre de DTD décrivant la structure de documents bibliographiques, mathématiques, etc. La DTD décrit les éléments types, c’est-à-dire donne : o les noms de tous les éléments et leur modèle de contenu o les attributs pour chaque élément (nom, type et valeur par défaut) o les entités pouvant être incluses dans un document o les notations qui servent à identifier les types spécifiques de données externes, etc. Un document peut avoir une DTD externe, une DTD interne ou à la fois une DTD interne et une DTD externe. Dans ce cas, la DTD totale est la réunion des deux DTD. Une DTD externe a pour avantage de pouvoir contenir des déclarations générales utiles à un ensemble de documents : les déclarations d'éléments, la liste des attributs, les déclarations d'entités dont chaque document peut avoir besoin. Une DTD interne contient des déclarations spécifiques au document : par exemple, les déclarations des entités spécifiques graphiques, les déclarations d'attributs et entités supplémentaires servant uniquement au document. La DTD interne a priorité sur la DTD externe, ce qui permet de modifier localement un document, mais la DTD interne n'a aucun effet sur les autres documents faisant référence à la DTD externe.

DTD interne

L'attribut standalone prend dans la déclaration XML la valeur "yes" : <?xml version="1.0" standalone="yes"> Le sous-ensemble interne de la DTD suit : <!DOCTYPE racine [sous_ensemble_interne] >

inventaire04.xml inventaire02.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Inventaire02.css"?> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (INTITULE?, LIVRE+)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, PAGES, PRIX)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT TITRE (#PCDATA)> <!ELEMENT AUTEUR (#PCDATA)> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> ]>

/* Inventaire02.css */ INTITULE {display:block; font-size:14pt; font-weight:bold} LIVRE {display:block; margin-top:12pt; font-size:10pt}

Page 10: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

10

<!-- Nom de fichier : Inventaire04.xml --> <INVENTAIRE> <INTITULE>Bibliographie sur XML</INTITULE> <LIVRE> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML &#233;tape par &#233;tape</TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE> <TITRE>XML Langage et applications</TITRE> <AUTEUR>Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} AUTEUR {display:block; margin-left:15pt; font-weight:bold} EDITEUR {display:block; margin-left:15pt; font-style:italic} PAGES {display:none} PRIX {display:block; margin-left:15pt}

<!ELEMENT LIVRE (TITRE, AUTEUR, EDITEUR, PAGES, PRIX)> signifie qu’un élément de type LIVRE se décompose en éléments obligatoires TITRE, AUTEUR, EDITEUR, PAGES, PRIX. PCDATA signifie données parsées (données caractères analysées). Les indicateurs d'occurrences sont :

? : zéro ou une fois * : zéro ou n fois + : au moins une fois Passez Inventaire04.xml au validateur http://validator.w3.org. Cette fois, le document est accepté comme document XML valide.

film01.xml film01.css

<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Film01.css"?> <!DOCTYPE CATALOGUE [ <!ELEMENT CATALOGUE (INTITULE?, FILM+)> <!ELEMENT FILM (TITRE, REALISATEUR+, ACTEUR*)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT TITRE (#PCDATA)> <!ELEMENT REALISATEUR (#PCDATA)> <!ELEMENT ACTEUR (#PCDATA)> ]> <!-- Nom de fichier : Film01.xml --> <CATALOGUE>

<INTITULE>Catalogue de films</INTITULE> <FILM>

<TITRE>Apocalypse Now</TITRE> <REALISATEUR>Francis Ford Coppola</REALISATEUR> <ACTEUR>Martin Sheen</ACTEUR> <ACTEUR>Marlon Brando</ACTEUR>

</FILM> <FILM>

<TITRE>La nuit Am&#233;ricaine</TITRE> <REALISATEUR>Francois Truffaut</REALISATEUR> <ACTEUR>Jean-Pierre L&#233;aud</ACTEUR> <ACTEUR>Jacqueline Bisset</ACTEUR>

</FILM> </CATALOGUE>

/* Nom de fichier : Film01.css */ INTITULE {display:block; font-size:14pt; font-weight:bold} FILM {display:block; margin-top:12pt; font-size:10pt} TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} REALISATEUR {display:block; margin-left:15pt; font-weight:bold} ACTEUR {display:block; margin-left:15pt; font-style:italic}

Passez film01.xml au validateur http://validator.w3.org. Son contenu correspond-t-il bien à la DTD ?

Page 11: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

11

inventaire05.xml inventaire05.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Inventaire05.css"?> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (INTITULE?, LIVRE+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, PAGES, PRIX)> <!ATTLIST LIVRE enStock (oui|non) #REQUIRED> <!ELEMENT TITRE (#PCDATA|SOUSTITRE)*> <!ELEMENT SOUSTITRE (#PCDATA)> <!ELEMENT AUTEUR (#PCDATA)> <!ATTLIST AUTEUR nationalite CDATA #IMPLIED> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> ]> <!-- Nom de fichier : Inventaire05.xml --> <INVENTAIRE> <INTITULE>Bibliographie sur XML</INTITULE> <LIVRE enStock="oui"> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML &#233;tape par &#233;tape <SOUSTITRE>Auto-formation</SOUSTITRE> </TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML Langage et applications</TITRE> <AUTEUR nationalite="France">Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

/* Nom de fichier : Inventaire05.css */ INTITULE {display:block; font-size:14pt; font-weight:bold} LIVRE {display:block; margin-top:12pt; font-size:10pt} TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} SOUSTITRE {display:block; font-size:10pt; font-style:italic} AUTEUR {display:block; margin-left:15pt; font-weight:bold} EDITEUR {display:block; margin-left:15pt; font-style:italic} PAGES {display:none} PRIX {display:block; margin-left:15pt}

Les attributs peuvent être facultatifs (#IMPLIED) ou obligatoires (#REQUIRED). Ils apparaissent uniquement dans la balise ouvrante d'un élément sous la forme attribut="valeur" ou attribut='valeur'. Une section CDATA contient les caractères qui ne seront pas analysés comme des marqueurs XML. Passez inventaire05.xml au validateur http://validator.w3.org. Son contenu correspond-t-il bien à la DTD ?

film02.xml film01.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Film01.css"?> <!DOCTYPE CATALOGUE [ <!ELEMENT CATALOGUE (INTITULE?, FILM+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT FILM (TITRE, REALISATEUR+, ACTEUR*)> <!ELEMENT TITRE (#PCDATA)> <!ELEMENT REALISATEUR (#PCDATA)> <!ELEMENT ACTEUR (#PCDATA)> <!ATTLIST FILM type CDATA "fiction" annee CDATA #REQUIRED> ]> <!-- Nom de fichier : Film02.xml -->

/* Film01.css */ INTITULE {display:block; font-size:14pt; font-weight:bold} FILM {display:block; margin-top:12pt; font-size:10pt}

Page 12: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

12

<CATALOGUE> <INTITULE>Catalogue de films</INTITULE> <FILM type="histoire" annee="1979">

<TITRE>Apocalypse Now</TITRE> <REALISATEUR>Francis Ford Coppola</REALISATEUR> <ACTEUR>Martin Sheen</ACTEUR> <ACTEUR>Marlon Brando</ACTEUR>

</FILM> <FILM annee="1970">

<TITRE>La nuit Am&#233;ricaine</TITRE> <REALISATEUR>Francois Truffaut</REALISATEUR> <ACTEUR>Jean-Pierre L&#233;aud</ACTEUR> <ACTEUR>Jacqueline Bisset</ACTEUR>

</FILM> </CATALOGUE>

TITRE {display:block; font-size:12pt; font-weight:bold; font-style:italic} REALISATEUR {display:block; margin-left:15pt; font-weight:bold} ACTEUR {display:block; margin-left:15pt; font-style:italic}

Passez film02.xml au validateur http://validator.w3.org. Son contenu correspond-t-il bien à la DTD ?

Exercice 2

Reprendre le fichier annuaire02.xml et l’enregistrer sous le nom annuaire03.xml. Le compléter en lui ajoutant une DTD interne précisant qu’un annuaire comporte un certain nombre de personnes, qu’une personne a une identité, une adresse, mais pas nécessairement un téléphone, et en spécifiant le type des données. Passer ensuite annuaire03.xml au validateur.

DTD externe

La DTD externe est placée dans un fichier séparé. Dans ce cas, l'attribut standalone prend dans la déclaration XML la valeur "no" <?xml version="1.0" standalone="no"> Deux déclarations sont possibles : <!DOCTYPE racine SYSTEM "url">

SYSTEM indique que la DTD est stockée à l'adresse précisée. Exemple : <!DOCTYPE racine SYSTEM "http://www.serveur.fr/racine.dtd">

<!DOCTYPE racine PUBLIC "identifiant_public" "url">

PUBLIC est utilisé quand la DTD est largement diffusée, c’est-à-dire quand il s’agit d’une norme ou d’une DTD enregistrée sous forme de norme ISO par son auteur ; dans ce cas, le processeur XML utilise son nom pour retrouver cette DTD et, en cas d'échec, il utilise l'url.

Nous utiliserons ici essentiellement les DTD que nous définissons nous-mêmes (donc déclarées par racine SYSTEM).

film03.xml film01.css <?xml version="1.0" standalone="no" ?> <?xml-stylesheet type="text/css" href="Film01.css"?> <!DOCTYPE CATALOGUE SYSTEM "catalogue.dtd"> <!-- Nom de fichier : Film03.xml --> <CATALOGUE>

<INTITULE>Catalogue de films</INTITULE> <FILM type="histoire" annee="1979">

<TITRE>Apocalypse Now</TITRE> <REALISATEUR>Francis Ford Coppola</REALISATEUR> <ACTEUR>Martin Sheen</ACTEUR> <ACTEUR>Marlon Brando</ACTEUR>

</FILM> <FILM annee="1970">

<TITRE>La nuit Am&#233;ricaine</TITRE> <REALISATEUR>Francois Truffaut</REALISATEUR> <ACTEUR>Jean-Pierre L&#233;aud</ACTEUR> <ACTEUR>Jacqueline Bisset</ACTEUR>

</FILM> </CATALOGUE>

/* Film01.css */ INTITULE{display:block; font-size:14pt; font-weight:bold} FILM{display:block; margin-top:12pt; font-size:10pt} TITRE{display:block; font-size:12pt; font-weight:bold; font-style:italic} REALISATEUR {display:block; margin-left:15pt; font-weight:bold} ACTEUR {display:block; margin-left:15pt; font-style:italic}

Page 13: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

13

catalogue.dtd <!ELEMENT CATALOGUE (INTITULE?, FILM+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT FILM (TITRE, REALISATEUR+, ACTEUR*)> <!ELEMENT TITRE (#PCDATA)> <!ELEMENT REALISATEUR (#PCDATA)> <!ELEMENT ACTEUR (#PCDATA)> <!ATTLIST FILM type CDATA "fiction" annee CDATA #REQUIRED>

DTD externe et interne

L'attribut standalone prend dans la déclaration XML la valeur "no" <?xml version="1.0" standalone="no"> La DTD suit : <!DOCTYPE racine SYSTEM|PUBLIC "url" partie externe [sous_ensemble_interne] partie interne > Nous n’utiliserons pas ici de DTD à la fois externe et interne.

Exercice 3

Reprendre le fichier annuaire03.xml, l’enregistrer sous le nom annuaire04.xml puis extraire sa DTD et l’enregistrer sous le nom annuaire.dtd. Faire appel dans annuaire04.xml à cette DTD externe. Remarque : on ne peut plus vérifier avec le validateur que le document est valide. D’autres outils (tel qu’un éditeur XML) sont alors nécessaires.

Contenu d’une DTD

Eléments

Un élément (qui se présente sous forme de balise dans le document XML) permet de structurer le document (un livre est un élément d'un document bibliothèque, P, H1, FORM... sont des éléments de HTML, etc). Dans une DTD, la déclaration d'un élément est de la forme : <!ELEMENT nom_element modele_de_contenu> Un élément vide ne contient aucun texte, aucun autre élément, comme les éléments HR, BR, IMG… dans les pages HTML. Dans une DTD, il est déclaré sous la forme : <!ELEMENT nom_element EMPTY> Un élément non vide est formé dans le document XML d'une balise ouvrante, d'un contenu et d'une balise fermante. Pour décrire le contenu dans la DTD on utilise le modèle de contenu dans la déclaration de l'élément. Si l'élément contient uniquement des données (autrement dit, s'il n'y a aucun autre élément inclus dans cet élément) on utilise le type #PCDATA qui signifie Parsed Character DATA c’est-à-dire données caractères analysées <!ELEMENT nom_element (#PCDATA)> Si l'élément contient uniquement d'autres éléments, le modèle de contenu définit les éléments pouvant être inclus dans un élément donné. Les indicateurs d'occurrences sont :

? : 0 ou 1 fois * : 0 ou n fois + : au moins une fois Les parenthèses dans la déclaration d'un élément introduisent les éléments fils de l'élément défini. L'ordre dans lequel les éléments sont précisés est l'ordre dans lequel ils doivent apparaître dans l'élément en cours de définition : <!ELEMENT MONTAGNE (NOM, PAYS, HAUTEUR)> Pour indiquer des choix, on utilise le | : <!ELEMENT ENFANT (GARCON | FILLE)> Si l'élément a un contenu mixte (données + éléments) on utilise PCDATA et les éléments imbriqués. Un élément libre peut contenir n’importe quoi : <!ELEMENT nom_element ANY>

Page 14: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

14

Attributs

Les listes d’attributs (noms des attributs, type de donnée de chaque attribut, caractère obligatoire ou pas, valeur par défaut) sont déclarées sous la forme : <!ATTLIST nom_type_element définitions_attributs> définitions_attributs a trois composants par attribut : le nom, le type, une déclaration qui dit si cet attribut est obligatoire ou facultatif. Exemple : on a déclaré l’élément FILM par : <!ELEMENT FILM (TITRE, REALISATEUR)> On écrit alors, pour définir deux attributs Classe et Annee pour chacun des éléments de type FILM, <!ATTLIST FILM Classe CDATA "fiction" Annee CDATA #REQUIRED> La déclaration d’obligation peut être une valeur par défaut ("fiction" ci-dessus), qui peut être modifiée dans le contenu de la page, ou bien :

#REQUIRED : obligatoire #IMPLIED : facultatif #FIXED : valeur fixée

Quelques types d'attributs Valeur de l'attribut CDATA l'attribut sera une chaîne littérale dans laquelle < et >

seront considérés comme des caractères (et pas des limites de balises)

ENTITY l'attribut prendra comme valeur le nom d'une entité (nom d'une image, par exemple)

ID et IDREF l'attribut permettra de créer des renvois à l'intérieur du document

type énuméré l'attribut pourra prendre une des valeurs citées dans une liste

Entités internes

Une entité interne est contenue dans le document XML courant et correspond à une sorte de variable. On l’appelle dans un document XML par la notation &nom_entite; Les seules entités internes réservées sont au nombre de cinq : &amp; &lt; &gt; &quot; &apos; correspondant respectivement à l’esperluette &, le signe < , le signe > , les guillemets " et les apostrophes '. Le codage des documents XML est, sauf précision du contraire, supposé être le codage UTF-8. Les caractères spécifiques (lettres accentuées, cédilles…) doivent être remplacés par une entité qui en donne le code. Exemple : &#233 ; pour la lettre accentuée é (cf annexe 1). En spécifiant le codage "ISO-8859-1" (ISO-Latin), on peut utiliser directement les lettres accentuées, mais le fichier n’est plus universel (il ne peut être lu que si les caractères ISO-Latin sont installés sur l’ordinateur) :

codage.xml codage.css <?xml version="1.0" encoding="ISO-8859-1" ?> <?xml-stylesheet type="text/css" href="codage.css"?> <article> Avec ce mode de codage, les lettres accentuées sont représentées normalement. </article>

article {display:block; font-family:helvetica, sans-serif;}

On peut définir ses propres entités par le biais de la DTD. Si une entité est définie dans une DTD sous le nom nom_entite, on l'appelle dans le document XML par &nom_entite; Exemple : dans une DTD, on peut déclarer le caractère ° par : <!ENTITY deg "&#176;"> ; dans le document XML, on utilisera alors &deg; pour dire : il fait 20&deg;C.

Page 15: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

15

Entités paramètres

Une entité paramètre est définie sous la forme : <!ENTITY % nomEntité valeurEntité> où valeurEntité fait référence à un emplacement sur le Web où se trouve cette entité. On déclare qu’on va enuite l’utiliser en spécifiant %nomEntité; dans la DTD. Exemple : dans la DTD suivante, codage2.dtd, on a défini une entité paramètre publique de nom HTMLlat1 ; cette entité, qui a longtemps été disponible sur le Web à l’adresse http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent, donnait la liste des caractères de l’ISO-latin1 codés en HTML (é codé &eacute; par exemple). On précisait ensuite qu’on allait l’utiliser en spécifiant %HTMLlat1; dans la DTD :

codage2.dtd <!ENTITY % HTMLlat1 PUBLIC "-//W3C//ENTITIES Latin 1 for XHTML//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent"> %HTMLlat1; <!ELEMENT article (texte+)> <!ELEMENT texte (#PCDATA)>

Dans le fichier XML, on pouvait alors utiliser les caractères codés en UTF-8 et en HTML. Cette solution n’est malheureusement plus valide à présent suite à la surcharge du site du W3C. Pour exploiter les entités HTML, il faut à présent inclure directement dans la DTD le contenu du fichier HTMLlat1.ent qui définit les entités du HTML : voir codage2b.dtd.

codage2.xml codage2b.dtd codage2.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="codage2.css"?> <!DOCTYPE article SYSTEM "codage2b.dtd"> <article> <texte> Premier &#233; repr&#233;sent&#233; par une entit&#233; num&#233;rique, c-a-d. <![CDATA[#233;]]> </texte> <texte> Second &eacute; repr&eacute;sent&eacute; par une entit&eacute; de caract&egrave;res comme en HTML, c-a-d. <![CDATA[&eacute;]]> </texte> </article>

<!ENTITY nbsp "&#160;"> <!ENTITY iexcl "&#161;"> <!ENTITY cent "&#162;"> <!ENTITY pound "&#163;"> <!ENTITY curren "&#164;"> <!ENTITY yen "&#165;"> <!ENTITY brvbar "&#166;"> ... <!ENTITY thorn "&#254;"> <!ENTITY yuml "&#255;"> (contenu du fichier HTMLlat1.ent récupéré sur le site du W3C : http://www.w3.org/TR/REC-html40/sgml/dtd.html) <!ELEMENT article (texte+)> <!ELEMENT texte (#PCDATA)>

article {display: block; font-family:helvetica, sans-serif;} texte {display: block}

Entités externes

Les entités externes ne sont pas contenues dans le document courant. Elles peuvent être utilisées pour des fichiers images, sons, vidéo... Elles sont appelées comme valeur d'un attribut déclaré de type ENTITY dans la DTD et la déclaration d'entité doit spécifier une NOTATION déclarée, la notation décrivant le format des données.

Page 16: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

16

Exemple : extrait de DTD qui définit plage comme une notation JPEG et l'utilise comme valeur de l'attribut source de l'élément vide image : <!ELEMENT image EMPTY> <!NOTATION JPEG SYSTEM "Joint Photographic Experts Group"> <!ENTITY plage SYSTEM "plage.jpg" NDATA JPEG> <!ATTLIST image source ENTITY #REQUIRED>

L’appel dans le document se fait par : <image source="plage"/>

Les espaces de noms

Utiliser différentes DTD externes peut poser un problème : celui des conflits de noms, chaque DTD pouvant choisir librement des noms pour les éléments et attributs. Pour éviter ces conflits, on précise, pour chaque élément de l'arbre des contenus, à quel domaine nominal on se réfère grâce à l'attribut xmlns.

Espace de noms déclaré en ligne

L’espace de noms peut être spécifié sans qu’on lui donne d’appellation s’il est défini juste à côté de la balise qui l’utilise par <balise xmlns="adresse">. On dit que l’espace de noms est déclaré en ligne. Exemple dans la page doc2.xml où deux espaces de noms sont déclarés en ligne : o l’espace de noms html : <html xmlns="http://www.w3.org/1999/xhtml" lang="en"

xml:lang="en"> qui se réfère au XHTML

o l’espace de nom math : <math xmlns="http://www.w3.org/1998/Math/MathML"> qui se réfère au MathML pour écrire les formules mathématiques.

doc2.xml

<?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>MathML Square</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup> <mfenced> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> </mfenced> <mn>2</mn> </msup> </mrow> </math> </body> </html>

Espace de noms nommé

Mais l’espace de noms peut aussi être spécifié en lui donnant une appellation. Cela se fait alors directement dans l’élément racine.

Page 17: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

17

Exemple dans le fichier XML ci-dessous où l’on nomme explicitement dans la balise racine RAPPORT deux espaces de noms : o math pour MathML : xmlns:math="http://www.w3.org/1999/07/REC-MathML-

19990707/"

o bt pour Basic-text : xmlns:bt="http://foo.bar.org/xml/schemas/Basic-text.dtd" <?xml version="1.0"?> <!DOCTYPE RAPPORT SYSTEM "rapport.dtd"> <RAPPORT xmlns:math="http://www.w3.org/1999/07/REC-MathML-19990707/" DTD de MathML xmlns:bt="http://foo.bar.org/xml/schemas/Basic-text.dtd" DTD de Basic-text > <math:fn> tout ce qui est préfixé par math sera du MathML ... </math:fn>

<bt:fn> tout ce qui est préfixé par bt sera du Basic-text ... </bt:fn> </RAPPORT> MathML.dtd permet d’afficher des expressions mathématiques. Basic-text.dtd, DTD permettant la déclaration des éléments textuels classiques comme des paragraphes, des renvois, des citations, etc. A noter : le Dublin-core.dtd est une DTD universellemetn connue, spécifiant la déclaration d'éléments permettant l'indexation de documents sur les serveurs Internet : titre, auteur, sujet, format du document, etc (http://dublincore.org/documents/dces/). Exemple d’espace de nom nommé : dans un document XML, employer toutes les balises HTML à condition : o d'avoir spécifié dans la balise racine que l'on utilise l’espace de nom HTML o de préfixer toutes les balises du HTML par html. Exemple pour utiliser dans un fichier XML la balise <img ...> du HTML 4.0 :

image.xml image.dtd image.css <?xml version="1.0"?> <!DOCTYPE article SYSTEM "image.dtd"> <?xml-stylesheet type="text/css" href="image.css"?> <article xmlns:html="http://www.w3.org/TR/REC-html40"> <texte> Pr&#233;sentation d'une image... <image> <html:img src="im1.JPG" /> <legende>L&#233;gende de la photo</legende> </image> </texte> </article>

<!ELEMENT article (texte+)> <!ELEMENT texte (#PCDATA|image)*> <!ELEMENT image (#PCDATA | legende)*> <!ELEMENT legende (#PCDATA)>

article {display: block; font-family:helvetica, sans-serif;} texte {display: block } image {display: block; margin-top: 20pt ; border-width: thin; text-align: center; border-style: solid;} legende {display: block; text-align: center; padding-right: 2mm; padding-top: 2mm; padding-bottom: 2mm; padding-left: 2mm}

Page 18: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

18

Les DTD de XHTML

XHTML est une norme accessible à l’adresse http://www.w3.org/TR/2001/WD-xhtml1-20011004/ qui étend et modifie la norme HTML 4, allant dans le sens d'une compatibilité avec XML : les documents XHTML sont des documents XML, écrits en HTML en respectant les règles de XML. Un document XHTML doit vérifier les critères suivants : o Il doit y avoir une déclaration DOCTYPE dans le document avant la déclaration de l'élément racine. Cette

déclaration doit faire référence à l'une des trois DTD existantes : xhtml-strict.dtd : XHTML strict (la plus utilisée) loose.dtd : XHTML plus « souple » (pour garder la compatibilité avec les anciens fichiers) frameset.dtd : XHTML pour frame (à éviter à l’avenir)

o L'élément racine doit être html et préciser que l'espace de noms est l'espace de noms XHTML en utilisant

l'attribut xmlns : <html xmlns="http://www.w3.org/1999/xhtml">

o Le document XHTML doit ensuite impérativement se conformer à la DTD choisie. Exemple de fichier XHTML Il s’affiche comme un fichier XML car il n’est PAS accompagné d’une feuille de style.

doc1.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html SYSTEM "xhtml-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head><title>Fichier XHTML</title></head> <body> <p>Ceci est un fichier XHTML. Il convient de modifier certaines balises HTML en respectant les conventions XML.<br /> Cela concerne notamment les balises dites vides, les attributs qui doivent se trouver entre guillemets et l'emboitement des balises.</p> </body> </html> Différences entre XHTML et HTML 4 (liste non exhaustive) o Les documents doivent être bien formés (voir règles) ; le chevauchement des balises est donc interdit. o Les noms d'éléments (donc les balises) et les noms d'attributs doivent être en minuscules o Les éléments vides doivent avoir une balise de fin ou alors se terminer par / : <br></br> ou <br /> o Les balises de fin sont impératives pour les éléments non vides. o Les valeurs des attributs doivent toujours figurer entre guillemets ou apostrophes (même les numériques). o La minimalisation est interdite : les paires attribut=valeur doivent toujours être entièrement écrites.

Exemple : <dl compact="compact"> et non <dl compact>

o Les scripts et les éléments de style CSS doivent être déclarés comme ayant un contenu de type DATA. Exemple : <script type="text/javascript">

<![CDATA[ contenu du script

]]> </script>

Page 19: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

19

Exercice 4

Ouvrir le fichier Tableau.html.

Tableau.html <HTML> <HEAD><TITLE>tableau</TITLE></HEAD> <BODY> <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=10> <CAPTION ALIGN="bottom"><B>Tableau</B></CAPTION> <TR ALIGN="center"> <TD><A HREF="http://www.cern.ch">CERN</A></TD> <TD>Texte</TD> <TD></TD> </TR> <TR> <TD>Texte</TD> <TD><UL><LI>un<LI>deux<LI>trois</UL></TD> <TD ALIGN="center"><A HREF="http://www.in2p3.fr">Texte</A></TD> </TR> <TR> <TD ALIGN="center"><I>Entrez<BR>votre nom</TD> <TD ALIGN="left"><FORM METHOD="post" ACTION="aucune"> <INPUT NAME="nom"></TD> <TD ALIGN="center"> <INPUT TYPE="submit" VALUE="clic!"></TD> </FORM> </TR> </TABLE> </BODY> </HTML>

En faire une copie sous le nom Tableau.xml puis modifiez le contenu de ce fichier pour qu'il devienne un code XHTML. Pour cela, 1) écrire dans l'en-tête : <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html SYSTEM "xhtml-strict.dtd"> 2) Remplacer <HTML> par <html xmlns='http://www.w3.org/1999/xhtml'> 3) Modifier les balises en respectant les règles du XHTML jusqu'à ce que le navigateur accepte le fichier.

Feuilles de style XSL

Les feuilles de style XSL (EXtensible Style Language) sont elles-mêmes des documents XML. Elles offrent des potentialités bien supérieures à celles des feuilles de style CSS, car on peut réordonner des éléments, itérer un processus, faire des choix, etc. Le processeur XML procède en deux étapes lors de l’analyse d’un document accompagné d’une feuille de style XSL : o il transforme le document en un arbre de document et peut refondre entièrement sa structure :

réorganiser le document, en cacher des parties, convertir des tableaux en graphiques, etc. Pour générer cet arbre, la feuille XSL doit définir des règles qui associent un sélecteur et une forme à générer. Le sélecteur permet de déclencher l'application de la règle ; la forme définit la structure qui va être générée lorsque la règle sera activée.

o il analyse ensuite l'arbre généré pour interpréter les éléments et attributs qui définissent le formatage

physique.

A noter : les éléments HTML utilisables dans une feuille de style XSL forment un sous-ensemble de la version "stricte" de HTML (cf annexe 2).

Page 20: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

20

Utilisation de feuilles de style XSL prédéfinies

La feuille de style mathml.xsl permet de faire afficher les expressions mathématiques écrites en MathML. On y fait appel par : <?xml-stylesheet type='text/xsl' href='mathml.xsl'?>

doc2b.xml <?xml version="1.0"?> <?xml-stylesheet type='text/xsl' href='mathml.xsl'?> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>MathML Square</title></head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup> <mfenced> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> </mfenced> <mn>2</mn> </msup> </mrow> </math> </body> </html>

La feuille de style mathml.xsl charge les fichiers XSL annexes dont elle a besoin : ctop.xsl, pmathml.xsl et pmathmlcss.xsl. Certains navigateurs acceptent immédiatement le MathML (Firefox notamment). Pour Internet Explorer, il faut télécharger le plugin MathPlayer. Avec ce plugin, Internet Explorer affiche correctement l’expression mathématique (voir illustration ci-contre). A chaque session, le navigateur signale qu’il lance le player la première fois qu’il rencontre une balise MathML.

Quelques éléments de la syntaxe XSL

L'élément racine d'une feuille de style XSL est obligatoirement une PI (Processor Instruction) : <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> ... ... contenu de la feuille de style ... </xsl:stylesheet> doit impérativement terminer le document XSL. L’espace de nom associé est nommé : il s’appelle xsl et se refère à la DTD "modèle" de XSL à l’adresse http://www.w3.org/1999/XSL/Transform. Toutes les balises se référant à cet espace de noms devront donc obligatoirement commencer par <xsl:

Page 21: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

21

Les règles existantes sont les suivantes :

Eléments (règles) Signification <xsl:stylesheet ...> ... ... </xsl:stylesheet>

règle (élément racine du document XSL) qui précise ce que produit ce document XSL la fermante est la dernière ligne du fichier XSL

<xsl:template match="critère"> ... ... </xsl:template>

règle qui précise ce qui doit être produit en sortie pour tout élément vérifiant le critère ; si le critère est "/", cela concerne l'ensemble du document

<xsl:value-of select="critère" /> règle qui produit directement en sortie le contenu de l'élément spécifié par le critère (balise vide)

<xsl:for-each select="critère1" order-by="critère2"> ... ... </xsl:for-each>

règle qui itère sur tous les éléments satisfaisant le critère Il faut préciser ce qui doit être produit pour chacune des occurrences des éléments sélectionnés

<xsl:apply-templates select="critère" /> règle disant qu'on n'applique que les règles qui portent sur les sous-éléments de l'élément précisés par le critère (balise vide)

<xsl:apply-templates /> règle disant que toutes les règles portant sur tous les sous-éléments de l'élément courant doivent être appliquées (balise vide)

<xsl:if test="expression-booléenne"> ... ... </xsl:if>

règle disant ce que l'on fait si l'expression booléenne est évaluée à vrai

<xsl:choose> <xsl:when test="expression-booléenne"> ... ... </xsl:when> <xsl:when test="expression-booléenne"> ... ... </xsl:when> <xsl:otherwise> ... ... </xsl:otherwise> </xsl:choose>

if généralisé Permet de tester plusieurs conditions et d'avoir une alternative lorsque tous les tests échouent.

<xsl:element name="nomElement"> ... ... </xsl:element>

règle qui produit en sortie un élément du nom indiqué. On peut y imbriquer des éléments xsl:attribute.

<xsl:attribute name="nomAttribut"> ... ... </xsl:attribute>

règle qui produit en sortie un attribut qui sera inséré dans l'élément de sortie courant.

Exemples

1. Fichier XSL affichant toutes les informations d’un fichier XML en spécifiant exclusivement les styles associés aux différentes balises. Les balises HTML utilisables figurent en annexe 2.

Page 22: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

22

A noter : la balise SPAN de HTML, autorisée, n'a pas de signification par elle-même, elle sert exclusivement à spécifier des attributs temporaires.

inventaire07.xml inventaire07.xsl <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="inventaire07.xsl"?> <!-- Nom de fichier : inventaire07.xml --> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (LIVRE*)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, ANNEE, PAGES, PRIX)> <!ELEMENT TITRE (#PCDATA)> <!ELEMENT AUTEUR (#PCDATA)> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT ANNEE (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> ]> <INVENTAIRE> <LIVRE>

<TITRE>Introduction au XML</TITRE>

<AUTEUR>Simon St Laurent </AUTEUR>

<EDITEUR>Osman Eyrolles Multimedia</EDITEUR>

<ANNEE>2000</ANNEE> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX>

</LIVRE> </INVENTAIRE>

<?xml version="1.0"?> <!-- Nom de fichier Inventaire07.xsl --> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <H2>Description de livres</H2> <SPAN style="font-style:italic">Titre : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/TITRE"/><BR/> <SPAN style="font-style:italic">Auteur : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/AUTEUR"/><BR/> <SPAN style="font-style:italic">Editeur : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/EDITEUR"/><BR/> <SPAN style="font-style:italic">Annee : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/ANNEE"/><BR/> <SPAN style="font-style:italic">Nombre de pages : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/PAGES"/><BR/> <SPAN style="font-style:italic">Prix : </SPAN> <xsl:value-of select="INVENTAIRE/LIVRE/PRIX"/> </xsl:template> </xsl:stylesheet>

A noter : <xsl:template match="/"> ... </xsl:template> signale que tout ce qui figure entre ces deux instructions est ce qui doit être produit en sortie pour l'ensemble du document XSL (le "/" représente l'élément racine du document XSL). On récupère les valeurs de chacun des éléments du document XML par l'instruction : <xsl:value-of select="critère" /> où le critère est spécifié par rapport à l'élément INVENTAIRE, racine du document XML. "INVENTAIRE/LIVRE/..." sont des chemins répondant à la spécification XPath (http://www.w3.org/TR/1999/REC-xpath-19991116 sur le site du W3C). XPath est un langage permettant de pointer des parties de documents XML. 2. Fichier XSL sélectionnant les informations à afficher lors d'une itération

inventaire08.xml inventaire08.xsl <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="Inventaire08.xsl"?> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (INTITULE?, LIVRE+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, ANNEE, PAGES, PRIX)> <!ATTLIST LIVRE enStock (oui|non) #REQUIRED> <!ELEMENT TITRE (#PCDATA|SOUSTITRE)*> <!ELEMENT SOUSTITRE (#PCDATA)>

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- Nom de fichier Inventaire08.xsl --> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Bibliographie XML</TITLE> </HEAD>

Page 23: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

23

<!ELEMENT AUTEUR (#PCDATA)> <!ATTLIST AUTEUR nationalite CDATA #IMPLIED> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT ANNEE (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> <!ENTITY eacute "&#233;"> ]> <!-- Nom de fichier : Inventaire08.xml --> <INVENTAIRE> <INTITULE>Bibliographie sur XML</INTITULE> <LIVRE enStock="oui"> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <ANNEE>2000</ANNEE> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML &eacute;tape par &eacute;tape <SOUSTITRE>Auto- formation</SOUSTITRE></TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <ANNEE>1999</ANNEE> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML Langage et applications</TITRE> <AUTEUR nationalite="France">Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <ANNEE>2001</ANNEE> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

<BODY> <H2>Bibliographie XML</H2> <DIR>Auteur / Titre / Editeur / Année / En stock </DIR> <UL> <xsl:for-each select="INVENTAIRE/LIVRE"> <LI> <B><xsl:value-of select="AUTEUR" /></B> <I><xsl:value-of select="TITRE" /></I> <xsl:value-of select="EDITEUR" /> <xsl:value-of select="ANNEE" /> <xsl:value-of select="@enStock" /> </LI> </xsl:for-each> </UL> </BODY> </HTML> </xsl:template> </xsl:stylesheet>

A noter Sélection : seuls les éléments choisis dans les instructions : <xsl:value-of select="critère" /> sont affichés. Itération : une instruction <xsl:for-each select="INVENTAIRE/LIVRE"> permet d'itérer sur chaque livre. 3. Mêmes éléments affichés en tableau, en sélectionnant les seuls livres en stock "INVENTAIRE/LIVRE[@enStock='oui']" (notation XPath) sélectionne l'attribut enStock du noeud contextuel INVENTAIRE/LIVRE et demande que la valeur de l’attribut corresponde au critère.

inventaire08a.xml inventaire08a.xsl <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="Inventaire08a.xsl"?> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (INTITULE?, LIVRE+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, ANNEE, PAGES, PRIX)> <!ATTLIST LIVRE enStock (oui|non) #REQUIRED>

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- Nom de fichier Inventaire08a.xsl --> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Bibliographie XML</TITLE>

Page 24: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

24

<!ELEMENT TITRE (#PCDATA|SOUSTITRE)*> <!ELEMENT SOUSTITRE (#PCDATA)> <!ELEMENT AUTEUR (#PCDATA)> <!ATTLIST AUTEUR nationalite CDATA #IMPLIED> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT ANNEE (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> <!ENTITY eacute "&#233;"> ]> <!-- Nom de fichier Inventaire08a.xml --> <INVENTAIRE> <INTITULE>Bibliographie sur XML</INTITULE> <LIVRE enStock="oui"> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <ANNEE>2000</ANNEE> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML &eacute;tape par &eacute;tape <SOUSTITRE>Auto- formation</SOUSTITRE></TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <ANNEE>1999</ANNEE> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE> <LIVRE enStock="oui"> <TITRE>XML Langage et applications</TITRE> <AUTEUR nationalite="France">Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <ANNEE>2001</ANNEE> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE>

</HEAD> <BODY> <H2>Bibliographie XML</H2> <TABLE CELLPADDING="10" RULES="all"> <TR><TH>Auteur</TH><TH>Titre</TH><TH>Editeur</TH><TH>Année</TH><TH>En stock</TH></TR> <xsl:for-each select="INVENTAIRE/LIVRE[@enStock='oui']"> <TR> <TD><xsl:value-of select="AUTEUR" /></TD> <TD><xsl:value-of select="TITRE" /></TD> <TD><xsl:value-of select="EDITEUR" /></TD> <TD><xsl:value-of select="ANNEE" /></TD> <TD><xsl:value-of select="@enStock" /></TD> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet>

Exercice 5

S’inspirer des fichiers inventaire08a.xml et inventaire08a.xsl pour créer le fichier societe0.xsl permettant d’afficher les employés en deux tableaux : l’un concernant Nanterre, l’autre Le Blanc Mesnil. On donnera dans ces tableaux le nom de l’employé, le numéro de son bureau et son téléphone.

Appel aux règles relatives aux sous-éléments d'un élément

article.xml article.xsl article.css <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE article [ <!ELEMENT article (titre, auteur, date, lieu, texte)> <!ELEMENT titre (#PCDATA)> <!ELEMENT auteur (#PCDATA)> <!ELEMENT date (#PCDATA)> <!ELEMENT lieu (#PCDATA)> <!ELEMENT texte (paragraphe+)> <!ELEMENT paragraphe (#PCDATA)> ]>

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="article.css" /> <title><xsl:value-of select="article/titre" /> </title> </head>

p {text-align: center;} body {font-family:helvetica,sans-serif} h1 {display: block; font-size: 20pt; text-align: center;

Page 25: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

25

<?xml-stylesheet type="text/xsl" href="article.xsl"?> <article xmlns:html="http://www.w3.org/TR/REC-html40"> <titre>Titre de l'article </titre> <auteur>Patrick Dubois </auteur> <date>20 juin 2001</date> <lieu>New-York</lieu> <texte> <paragraphe> paragraphe1 </paragraphe> <paragraphe> paragraphe2 </paragraphe> <paragraphe> paragraphe3 </paragraphe> </texte> </article>

<body> <h1><xsl:value-of select="article/titre" /></h1> <p> <strong><xsl:value-of select="article/auteur" /></strong> <br /> <em><xsl:value-of select="article/date" /></em> <strong><xsl:value-of select="article/lieu" /></strong> </p> <xsl:apply-templates select="article/texte" /> </body> </html> </xsl:template> <xsl:template match="texte"> <xsl:apply-templates /> </xsl:template> <xsl:template match="paragraphe"> <p><xsl:value-of select="."/></p> </xsl:template> </xsl:stylesheet>

border-width: medium; border-style: groove}

A noter : L'instruction <xsl:apply-templates select="article/texte" /> signale que parmi les règles portant sur les sous-éléments de l'élément courant (qui est pour l'instant la racine), il faut uniquement appliquer les règles correspondantes à l'élément texte, qui se trouve presque en fin de fichier. La règle <xsl:template match="texte"><xsl:apply-templates /></xsl:template> relative à texte précise qu'il faut appliquer toutes les règles possibles à tous les éléments fils de texte (donc ici aux éléments paragraphe). La règle applicable à paragraphe figure en fin de fichier. Elle spécifie comment afficher un paragraphe : <xsl:template match="paragraphe">

<p><xsl:value-of select="." /></p> </xsl:template> Le formatage est précisé ici par une feuille de style CSS (facultatif) puisque le fichier XSL contient la déclaration <link rel="stylesheet" type="text/css" href="article.css" />

Exercice 6

S'inspirer du document article.xml pour créer un document journal.xml où un journal comporte un intitulé et plusieurs articles. S'inspirer du fichier article.xsl pour créer le fichier journal.xsl qui fait afficher l'intitulé du journal et tous les articles (voir ci-contre). On pourra incorporer le contenu de la feuille de style article.css dans journal.css.

Page 26: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

26

Exercice 7

Récupérer le fichier Plan.xml. Le faire afficher par le navigateur. Ecrire une DTD externe correspondant à ce fichier. Associer au fichier Plan.xml une feuille de style Plan.xsl et une feuille de style Plan.css afin d’obtenir l’affichage du document tel que montré ci-contre.

Instructions conditionnelles

Inventaire10.xml Inventaire10.xsl <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="Inventaire10.xsl"?> <!DOCTYPE INVENTAIRE [ <!ELEMENT INVENTAIRE (INTITULE?, LIVRE+)> <!ELEMENT INTITULE (#PCDATA)> <!ELEMENT LIVRE (TITRE, AUTEUR+, EDITEUR, ANNEE, PAGES, PRIX)> <!ATTLIST LIVRE enStock (oui|non) #REQUIRED> <!ELEMENT TITRE (#PCDATA|SOUSTITRE)*> <!ELEMENT SOUSTITRE (#PCDATA)> <!ELEMENT AUTEUR (#PCDATA)> <!ATTLIST AUTEUR nationalite CDATA #IMPLIED> <!ELEMENT EDITEUR (#PCDATA)> <!ELEMENT ANNEE (#PCDATA)> <!ELEMENT PAGES (#PCDATA)> <!ELEMENT PRIX (#PCDATA)> <!ENTITY eacute "&#233;"> ]> <!-- Nom de fichier : Inventaire10.xml --> <INVENTAIRE> <INTITULE>Bibliographie sur XML</INTITULE> <LIVRE enStock="oui"> <TITRE>Introduction au XML</TITRE> <AUTEUR>Simon St Laurent</AUTEUR> <EDITEUR>Osman Eyrolles Multimedia</EDITEUR> <ANNEE>2000</ANNEE> <PAGES>364</PAGES> <PRIX>FF 175.00</PRIX> </LIVRE> <LIVRE enStock="non"> <TITRE>XML &eacute;tape par &eacute;tape <SOUSTITRE>Auto-formation </SOUSTITRE></TITRE> <AUTEUR>Michael J. Young</AUTEUR> <EDITEUR>Microsoft Press</EDITEUR> <ANNEE>1999</ANNEE> <PAGES>390</PAGES> <PRIX>FF 149.00</PRIX> </LIVRE>

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- Nom de fichier Inventaire10.xsl --> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Bibliographie XML</TITLE> </HEAD> <BODY> <H2>Bibliographie XML</H2> <TABLE CELLPADDING="10" RULES="all"> <TR><TH>Auteur</TH><TH>Titre</TH><TH>Editeur</TH><TH>Année</TH><TH>En stock</TH></TR> <xsl:for-each select="INVENTAIRE/LIVRE"> <xsl:if test = "self::node()[@enStock='oui']"> <TR> <TD><xsl:value-of select="AUTEUR" /></TD> <TD><xsl:value-of select="TITRE" /></TD> <TD><xsl:value-of select="EDITEUR" /></TD> <TD><xsl:value-of select="ANNEE" /></TD> <TD><xsl:value-of select="@enStock" /></TD> </TR> </xsl:if> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet>

Page 27: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

27

<LIVRE enStock="oui"> <TITRE>XML Langage et applications</TITRE> <AUTEUR nationalite="France"> Alain Michard</AUTEUR> <EDITEUR>Eyrolles</EDITEUR> <ANNEE>2001</ANNEE> <PAGES>362</PAGES> <PRIX>FF 235.00</PRIX> </LIVRE> </INVENTAIRE> self::node() est un chemin XPath correspondant au nœud courant. self::node()[@enStock='oui'] est un chemin XPath permettant de sélectionner le nœud courant si l’attribut enStock est égal à 'oui'.

Exercice 8

Récupérez les fichiers societe01.xml et societe01.xsl. Faites afficher la page societe01.xml par le navigateur. Modifiez ensuite le fichier societe01.xsl afin d’obtenir un affichage semblable à l’affichage ci-contre : Pour cela, précisez dans la partie principale de la feuille de style la règle :

<xsl:apply-templates select="bureau" /> et définissez ensuite trois règles spécifiques : <xsl:template match="bureau"> ... affichage du nom du site par : value-of select="@site" <xsl:apply-templates /> appel aux règles concernant les éléments de niveau inférieur </xsl:template> <xsl:template match="num-bureau"> ... affichage du mot Bureau et de son numéro </xsl:template> <xsl:template match="tel"> ... affichage de – Tel : et de son numéro </xsl:template> Enregistrez le fichier societe01.xml sous le nom societe02.xml. Enregistrez le fichier societe01.xsl sous le nom societe02.xsl. Dans societe02.xml, faites appel au fichier de style societe02.xsl. Modifiez ensuite le fichier societe02.xsl de telle sorte que l’on obtienne le résultat ci-contre. Enregistrez ensuite le fichier societe02.xml sous le nom societe03.xml et le fichier societe02.xsl sous le nom societe03.xsl.

Faites appel dans societe03.xml au fichier de style societe03.xsl, puis modifiez le fichier societe03.xsl en introduisant une règle :

<xsl:choose> ... </xsl:choose>

de telle sorte que l’affichage du fichier societe03.xml donne la liste des employés travaillant uniquement sur le site de Nanterre, comme le montre l’image ci-contre :

Page 28: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

28

Les schémas XML

Le langage DTD a des inconvénients : syntaxe différente de XML, problème des espaces de noms, etc. Le W3C a donc défini la notion de schéma, qui utilise la notation XML. On peut alors remplacer une DTD par un schéma, qui spécifie les mêmes informations que la DTD. Les schémas figurent dans des fichiers d'extension .xsd.

Exemple

article1.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="article1.css"?> <article xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="article1.xsd" xmlns:html="http://www.w3.org/TR/REC-html40"> <titre> Titre de l'article </titre> <auteur>Patrick Dubois</auteur> <date>20 juin 2001</date> <lieu>New-York</lieu> <texte> <paragraphe>Paragraphe 1 : texte du paragraphe 1 de l'article</paragraphe> <paragraphe>Paragraphe 2 : texte du paragraphe 2 de l'article</paragraphe> <paragraphe>Paragraphe 3 : texte du paragraphe 3 de l'article</paragraphe> <image> <html:img src="photo.gif" /> <legende>Legende de la photo</legende> </image> </texte> </article>

article1.xsd <?xml version="1.0" encoding="utf-8" ?> <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <xsd:import namespace="http://www.w3.org/1999/xhtml" /> <xsd:element name="article" > <xsd:complexType> <xsd:all> <xsd:element name="titre" type="xsd:string" /> <xsd:element name="auteur" type="xsd:string" /> <xsd:element name="date" type="xsd:string" /> <xsd:element name="lieu" type="xsd:string" /> <xsd:element name="texte" > <xsd:complexType mixed="true" > <xsd:choice minOccurs="0" maxOccurs="unbounded"> <xsd:element name="paragraphe" type="xsd:string" /> <xsd:element name="image" xmlns:html="http://www.w3.org/Profiles/XHTML-transitional" > <xsd:complexType > <xsd:sequence> <xsd:element ref="html:img" /> <xsd:element name="legende" type="xsd:string" minOccurs="0"/> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:choice> </xsd:complexType> </xsd:element> </xsd:all> </xsd:complexType> </xsd:element> </xsd:schema>

article1.css article { display: block; font-family:helvetica,sans-serif; } titre {display:block;font-size:200%;text-align:center;border-width:medium;border-style:groove} auteur { display: block; font-size: 80%; font-weight: bold; text-align: center; } date { display: block; font-size: 80%; font-style: italic ; text-align: center; } lieu { display: block; font-size: 80%; font-weight: bold; text-align: center;} texte { display: block } paragraphe { display: block; font-size: 80%;} image { display: block; border-width: thin; text-align: center;} legend {display:block;text-align:center;padding-right:2mm;padding-top:2mm;padding-bottom:2mm; padding-left:2mm }

Page 29: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

29

Exercice 9

Récupérez les fichiers bibliotheque.xml, bibliotheque.dtd et bibliotheque.xsl. Enregistrez le fichier bibliotheque.xml sous le nom bibliotheque1.xml, remplacez dans ce fichier l’inclusion de la DTD par l’inclusion d’un fichier bibliotheque1.xsd, puis créez le fichier bibliotheque1.xsd réalisant à l’aide de schémas la description du contenu du document bibliotheque1.xml.

Les liens XML (XLink)

Les liens XML offrent bien plus de possibilités que les liens HTML. La norme figure à l'adresse : http://www.w3.org/TR/xlink/

Un exemple

En HTML, la balise <a ...> définit un hyperlien. En XML, on donne les noms qu’on veut aux éléments. Il est donc impossible aux navigateurs, sur la seule vision d’une balise, de savoir qu’il s’agit d’un lien. La solution est donc de mettre un marqueur sur l’élément pour signaler qu’il est un lien : <auteur xlink:href="PatrickDubois.xml"...> L’espace de nom XLink est nommé et déclaré au début du document. Toute balise ou attribut faisant référence à XLink doit alors commencer par xlink: Dans le fichier ci-dessous, il s’agit d’attributs.

article2.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="article2.xsl"?> <!DOCTYPE article [ <!ELEMENT article (titre, auteur, date, lieu, texte)> <!ELEMENT titre (#PCDATA)> <!ELEMENT auteur (#PCDATA)> <!ELEMENT date (#PCDATA)> <!ELEMENT lieu (#PCDATA)> <!ELEMENT texte (paragraphe | image)+> <!ELEMENT paragraphe (#PCDATA)> <!ELEMENT image (lien | legende)*> <!ELEMENT lien ANY> <!ELEMENT legende (lien)*> ]> <article xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> <titre>Titre de l'article</titre> <auteur xlink:href="PatrickDubois.xml" xlink:type="simple" xlink:show="replace" xlink:actuate="OnRequest" xlink:title="Homepage"> Patrick Dubois </auteur> <date>20 juin 2001</date>

Page 30: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

30

<lieu>New-York</lieu> <texte> <paragraphe> paragraphe1 : premier paragraphe de l'article </paragraphe> <paragraphe> paragraphe2 : deuxième paragraphe de l'article </paragraphe> <paragraphe> paragraphe3: troisième paragraphe de l'article </paragraphe> <image> <lien xlink:href="photo.gif" xlink:type="simple" xlink:show="replace" xlink:actuate="OnRequest" xlink:title="photo"> <html:img src="photo.gif" /> </lien> <legende> <lien xlink:href="Details.xml" xlink:type="simple" xlink:show="replace" xlink:actuate="OnRequest" xlink:title="commentaires"> Légende de la photo </lien> </legende> </image> </texte> </article>

article2.xsl <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> <!-- Regle generale --> <xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="article2.css" /> <title><xsl:value-of select="article/titre" /></title> </head> <body> <h1><xsl:value-of select="article/titre" /></h1> <p class="auteur"><xsl:apply-templates select="article/auteur" /></p> <p class="date"><xsl:value-of select="article/date" /></p> <p class="lieu"><xsl:value-of select="article/lieu" /></p> <xsl:apply-templates select="article/texte" /> </body> </html> </xsl:template> <!-- Regle specifique 1 --> <xsl:template match="auteur"> <xsl:choose> <xsl:when test="@xlink:type" > <xsl:element name="a"> <xsl:attribute name="href"><xsl:value-of select="@xlink:href" /> </xsl:attribute> <xsl:value-of select="." /> </xsl:element> </xsl:when> <xsl:otherwise> <xsl:value-of select="." /> </xsl:otherwise> </xsl:choose> </xsl:template> <!-- Regle specifique 2 --> <xsl:template match="texte"> <p><xsl:apply-templates /></p> </xsl:template> <!-- Regle specifique 3 --> <xsl:template match="html:img"> <xsl:element name="img"> <xsl:attribute name="src"><xsl:value-of select="@src" /></xsl:attribute> </xsl:element> </xsl:template>

Page 31: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

31

<!-- Regle specifique 4 --> <xsl:template match="image"> <p class="affiche"><xsl:apply-templates /></p> </xsl:template> <!-- Regle specifique 5 --> <xsl:template match="legende"> <br /><xsl:apply-templates /> </xsl:template> <!-- Regle specifique 6 --> <xsl:template match="paragraphe"> <p><xsl:value-of select="." /></p> </xsl:template> <!-- Regle specifique 7 --> <xsl:template match="lien"> <xsl:element name="a"> <xsl:attribute name="href"><xsl:value-of select="@xlink:href" /> </xsl:attribute> <xsl:apply-templates /> </xsl:element> </xsl:template> <!-- Regle specifique 8 --> <xsl:template match="text()"> <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet>

article2.css body {background-color: rgb(255, 230,230); font-family: helvetica, sans-serif;} h1 {display: block; font-size: 200%; text-align: center; border-width: medium; border-style: groove } .auteur {font-size: 80%; font-weight: bold ; text-align: center;} .date {font-size: 80%; font-style: italic; text-align: center; } .lieu {font-size: 80%; font-weight: bold; text-align: center;} .affiche {text-align: center;}

A noter : Dans article2.xml <article xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> déclare deux espaces de noms : xlink et html. Cela justifie, dans la suite du texte, l’emploi de : <auteur xlink:href="PatrickDubois.xml"...> et de <html:img src="photo.gif" /> Dans article2.xsl <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> déclare trois espaces de noms xsl, xlink et html s’appliquant à tout le document.

Page 32: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

32

On peut donc écrire : <xsl:template match="auteur"> <xsl:attribute name="href"><xsl:value-of select="@xlink:href" /> ainsi que <html:img ...> Le BODY construit la page de sortie. Il comporte les lignes : <h1><xsl:value-of select="article/titre" /></h1> <p class="auteur"><xsl:apply-templates select="article/auteur" /></p> (1) <p class="date"><xsl:value-of select="article/date" /></p> <p class="lieu"><xsl:value-of select="article/lieu" /></p> <xsl:apply-templates select="article/texte" /> (2) Les lignes (1) et (2) demandent de faire appel aux règles relatives aux éléments descendants de l’élément courant. Il y a 8 règles définies, respectivement sur auteur, texte, html:img, image, legende, paragraphe, lien et text() (notation XPath) qui sélectionne tous les noeuds textuels du noeud courant. La règle concernant auteur (règle spécifique 1) est la suivante : <xsl:choose> <xsl:when test="@xlink:type"> (s’il y a un attribut xlink ayant un type) <xsl:element name="a"> (on crée un élément de type <A>) <xsl:attribute name="href"><xsl:value-of select="@xlink:href" /> (on lui associe un attribut HREF auquel on donne la bonne référence) </xsl:attribute> <xsl:value-of /> (on ajoute le nom comme champ d’affichage) </xsl:element> (</A>) </xsl:when> <xsl:otherwise> (s’il n’y a pas d’attribut xlink) <xsl:value-of /> (on affiche simplement le nom) </xsl:otherwise> </xsl:choose> La règle concernant html:img(règle spécifique 3) est la suivante : <xsl:template match="html:img"> <xsl:element name="img"> (on crée un élément de type <IMG>) <xsl:attribute name="src"><xsl:value-of select="@src" />

(on lui associe un attribut SRC auquel on donne la bonne référence) </xsl:attribute> </xsl:element> (</IMG>) </xsl:template> La règle spécifique 8 permet l’affichage de n'importe quel noeud qui ne comporte que du texte simple.

Définition de liens simples

L'espace de nom xlink étant défini par xmlns:xlink="...", tout élément peut utiliser les attributs xlink:href, xlink:type, xlink:show, xlink:actuate, xlink:title.

attribut valeurs signification xlink:type simple xlink:href une URL destination du lien xlink:show new

replace embed undefined

nouveau document dans une nouvelle fenêtre nouveau document dans la même fenêtre que le courant nouveau document à la place du lien l'application qui traitera le nouveau document choisira

xlink:actuate onLoad onRequest undefined

apparition du nouveau document dès chargement du document courant le document apparaîtra quand on cliquera sur le lien l'application qui traitera le document choisira le moment

xlink:title chaîne de caractères texte indice (affiché lorsque la souris sera sur le lien)

Page 33: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

33

Liens étendus

Il est possible de définir des liens étendus : xlink:type="extended". Caractéristiques des liens étendus : o Ils associent un nombre arbitraire de documents. o Leur définition peut se faire dans un fichier séparé des documents qu'ils associent. Un lien étendu est composé : o d'une localisation des ressources à distance (éléments de type locator) o d'un mécanisme de traversée (éléments de type arc) o d'un étiquettage pour faciliter l'utilisation du lien (éléments de type title) o de ressources locales (éléments de type ressource)

Exemple

article3.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="article3.xsl"?> <article xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" xsi:noNamespaceSchemaLocation="article3.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> <titre>Titre de l'article</titre> <auteur xlink:href="PatrickDubois.xml" xlink:type="simple" xlink:show="replace" xlink:actuate="OnRequest" xlink:title="Homepage">Patrick Dubois</auteur> <date>20 juin 2001</date> <lieu>New-York</lieu> <texte> <paragraphe>paragraphe 1 : texte du paragraphe 1</paragraphe> <paragraphe>paragraphe 2 : texte du paragraphe 2</paragraphe> <paragraphe>paragraphe 3 : texte du paragraphe 3</paragraphe> <image xlink:type="extended" xlink:title="informations disponibles" > <html:img src="photo.gif" xlink:type="resource" xlink:label="depart" /> <res xlink:type="locator" xlink:href="..." xlink:label="photographe" /> <res xlink:type="locator" xlink:href="DetailsPhoto.xml#DatePrise" xlink:label="date" /> <res xlink:type="locator" xlink:href="PhotoBig.jpg" xlink:label="agrandissement" /> <res xlink:type="locator" xlink:href="Copyright.xml" xlink:label="copyright" /> <vers xlink:type="arc" xlink:from="depart" xlink:to="photographe" xlink:title="prise par" xlink:show="new" xlink:actuate="onRequest" /> <vers xlink:type="arc" xlink:from="depart" xlink:to="date" xlink:title="date de la prise" xlink:show="embed" xlink:actuate="onLoad" /> <vers xlink:type="arc" xlink:from="depart" xlink:to="copyright" xlink:title="&#169;" xlink:show="replace" xlink:actuate="onRequest" /> <vers xlink:type="arc" xlink:from="depart" xlink:to="agrandissement" xlink:title="version 1280x1024 pixels" xlink:show="replace" xlink:actuate="onRequest" /> <legende> <lien xlink:href="Details.xml" xlink:type="simple" xlink:show="replace" xlink:actuate="OnRequest" xlink:title="commentaires"> Legende de la photo </lien> </legende> </image> </texte> </article>

Page 34: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

34

article3.xsd <?xml version="1.0" encoding="utf-8" ?> <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <xsd:element name="lien" > <xsd:complexType mixed="true" > <xsd:attribute name="xlink:type" default="xlink:simple" /> <xsd:attribute name="xlink:show" fixed="xlink:replace" /> <xsd:attribute name="xlink:actuate" fixed="xlink:OnRequest" /> <xsd:attribute name="xlink:title" type="xsd:string" use="optional" /> </xsd:complexType> </xsd:element> <xsd:element name="res" > <xsd:complexType> <xsd:attribute name="xlink:type" fixed="xlink:locator" /> <xsd:attribute name="xlink:href" use="required" /> <xsd:attribute name="xlink:role" use="optional" /> </xsd:complexType> </xsd:element> <xsd:element name="vers" > <xsd:complexType> <xsd:attribute name="xlink:type" fixed="xlink:arc" /> <xsd:attribute name="xlink:from" use="required" /> <xsd:attribute name="xlink:to" use="required" /> <xsd:attribute name="xlink:title" use="optional" /> <xsd:attribute name="xlink:show" default="xlink:replace" /> <xsd:attribute name="xlink:actuate" default="xlink:onRequest" /> </xsd:complexType> </xsd:element> <xsd:element name="article" > <xsd:complexType> <xsd:all> <xsd:element name="titre" type="xsd:string" /> <xsd:element name="auteur" type="xsd:string" /> <xsd:element name="date" type="xsd:string" /> <xsd:element name="lieu" type="xsd:string" /> <xsd:element name="texte" > <xsd:complexType mixed="true" > <xsd:all> <xsd:element name="paragraphe" type="xsd:string" minOccurs="0" maxOccurs="unbounded" /> <xsd:element name="image" minOccurs="0" maxOccurs="unbounded" xmlns:html= "http://www.w3.org/Profiles/XHTML-transitional" > <xsd:complexType> <xsd:all> <xsd:element ref="html:img"/> <xsd:element name="legende" type="xsd:string" /> </xsd:all> </xsd:complexType> </xsd:element> </xsd:all> </xsd:complexType> </xsd:element> </xsd:all> </xsd:complexType> </xsd:element> </xsd:schema>

article3.css body {font-family:helvetica,sans-serif; } h1 { display: block; font-size: 200%; text-align: center; border-width: medium; border-style: groove } .auteur { text-align: center; font-size: 80%; font-weight: bold } .cadre { border-width: thin; text-align: center; border-style: solid } .date { text-align: center; font-size: 80%; font-style: italic } .lieu { text-align: center; font-size: 80%; font-weight: bold } paragraphe { display: block ; font-variant: small-caps; font-size: 120%; font-weight: bold }

Page 35: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

Langage XML Deust 2 O. Auzende

35

article3.xsl <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/TR/REC-html40"> <xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="article3.css" /> <title><xsl:value-of select="article/titre" /></title> </head> <body> <h1><xsl:value-of select="article/titre" /></h1> <p class="auteur"> <xsl:apply-templates select="article/auteur" /> </p> <p class="date"><xsl:value-of select="article/date" /></p> <p class="lieu"><xsl:value-of select="article/lieu" /></p> <xsl:apply-templates select="article/texte" /> </body> </html> </xsl:template> <xsl:template match="auteur"> <xsl:choose> <xsl:when test="@xlink:type" > <xsl:element name="a"> <xsl:attribute name="href"> <xsl:value-of select="@xlink:href" /> </xsl:attribute> <xsl:value-of select="." /> </xsl:element> </xsl:when> <xsl:otherwise> <xsl:value-of select="." /> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template match="texte"> <p><xsl:apply-templates /></p> </xsl:template> <xsl:template match="html:img"> <xsl:element name="img"> <xsl:attribute name="src"><xsl:value-of select="@src" /> </xsl:attribute> </xsl:element> </xsl:template> <xsl:template match="image"> <p class="cadre"><xsl:apply-templates /></p> </xsl:template> <xsl:template match="legende"> <br /><xsl:apply-templates /> </xsl:template> <xsl:template match="paragraphe"> <p><span class="paragraphe"><xsl:value-of select="." /></span></p> </xsl:template> <xsl:template match="lien"> <a href="{@xlink:href}"><xsl:value-of select="." /></a> <xsl:element name="a"> <xsl:attribute name="href"><xsl:value-of select="@xlink:href" /> </xsl:attribute> <xsl:apply-templates /> </xsl:element> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet>

Page 36: Langages de l’Internet (2) : XMLwebia.lip6.fr/~auzende/Assas/coursXML.pdf · 2012-11-26 · Les feuilles de style CSS peuvent être utilisées avec les fichiers XML comme avec les

36

Annexe 1 : Codage des caractères selon la norme UTF-8

Caractère : ° Symbole : &deg ; Codage UTF-8 : &#176 ;

Annexe 2 : Eléments HTML courants utilisables avec XSL

HTML HEAD TITLE META BASE SCRIPT BODY DIV BR SPAN TABLE CAPTION COL COLGROUP THEAD TBODY TFOOT TH TR TD FORM BUTTON INPUT LABEL SELECT OPTION TEXTAREA IMG MAP AREA PRE A HR OBJECT PARAM La plupart de ces éléments acceptent des attributs de formatage correspondant à des propriétés CSS.Exemple : <SPAN style="font-style:italic">Titre : </SPAN>