Embed Size (px)
Citation preview
LE DTD qui donne la structure du document XMLLa feuille CSS pour afficher le XMLLa feuille XSL pour afficher le XMLL’utilisation de style avec <div> et <span>
CREATION DE FEUILLE DE STYLE pour structuré le document XML
<!ELEMENT actu (breve*)><!ELEMENT breve (titre,texte,photo?,url*)> <!ELEMENT titre (#PCDATA)><!ELEMENT texte (#PCDATA)><!ELEMENT photo EMPTY><!ELEMENT url (#PCDATA)>
Exemple de structure de XML avec DTD
<!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 enfantsOn place des indicateurs d’occurrences:? : 0 ou 1 fois * : 0 ou N fois + : au moins une fois
Explication des éléments du DTD(1)
<!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
Explication des éléments du DTD(2)
<!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>
Description des Attributs
On peut utiliser des feuilles de style CSS en plaçant du style sur les balises XMLLivre{ font-size:12pt; color:blue; }
Les Feuilles de style
<?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>
Exemple de feuille XSL( le xml)
Il s’agit de créer une page HTML à partir du XMLOn 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>
Feuille de style xslt
<html><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 xslCréation d’une boucle sur le nœud produit
<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>
Modèle Html avec xsl, utilisation de styleIntégration du nœud: prix et Attribut : monnaieFin de boucle et fin de feuille de style
<?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>
EXEMPLE DE FEUILLE DE STYLE COMPLETE
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.
Utilisation de <div> et <span> pour introduire un style
<?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" > <span style="font-weight:bold; padding:4px">
<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> </span> </div > </ol> <hr /> </xsl:for-each></body> </html> </xsl:template></xsl:stylesheet>
EXEMPLE DE FEUILLE DE STYLE COMPLETE AVEC <DIV> ET <SPAN>
