Noeuds : xml xhtml et DOM

De EduTech Wiki
Aller à la navigation Aller à la recherche

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

Chutes5.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 en nœuds. Un nœud est un composant particulier d'un document XML et par la même XHTML. Regardez les éléments colorés dans l'exemple, un nœud peut-être :

- un élément

- un attribut

- ou un contenu textuel.

La notion d'arborescence XML

Une arborescence XML est composée uniquement de nœuds, chacun étant relié l'un à un autre. Comme on le voit ils sont organisés en hiérarchie :

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

- "Sites touristiques" est le nœud père du nœud "Site";

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

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

- Il y a des éléments comme "Nom" qui ont des nœuds attributs comme "Langue";

- Bien sû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

Chutes5.jpg

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

Le balise "ATTLIST" sert à définir 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*, Llieu, 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 crée la DTD l'on peut créer les données XML

Chutes5.jpg

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

   

Nous retrouvons ci-dessous les éléments, attributs et contenus textuels décrits 
ci-dessus,de la même manière que s'organisent des balises XHTML dans leur 
organisation hiérarchique et d'héritage. 


<TOURISME>
 <Sites_touristiques>
  <Site>
   <Nom langues="Français">Chutes de Trümmelbach</nom>
   <lieu>Trümmelbach, Suisse </lieu>
   <hauteur unité="mètres">32</hauteur>
   <historique> </historique> 
   <image_principale> </image_principale>
   <source> </source>
  </site>
 </sites_touristiques>
</TOURISME>


Une fois composées le données XML, il est possible de les transformer en données XHTML par l'intermédiaire de XSLT

Vous pourrez comprendre l'exemple en examinant le Tutoriel XSLT débutant. 

    Le but est ici d'activer ou composer des nœuds par la fonction "xls:template 
    match="Nom de l'élément", puis d'appliquer la transformation ou l'importation 
    des données XML dans une page XHTML.


Chutes5.jpg 
   


        <TOURISME>

      <?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="TOURISME">

              <html>
      			<head>
        		<title>Page Travaux STAF</title>

                        <style type="text/css">h1 

                        {font-size:25px;color:#FFFFFF;}
 
                         </style>

			</head>
	      <body> 

                       <h1><xsl:apply-templates select="nom"/></h1>

             </body>		

             </html>
	

                      </xsl:template>

	     <xsl:template match="site">

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

            </xsl:template>
	
</xsl:stylesheet>

XHTML : la notion de noeuds

Arbre xhtml.jpg

Comme on le voit ici pour XHTML l'élément racine est "HTML" puis vient toute l'organisation hiérarchique suivant les principes de XML. La balise body peut notamment contenir deux autres types de balises : des balises de block (chaque élément de type block ne peut qu'aller à la ligne par rapport au précédent) et des balises ligne (chaque élément de type ligne ne peut qu'aller à la suite du précédent sur la même ligne, sans qu'il y aie retour à ligne comme avec les balises de type block.

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