CREATION DE FEUILLE DE STYLE pour structuré le document XML LE DTD qui donne la structure du document XML La feuille CSS pour afficher le XML La feuille XSL pour afficher le XML L’utilisation de style avec <div> et <span>
Exemple de structure de XML avec DTD <!ELEMENT actu (breve*)> <!ELEMENT breve (titre,texte,photo?,url*)> <!ELEMENT titre (#PCDATA)> <!ELEMENT texte (#PCDATA)> <!ELEMENT photo EMPTY> <!ELEMENT url (#PCDATA)>
Explication des éléments du DTD(1) <!ELEMENT actu (breve*)> On déclare un élément actu de l’arbre XML conteneur d’autre élément breve. On place entre Parenthèses les éléments enfants On place des indicateurs d’occurrences: ? : 0 ou 1 fois * : 0 ou N fois + : au moins une fois
Explication des éléments du DTD(2) <!ELEMENT breve (titre,texte,photo?,url*)> On déclare un élément breve de l’arbre XML conteneur d’autre élément titre, texte, photo(0 ou 1 fois) , url ( 0 ou N fois) . <!ELEMENT url (#PCDATA)> On déclare un élément contenant des données
Description des Attributs <!ATTLIST breve langue (fr|en) #REQUIRED theme (actu|sport|bourse|media) #REQUIRED date CDATA #REQUIRED> Pour la balise breve nous avons l’attribut langue avec deux choix: soit fr (Français), soit en (Anglais) Pour l’attribut theme nous avons plusieurs choix : actu|sport|bourse|media <!ATTLIST photo src CDATA #REQUIRED> <!ATTLIST url href CDATA #REQUIRED>
Les Feuilles de style On peut utiliser des feuilles de style CSS en plaçant du style sur les balises XML Livre{ font-size:12pt; color:blue; }
Exemple de feuille XSL( le xml) <?xml version="1.0" encoding="iso-8859-1" ?> <?xml-stylesheet type="text/xsl" href="stock.xsl"?> <stock> <produit> <ref >345</ref> <nom> Livre </nom> <prix monnaie="Francs"> 50 </prix> <comment> Un article très recherché </comment> <fournisseur> NOKIA</fournisseur> </produit> </stock>
Feuille de style xslt Il s’agit de créer une page HTML à partir du XML On crée un Modèle de page ou template <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> NOUS PLACERONS ICI LE MODELE HTML(voir diapos suivante) </xsl:template> </xsl:stylesheet>
Modèle Html avec xsl Création d’une boucle sur le nœud produit <body style="font-family:Arial; font-size:12pt;"> <h1> Document XML </h1> <xsl:for-each select="stock/produit"> NOUS PLACERONS ICI LES LIGNES EN DESIGNANT les VALEURS Numéro du produit : <xsl:value-of select="ref"/> Continent : <xsl:value-of select="ref/@continent"/> Nom du produit : <xsl:value-of select="nom"/>
Modèle Html avec xsl, utilisation de style Intégration du nœud: prix et Attribut : monnaie Fin de boucle et fin de feuille de style <span style="font-weight:bold; color:blue; padding:4px"> Prix du Produit : <xsl:value-of select="prix"/> <xsl:value-of select="prix/@monnaie"/> </span> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
EXEMPLE DE FEUILLE DE STYLE COMPLETE <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <body style="font-family:Arial; font-size:12pt;"> <h1> Document XML </h1> <xsl:for-each select="stock/produit"> <ol> <li>Numéro du produit :<xsl:value-of select="ref"/></li> <li>Continent : <xsl:value-of select="ref/@continent"/></li> <li> Nom du produit : <xsl:value-of select="nom"/></li> <li>Prix du Produit : <xsl:value-of select="prix"/></li> <li>Commentaire : <xsl:value-of select="comment"/></li> <li>Fournisseur : <xsl:value-of select="fournisseur"/></li> </ol> <hr /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
Utilisation de <div> et <span> pour introduire un style La balise <DIV> est assez similaire à la balise <SPAN> pour ce qui concerne sa fonction, avec cependant une distinction importante : <DIV> est une balise encadrant tout un "bloc" du document (block-level element).Elle occasionne un saut de ligne, contrairement à la balise <SPAN>. Elle peut contenir des paragraphes, des titres, des tableaux, et même d'autres divisions. Ce qui fait de <DIV>, la balise idéale pour marquer différentes sortes de blocs tel qu'un chapitre, un résumé ou une note. La balise DIV est un conteneur qui peut inclure tous les tags html (paragraphes, tables ..., et également d'autres divisions). Elle sert à structurer le document en plusieurs sections. Elle est l'alternative de la balise table pour ordonner les éléments dans une page et permet d'obtenir des présentations interressantes avec certains style CSS. L'attribut overflow peut par exemple implémenter automatiquement des scrollbars dans une div dont le contenu dépasse la taille. De même que la balise <SPAN>, elle s'avère particulièrement utile pour introduire des informations de styles brèves : phrases, groupes de mots ou même lettres isolées dans un mot.
EXEMPLE DE FEUILLE DE STYLE COMPLETE AVEC <DIV> ET <SPAN> <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <body style="font-family:Arial; font-size:12pt;"> <h1> Document XML </h1> <xsl:for-each select="stock/produit"> <ol> <div style="background-color:silver" color="beige" > <span style="font-weight:bold; padding:4px"> <li>Numéro du produit :<xsl:value-of select="ref"/></li> <li>Continent : <xsl:value-of select="ref/@continent"/></li> <li> Nom du produit : <xsl:value-of select="nom"/></li> </span> </div > <div style="background-color:beige" color="beige" > <li>Prix du Produit : <xsl:value-of select="prix"/></li> <li>Commentaire : <xsl:value-of select="comment"/></li> <li>Fournisseur : <xsl:value-of select="fournisseur"/></li> </ol> <hr /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>