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 :
<?xml version="1.0" encoding="UTF-8"?> - Liez le fichier XML à un fichier de feuille de style XSL, que vous créerez ultérieurement.
<?xml-stylesheet type="text/xsl" href="https://news.google.com/__i/rss/rd/articles/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.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://news.google.com/__i/rss/rd/articles/xmlstylesheet.xsl"?>
<games>
<game>
<name>The Last of Us Part II</name>
<developer>Naughty Dog</developer>
</game>
<game>
<name>Ghost of Tsushima</name>
<developer>Sucker Punch Productions</developer>
</game>
<game>
<name>Death Stranding</name>
<developer>Kojima Productions</developer>
</game>
</games>
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 :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet> - À 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:template match="https://news.google.com/">
<html>
<body>
</body>
</html>
</xsl:template> - À 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:for-each select="games/game">
</xsl:for-each> - À 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:value-of select="name" />
<xsl:value-of select="developer" />
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 nommé 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.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - À l’intérieur de corps tag, utilisez un iframe tag pour lier au fichier XML et au fichier XSL :
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="https://news.google.com/__i/rss/rd/articles/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,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Liez votre fichier HTML au style CSS en ajoutant ce qui suit à la balise d’en-tête HTML.
<link rel="stylesheet" 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.
— to news.google.com
Jeu de briques
Snake
Pacman
Bubble