Para mostrar un XML usando HTML no es posible, para eso tenemos que usar algo de JavaScript, pero aún así es posible.
En este ejemplo mostraremos el Ejemplo de Catálogo de CD en XML, en una pagina HTML usando HTML y Javascript.
Lo primero que haremos será guardar el Ejemplo de Catálogo de CD en XML como catalogo.xml, y crear un archivo .html con el nombre que queramos, y le pondremos lo siguiente:
[codigo]
<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Tu navegador no soporta esta funcion');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("catalogo.xml");
var x=xmlDoc.getElementsByTagName("CD");
document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr><th>Artista</th><th>Album</th></tr>");
document.write("</thead>");
document.write("<tfoot>");
document.write("<tr><th colspan='2'>Esta es mi coleccion de albums</th></tr>");
document.write("</tfoot>");
for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("ARTISTA")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("TITULO")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
[/codigo]
Y con este codigo, nos mostraría una tabla, con el titulo ARTISTA, y ALBUM, y luego los respectivos datos del XML. Podremos modificarlo, y agregar, editar, o eliminar, etc.