Como usar XSLT para exibir dados XML em uma página da Web HTML
XML é uma linguagem usada para estruturar, armazenar e trocar dados. XSLT é outra linguagem que permite transformar seus dados XML em outros formatos, como HTML.
Você pode usar XSLT para exibir dados XML em uma página da Web HTML. Usar XML e XSLT para exibir seus dados pode ser útil, pois permite que você estruture os dados de uma forma que faça sentido para suas necessidades específicas.
Como adicionar dados de exemplo a um arquivo XML
Para exibir dados XML em uma página da Web, primeiro você precisa criar o arquivo XML e adicionar dados a ele.
- Crie um novo arquivo chamado data.xml .
- Dentro do arquivo XML, declare a codificação e a versão do XML:
<?xml version="1.0"encoding="UTF-8"?> - Vincule o arquivo XML a um arquivo de folha de estilo XSL, que você criará em uma etapa posterior.
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?> - Adicione dados ao arquivo XML. XML contém dados estruturados e armazena cada ponto de dados em uma tag separada. Este exemplo inclui uma marca raiz chamada games . Dentro da tag de jogos , armazene cada jogo individual dentro de sua própria tag de jogo . Armazene os dados de cada jogo, como o nome e o desenvolvedor , em tags separadas.
<?xml version="1.0"encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"href="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>
Como usar XSLT para ler dados do arquivo XML
Crie um novo arquivo XSL para percorrer cada ponto de dados na página XML e exibir os dados.
- Na mesma pasta do arquivo XML, crie um novo arquivo chamado xmlstylesheet.xsl .
- Dentro do arquivo, declare a versão XSL e adicione a estrutura básica da tag XSL:
<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
// Your code here
</xsl:stylesheet> - Dentro da tag XSL principal, adicione uma tag de modelo . É aqui que você pode adicionar código HTML personalizado para exibir e estilizar seus dados XML.
<xsl:template match="/">
<html>
<body>
// Your HTML code in here
</body>
</html>
</xsl:template> - Dentro da tag body, use o seletor de tag xsl:for-each . Isso funcionará como um loop for para percorrer cada tag de jogo aninhada abaixo da tag de jogos .
<xsl:for-each select="games/game">
</xsl:for-each> - Dentro do loop for-each, exiba o nome e os pontos de dados do desenvolvedor, usando o seletor de tag xsl:value-of .
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
Como exibir dados em uma página da Web HTML
Você não poderá abrir o arquivo XSLT ou XML diretamente no navegador para visualizar os dados como parte de uma página da web. Crie um novo arquivo HTML e renderize os dados usando uma tag iframe .
- Na mesma pasta que seus arquivos XML e XSL, crie um novo arquivo chamado index.html .
- Adicione a estrutura básica de um arquivo HTML. Se você nunca usou HTML antes, pode revisar os conceitos introdutórios de HTML.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - Dentro da tag body , use uma tag iframe para vincular ao arquivo XML e ao arquivo XSL:
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe> - Crie um novo arquivo chamado styles.css .
- Dentro do arquivo, adicione algum CSS para estilizar sua página da web. Sinta-se à vontade para modificar seu CSS usando outras dicas e truques interessantes de CSS.
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Vincule seu arquivo HTML ao estilo CSS adicionando o seguinte à tag head do HTML.
<link rel="stylesheet" href="styles.css"> - Abra seu arquivo HTML usando um navegador para visualizar seus dados XML. Alguns navegadores não suportam XSLT, mas alguns navegadores como o Firefox suportam.
Exibir dados em páginas da Web HTML
Existem muitas maneiras de exibir dados em páginas da Web HTML, sendo XML e XSLT uma delas. Sinta-se à vontade para explorar outras maneiras de fazer isso, como armazenar e exibir a entrada do usuário usando JavaScript.
Deixe um comentário