« Noeuds : xml xhtml et DOM » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 105 : Ligne 105 :
<td>
<td>


Comme vous voyez la DTD reprend l'arborescence. Le noeud père "sites_touristiques" à comme fils "site". Il peut d'ailleurs avoir plusieurs fils "site" de par le * placer à côté. Un noeud "site" contient lui-même plusieurs noeuds, qui sont frère. Ici nous avons : nom*(plusieurs noeuds "nom" possibles), lieu, hauteur, historique, image_principale, source). "#PCDATA" signifie la valeur textuelle de l'élément.
Voici un exemple de fichier XSLT pour transformer le XML en XHTML


Le balise ATTLIST sert à défini l'attribut d'un élément, ici l'attribut "unite" de l'élément "hauteur", ainsi que l'attribut "langue" de l'élément "nom".
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >


Vous pourrez examiner ce [[Tutoriel DTD]] pour comprendre l'exercice. A partir de l'arborescence ci-dessus on peut créer cette DTD :
<xsl:output method="html" />


  <xsl:template match="student">
    <html>
      <head>
        <title>
          Page Travaux STAF
        </title>
<style type="text/css">
body
{


<!ELEMENT sites_touristiques(site*)>
background-image:url(image/bleu.jpg);
color: white;
font-family:arial;
font-size:15px;
margin-left:100px;


<!ELEMENT site(nom*, lieu, hauteur, historique, image_principale, source)>
}


<!ELEMENT nom(#PCDATA)>
</style>
      </head>
     
     
      <body>
 
        <h1>PAGE TRAVAUX</h1>
<br />
        <h2>Données Personnelles</h2>
        <xsl:apply-templates select="site"/>
</div>
        <h2><xsl:value-of select="nom"/></h2>
      </body>
    </html>


<!ATTLIST nom langue CDATA #IMPLIED>
Ci-dessous


<!ELEMENT lieu(#PCDATA)>


<!ELEMENT hauteur(#PCDATA)>
<!ATTLIST hauteur unite CDATA #IMPLIED>
<!ELEMENT historique(#PCDATA)>
<!ELEMENT image_principale(#PCDATA)>
<!ELEMENT source(#PCDATA)>


</td>
</td>


</table>
</table>

Version du 25 octobre 2009 à 17:25

Objectifs :

  • Expliquer la notion de noeud relativement aux données XML pour mieux en comprendre la combinaison avec DTD, XSLT, XHTML et CSS


Les noeuds XML par l'exemple

Un exemple imagé de noeuds

Chutes4.jpg

Définition

Si l'on veut créer une page XML ou XHTML avec des informations sur des sites touristiques comme dans l'exemple de gauche, il est pertinent au préalable d'en organiser la structure de noeuds. Un noeud est un composant particulier d'un document XML et par la même XHTML. Comme vous voyez dans l'exemple ça peut-être (regarder les couleurs dans l'exemple à gauche) :

- un élément

- un attribut

- ou un contenu textuel.

La notion d'arborescence XML

Une arborescence XML est composée uniquement de noeuds, chacun étant relié l'un à un autre. Comme on le voit les noeuds sont organisés en arborescence suivant cette hiérarchie :

- Le sommet de l'arbre est nommé racine, il est représenté par la barre bolique tout en haut, ici c'est par exemple "TOURISME", il contient tous les autres noeuds, notamment "Sites touristiques" dans l'exemple :

- "Sites touristiques" est le noeud père du noeud "Site";

- Le noeud "Site" a lui-même (donc contient) sept noeuds fils : nom, nom, lieu, hauteur, historique, image_principale et source);

- Chacun étant le frère de l'autre. Chacun des ces noeuds étant des descendants des noeuds "Site" et "Sites touristiques" et de "TOURISME" la racine;

- Il y a des éléments comme "Nom" qui ont des noeuds attribus comme "Langue";

- Biensûr à l'intérieur d'un élément il peut y avoir du texte.

Une fois définie l'arborescence on peut créer la DTD

Chutes4.jpg

Comme vous voyez la DTD reprend l'arborescence. Le noeud père "sites_touristiques" à comme fils "site". Il peut d'ailleurs avoir plusieurs fils "site" de par le * placer à côté. Un noeud "site" contient lui-même plusieurs noeuds, qui sont frère. Ici nous avons : nom*(plusieurs noeuds "nom" possibles), lieu, hauteur, historique, image_principale, source). "#PCDATA" signifie la valeur textuelle de l'élément.

Le balise ATTLIST sert à défini l'attribut d'un élément, ici l'attribut "unite" de l'élément "hauteur", ainsi que l'attribut "langue" de l'élément "nom".

Vous pourrez examiner ce Tutoriel DTD pour comprendre l'exercice. A partir de l'arborescence ci-dessus on peut créer cette DTD :


<!ELEMENT sites_touristiques(site*)>

<!ELEMENT site(nom*, lieu, hauteur, historique, image_principale, source)>

<!ELEMENT nom(#PCDATA)>

<!ATTLIST nom langue CDATA #IMPLIED>

<!ELEMENT lieu(#PCDATA)>

<!ELEMENT hauteur(#PCDATA)>

<!ATTLIST hauteur unite CDATA #IMPLIED>

<!ELEMENT historique(#PCDATA)>

<!ELEMENT image_principale(#PCDATA)>

<!ELEMENT source(#PCDATA)>

Une fois définie l'arborescence on peut créer la DTD

Chutes4.jpg

Voici un exemple de fichier XSLT pour transformer le XML en XHTML

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >

<xsl:output method="html" /> 

 <xsl:template match="student">
   <html>
     <head>
       <title>
         Page Travaux STAF 
       </title>

<style type="text/css">

body {

background-image:url(image/bleu.jpg); color: white; font-family:arial; font-size:15px; margin-left:100px;

}


</style> 

     </head>
     
     
     <body>

PAGE TRAVAUX


Données Personnelles

       <xsl:apply-templates select="site"/>

<xsl:value-of select="nom"/>

     </body>
    </html>

Ci-dessous


Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Noeuds_:_xml_xhtml_et_DOM&oldid=13278 »