Pour afficher les données XML dans le cadre d'une page Web, vous pouvez utiliser XSLT; les navigateurs n'offrent pas cette capacité par eux-mêmes.
XML est un langage utilisé pour structurer, stocker et échanger des données. XSLT est un autre langage qui vous permet de transformer vos données XML dans d'autres formats, tels que HTML.
Vous pouvez utiliser XSLT pour afficher des données XML sur une page Web HTML. L'utilisation de XML et XSLT pour afficher vos données peut être utile, car cela vous permet de structurer les données d'une manière qui correspond à vos besoins spécifiques.
Comment ajouter des exemples de données à un fichier XML
Pour afficher des données XML sur une page Web, vous devez d'abord créer le fichier XML et y ajouter des données.
- Créez un nouveau fichier appelé données.xml.
- Dans le fichier XML, déclarez l'encodage et la version XML:
1.0 UTF-8?> - Liez le fichier XML à un fichier de feuille de style XSL, que vous créerez ultérieurement.
texte/xsl xmlstylesheet.xsl?> - Ajoutez des données au fichier XML. XML contient des données structurées et stocke chaque point de données dans une balise distincte. Cet exemple inclut une balise racine appelée Jeux. À l'intérieur de Jeux tag, stocke chaque jeu individuel dans le sien jeu étiqueter. Stockez des données pour chaque jeu, telles que le nom et développeur dans des balises distinctes.
1.0 UTF-8?>
texte/xsl xmlstylesheet.xsl?>
<Jeux>
<jeu>
<nom>Le dernier d'entre nous, partie IInom>
<développeur>Le chien méchantdéveloppeur>
jeu>
<jeu>
<nom>Fantôme de Tsushimanom>
<développeur>Sucker Punch Productionsdéveloppeur>
jeu>
<jeu>
<nom>Échouement de la mortnom>
<développeur>Kojima Productionsdéveloppeur>
jeu>
Jeux>
Comment utiliser XSLT pour lire des données à partir du fichier XML
Créez un nouveau fichier XSL pour parcourir chaque point de données dans la page XML et afficher les données.
- Dans le même dossier que votre fichier XML, créez un nouveau fichier appelé xmlstylesheet.xsl.
- Dans le fichier, déclarez la version XSL et ajoutez la structure de base des balises XSL:
1.0 UTF-8?>
<xsl: feuille de styleversion="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Votre code ici
xsl: feuille de style> - À l'intérieur de la balise XSL principale, ajoutez un modèle étiqueter. C'est ici que vous pouvez ajouter du code HTML personnalisé pour afficher et styliser vos données XML.
<xsl: modèlecorrespondre="/">
<html>
<corps>
// Votre code HTML ici
corps>
html>
xsl: modèle> - À l'intérieur de la balise body, utilisez le xsl: pour chaque sélecteur de balises. Cela agira comme une boucle for pour parcourir chaque jeu balise imbriquée sous le Jeux étiqueter.
<xsl: pour chaquesélectionner="jeux/jeu">
xsl: pour chaque> - À l'intérieur de la boucle for-each, affichez le nom et les points de données du développeur, à l'aide de la xsl: valeur de sélecteur de balises.
<xsl: valeur desélectionner="nom" />
<xsl: valeur desélectionner="développeur" />
Comment afficher des données sur une page Web HTML
Vous ne pourrez pas ouvrir le fichier XSLT ou XML directement dans le navigateur pour afficher les données dans le cadre d'une page Web. Créez un nouveau fichier HTML et restituez les données à l'aide d'un iframe étiqueter.
- Dans le même dossier que vos fichiers XML et XSL, créez un nouveau fichier appelé index.html.
- Ajoutez la structure de base d'un fichier HTML. Si vous n'avez jamais utilisé HTML auparavant, vous pouvez rafraîchir concepts HTML d'introduction.
html>
<html>
<diriger>
<titre>Exemple XML et XSLTtitre>
diriger>
<corps>
corps>
html> - À l'intérieur de corps tag, utilisez un iframe tag pour lier au fichier XML et au fichier XSL:
<h1>Exemple XML et XSLTh1>
<p>Le contenu suivant est généré à partir d'un fichier XML :p>
<iframesrc="données.xml"xslt="xmlstylesheet.xsl">iframe> - Créez un nouveau fichier appelé styles.css.
- Dans le fichier, ajoutez du CSS pour styliser votre page Web. N'hésitez pas à modifier votre CSS en utilisant d'autres Trucs et astuces CSS.
html,
corps {
hauteur: 100 % ;
marge: 0 ;
}corps {
affichage: flexible ;
justifier-contenu: centrer ;
align-items: center ;
flex-direction: colonne ;
}p {
marge inférieure: 24px ;
} - Liez votre fichier HTML au style CSS en ajoutant ce qui suit à la balise d'en-tête HTML.
<lienrel="feuille de style"href="styles.css"> - Ouvrez votre fichier HTML à l'aide d'un navigateur pour afficher vos données XML. Certains navigateurs ne prennent pas en charge XSLT, mais certains navigateurs tels que Firefox le font.
Afficher les données dans les pages Web HTML
Il existe de nombreuses façons d'afficher des données dans des pages Web HTML, XML et XSLT étant l'une d'entre elles. N'hésitez pas à explorer les autres moyens de le faire, tels que le stockage et l'affichage des entrées utilisateur à l'aide de JavaScript.