Le langage XML
Afficher du XML dans Html

Home

Du XML dans un fichier Html

On peut toujours incorporer du XML dans un fichier Html avec la balise <xml> ... </xml>. Mais en toute logique, quand les navigateurs rencontrent des balises incorrectes ou inconnues, rien n'est affiché. Ce sera le cas avec vos balises XML incorporées dans un fichier Html. Heureusement, on peut passer par une astuce qui répond au doux nom romantique de "îlots de données" [data islands].


 
Les Data Islands [les îles de données]

Derrière ce nom pour le moins bizarre, se cache une possibilité assez intéressante. Dans un fichier Html, vous pouvez créér un" îlot" de données se trouvant dans un fichier XML distinct et en extraite des données que vous pouvez alors afficher dans le document Html.

Ici, dans le fichier Html, on va désigner le fichier xml extérieur avec un identifiant id :

    <xml id="fichierxml" src="simple.xml"></xml>

Dans un tableau Html, que l'on relie par un attribut à la source des données au moyen de l'identifiant désigné plus haut [datasrc="#id"], on peut finalement aller reprendre des données du fichier XML avec l'attribut de champ de donnée qui reprend comme valeur le nom de la balise XML [datafld="balise_xml"].

Vite, vite, un exemple !

Voila toujours notre fichier XML (extérieur) :

<?xml version="1.0" encoding="ISO-8859-1"?>
<racine>
    <enfant>
        <nom>Loïc</nom>
        <lien>garçon</lien>
        <date>07/11/83</date>
        <data>Le petit qui me dépasse d'une tête.</data>
    </enfant>
    <enfant>
        <nom>Marine</nom>
        <lien>fille</lien>
        <date>20/12/85</date>
        <data>La petite fille chérie à son papa.</data>
    </enfant>
</racine>

Soit :

Je vais créer un fichier Html classique dans lequel je voudrais reprendre des données du fichier XML et plus précisément le contenu des balises <nom>, <lien> et <date>.

<html>
<body>
Voici du Html...
<xml id="fichierxml" src="simple.xml"></xml>
<table border="1" datasrc="#fichierxml">
<tr>
<td><span datafld="nom"></span></td>
<td><span datafld="lien"></span></td>
<td>Anniversaire le <span datafld="date"></td>
</tr>
</table>
Et voici encore du Html !
</body>
</html>

Ce qui une fois affiché (avec quelques attributs supplémentaires pour le look de la page), offre le résultat suivant :

Grandiose !

Pour voir les fichiers en direct - IE5+ seul - :