« Noeuds : xml xhtml et DOM » : différence entre les versions
| Ligne 64 : | Ligne 64 : | ||
<td> | <td> | ||
Comme vous voyez la DTD reprend l'arborescence. Le | Comme vous voyez la DTD reprend l'arborescence. Le nœud père <span style="color:#FF0000">"sites_touristiques"</span> à comme fils <span style="color:#FF0000">"site"</span> . Il peut d'ailleurs avoir plusieurs fils "site" de par le * placer à côté. Un nœud <span style="color:#FF0000">"site"</span> <span style="color:#FF0000">contient lui-même plusieurs nœuds, qui sont frère</span>. Ici nous avons : <span style="color:#FF0000">nom*</span>(plusieurs nœuds <span style="color:#FF0000">"nom"</span> 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". | 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". | ||
| Ligne 73 : | Ligne 73 : | ||
<!ELEMENT <span style="color:#FF0000">sites_touristiques(site*)</span>> | <!ELEMENT <span style="color:#FF0000">sites_touristiques(site*)</span>> | ||
<!ELEMENT site(nom*, lieu, hauteur, historique, image_principale, source)> | <!ELEMENT <span style="color:#FF0000">site(nom*, lieu, hauteur, historique, image_principale, source)> | ||
<!ELEMENT nom(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">nom(#PCDATA)> | ||
<!ATTLIST nom langue CDATA #IMPLIED> | <!ATTLIST <span style="color:#FF0000">nom langue CDATA #IMPLIED> | ||
<!ELEMENT lieu(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">lieu(#PCDATA)> | ||
<!ELEMENT hauteur(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">hauteur(#PCDATA)> | ||
<!ATTLIST hauteur unite CDATA #IMPLIED> | <!ATTLIST <span style="color:#FF0000">hauteur unite CDATA #IMPLIED> | ||
<!ELEMENT historique(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">historique(#PCDATA)> | ||
<!ELEMENT image_principale(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">image_principale(#PCDATA)> | ||
<!ELEMENT source(#PCDATA)> | <!ELEMENT <span style="color:#FF0000">source(#PCDATA)> | ||
</td> | </td> | ||
Version du 25 octobre 2009 à 20:29
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
 |
DéfinitionSi 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 XMLUne 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
|
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 * placer à côté. Un nœud "site" contient lui-même plusieurs nœuds, qui sont frère. Ici nous avons : 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é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 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 crée la DTD l'on peut créer les données XML
|
<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 transformer les données XML en données XHTML par l'intermédiaire de XSLT
|
<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
 |
|