Está en la página 1de 23

Visualización de documentos XML con

HTML
la etiqueta <xml> de HTML
 Es una técnica de Microsoft. En exploradores diferentes a IE5 es
probable que funcione igual el uso del elemento script:
<script language=“xml” type=“text/xml”
id=“nombre_id” src=“documento_XML.xml”>...</script>
 Es una técnica para la introducción de datos XML en una página web
HTML
 Microsoft la denomina vinculación de datos (data binding)
 Técnica ligada al desarrollo técnico conocido como ADO (ActiveX
Data Object)
 Se trata de un desarrollo que puede proporcionar unos controles de
acceso remoto a datos conocidos como controles DSO (Data Source
Object)
 Mediante la etiqueta <xml> se puede incluir y gestionar datos XML
(data island) en el interior de un documento HTML
<HTML>
<HEAD>
<TITLE>Esto es una prueba</TITLE>
</HEAD>
<BODY>
<XML ID=“pruebaDSO” href=“prueba.xml”></XML>
....................
</BODY>
</HTML>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<alumnos>
<alumno>
<numero>1</numero>
<nombre>Eduardo</nombre>
<apellido>Peis</apellido>
<nivel>Iniciación</nivel>
<curso>XML</curso>
</alumno>
<alumno>
<numero>2</numero>
<nombre>Jaime</nombre>
<apellido>Pérez</apellido>
<nivel>Avanzado</nivel>
<curso>Windows 2000</curso>
</alumno>
<alumno>
<numero>3</numero>
<nombre>José Manuel</nombre>
<apellido>Galdo</apellido>
<nivel>Básico</nivel>
<curso>HTML</curso>
</alumno>
<alumno>
<numero>4</numero>
<nombre>María Teresa</nombre>
<apellido>Ortega</apellido>
<nivel>Medio</nivel>
<curso>UNIX</curso>
</alumno>
</alumnos>
<HTML>
<HEAD>
<TITLE>Esto es una prueba</TITLE>
</HEAD>
<BODY>
<XML ID=“pruebaDSO_2”>
<alumnos>
<alumno>..........</alumno>
<alumno>..........</alumno>
<alumno>..........</alumno>
<alumno>..........</alumno>
</alumnos>
</XML>
.............
</BODY>
</HTML>
tabla típica HTML
.....
<body>
.....
<table>
<caption>LISTA DE ALUMNOS</caption>
<thead>
<th>Número</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Curso</th>
<th>Nivel</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Eduardo</td>
<td>Peis</td>
<td>XML</td>
<td>Iniciación</td>
</tr>
<tr>
.....
</tr>
</tbody>
</table>
....
</body>
....
<html>
<head>
<title>Lista de alumnos 1</title>
</head>
<body>
<xml id="ListaAlumnos1" src="alumnos04_01.xml"></xml>
<table datasrc="#ListaAlumnos1" border="1">
<caption>LISTA DE ALUMNOS</caption>
<thead>
<th>Número</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Curso</th>
<th>Nivel</th>
</thead>
<tbody>
<tr>
<td><span datafld="numero"></span></td>
<td><span datafld="nombre"></span></td>
<td><span datafld="apellido"></span></td>
<td><span datafld="curso"></span></td>
<td><span datafld="nivel"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
........
<alumno>
<numero>1</numero>
<nombre>Eduardo</nombre>
<apellido>Peis</apellido>
<edad>19</edad>
<nivel>Iniciación</nivel>
<curso>XML</curso>
<sexo>H</sexo>
<observaciones>Pendiente de pago</observaciones>
</alumno>
<alumno>
<numero>2</numero>
<nombre>Jaime</nombre>
<apellido>Pérez</apellido>
<edad />
<nivel>Avanzado</nivel>
<curso>Windows 2000</curso>
<sexo>H</sexo>
<observaciones>Hizo el curso de Iniciación en
1998</observaciones>
</alumno>
........
<html> ejemplo04_05.htm
<head><title>Lista de alumnos 3</title>
<style type="text/css">
body {font-family:Verdana,sans-serif; font-size:12pt}
h2 {font-family:Comic Sans MS;font-size:16px;color:navy}
</style>
</head>
<body>
<center>
<h2>LISTADO DE ALUMNOS del Centro "TODO-WEB"</h2>
<xml id="ListaAlumnos3" src="alumnos04_04.xml"></xml>
<table datasrc="#ListaAlumnos3" border="0" cellspacing="4"
cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead>
<tr bgcolor="#cc99cc">
<th>Núm</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Curso</th>
<th>Nivel</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#cccccc">
<td align="center"> <span datafld="numero"></span> </td>
<td align="right"> <span datafld="nombre"></span> </td>
<td><b> <span datafld="apellido"></span> </b></td>
<td align="center"> <span datafld="curso"></span> </td>
<td bgcolor="#ff9999"><u> <span datafld="nivel"></span> <u></td>
<td align="center"> <span datafld="edad"></span> </td>
</tr></tbody></table></center></body></html>
<html> ejemplo04_06.htm
<head>
<title>Lista de alumnos 4</title>
<style type="text/css">
body {font-family:Verdana,sans-serif; font-size:12px; font-weight:normal}
h2 {font-family:Comic Sans MS;font-size:16px;color:navy}
</style>
</head>
<body>
<center>
<h2>LISTADO DE ALUMNOS del Centro "TODO-WEB"</h2>
<xml id="ListaAlumnos4" src="alumnos04_04.xml"></xml>
<table datasrc="#ListaAlumnos4" border="0" cellspacing="4"
cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead>
<tr bgcolor="#cc99cc">
<th>Núm</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Curso</th>
<th>Nivel</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td align="center"><span datafld="curso"></span></td>
<td bgcolor="#ff9999"><u><span datafld="nivel"></span><u></td>
</tr>
</tbody> Sigue 
</table>
<p>&nbsp;</p>
<table datasrc="#ListaAlumnos4" border="0" cellspacing="4"
cellpadding="2">
<caption>OBSERVACIONES DE ALUMNOS</caption>
<thead>
<tr bgcolor="#cc99cc">
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>Observaciones</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#cccccc">
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td align="center"><span datafld="edad"></span></td>
<td bgcolor="#ccffcc"><i><span datafld="observaciones"></span><i></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Peis:
asimétricos

<?xml version="1.0" encoding="ISO-8859-1" ?>


<alumnos>
<alumno>
<numero>1</numero>
<nombre>Eduardo</nombre>
<apellido>Peis</apellido>
<edad>19</edad>
<nivel>Iniciación</nivel>
<cursos>
<curso1>XML</curso1>
<curso2>HTML</curso2>
<curso3 />
</cursos>
<sexo>H</sexo>
<observaciones>Pendiente de pago</observaciones>
</alumno>
.....
<html> Ejemplo04_08.html
<head>.......</head>
<body><center>
<h2>LISTADO DE ALUMNOS del Centro "TODO-WEB"</h2>
<xml id="ListaAlumnos5" src="alumnos04_07.xml"></xml>
<table datasrc="#ListaAlumnos5" border="0" cellspacing="4"
cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead><tr bgcolor="#cc99cc">
.....
</tr></thead>
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td>
<table datasrc="#ListaAlumnos5" datafld="cursos" cellspacing="0">
<tbody>
<tr>
<td>
<span datafld="curso1"></span><br>
<span datafld="curso2"></span><br>
<span datafld="curso3"></span>&nbsp;
</td>
</tr>
</tbody>
</table>
Alumnos04_09.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>


<alumnos>
.........
<alumno>
<numero>3</numero>
<nombre>José Manuel</nombre>
<apellido>Galdo</apellido>
<edad>21</edad>
<cursos>
<curso1>HTML</curso1>
<curso2>JavaScript</curso2>
<curso3>ASP</curso3>
</cursos>
<niveles>
<nivel1>Básico</nivel1>
<nivel2>Medio</nivel2>
<nivel3>Iniciación</nivel3>
</niveles>
<sexo>H</sexo>
<observaciones>Falta mucho a clase</observaciones>
</alumno>
..........
......... Ejemplo04_10.htm
<xml id="ListaAlumnos6" src="alumnos04_09.xml"></xml>
<table datasrc="#ListaAlumnos6" border="0" cellspacing="4"
cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead><tr bgcolor="#cc99cc">
<th>Núm</th>
.........
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td>
<table datasrc="#ListaAlumnos6" datafld="cursos" cellspacing="0">
<tbody>
<tr>
<td>
<span datafld="curso1"></span><br>
<span datafld="curso2"></span><br>
<span datafld="curso3"></span>&nbsp;
</td>
</tr></tbody></table></td>
<td>
<table datasrc="#ListaAlumnos6" datafld="niveles" cellspacing="0">
<tbody>
<tr>
<td>
<span datafld="nivel1"></span><br>
<span datafld="nivel2"></span><br>
<span datafld="nivel3"></span>&nbsp;
</td>
</tr></tbody></table></td>
</tr></tbody></table></center></body></html>
control atributos
<?xml version="1.0" encoding="ISO-8859-1" ?>
<alumnos>
<alumno numero="1">
<nombre>Eduardo</nombre>
.......
<alumno numero="2">
<nombre>Jaime</nombre>
<apellido>Pérez</apellido>
.......
<alumno numero="3">
<nombre>José Manuel</nombre>
<apellido>Galdo</apellido>
<edad>21</edad>
<cursos>
<curso1>HTML</curso1>
<curso2>JavaScript</curso2>
<curso3>ASP</curso3>
</cursos>
<niveles>
<nivel1>Básico</nivel1>
<nivel2>Medio</nivel2>
<nivel3>Iniciación</nivel3>
</niveles>
<sexo>H</sexo>
<observaciones>Falta mucho a clase</observaciones>
</alumno>
........
Ejemplo04_12.htm

.....
<xml id="ListaAlumnos7" src="alumnos04_11.xml"></xml>
<table datasrc="#ListaAlumnos7" border="0" cellspacing="4"
cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
.....
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td>
<table datasrc="#ListaAlumnos7" datafld="cursos" cellspacing="0">
<tbody>
<tr>
<td>
<span datafld="curso1"></span><br>
<span datafld="curso2"></span><br>
<span datafld="curso3"></span>&nbsp;
</td>
</tr>
</tbody>
....
Alumnos04_13.xml

.......
<alumno numero="3">
<nombre>José Manuel</nombre>
<apellido>Galdo</apellido>
<edad>21</edad>
<cursos>
<curso1>HTML</curso1>
<nivel1>Básico</nivel1>
<curso2>JavaScript</curso2>
<nivel2>Medio</nivel2>
<curso3>ASP</curso3>
<nivel3>Iniciación</nivel3>
</cursos>
<sexo>H</sexo>
<observaciones>Falta mucho a clase</observaciones>
</alumno>
.......
Ejemplo04_14.html
.....
<xml id="ListaAlumnos8" src="alumnos04_13.xml"></xml>
<table datasrc="#ListaAlumnos8" border="0" cellspacing="4"
cellpadding="2">
....
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td>
<table datasrc="#ListaAlumnos8" datafld="cursos" cellspacing="0">
<tbody>
<tr>
<td>
<b><span datafld="curso1"></span></b>&nbsp;
<i><span datafld="nivel1"></span></i><br>
<b><span datafld="curso2"></span></b>&nbsp;
<i><span datafld="nivel2"></span></i><br>
<b><span datafld="curso3"></span></b>&nbsp;
<i><span datafld="nivel3"></span></i>&nbsp;
</td>
</tr>
</tbody>
....
Gestión individual de datos

...........
<xml id="ListaAlumnos9" src="alumnos04_04.xml"></xml>
...........
<p>Número: <b><span datasrc="#ListaAlumnos9"
datafld="numero"></span></b></p>
<p>Alumno: <b><span datasrc="#ListaAlumnos9"
datafld="nombre"></span>&nbsp;
<span datasrc="#ListaAlumnos9" datafld="apellido"></span></b></p>
<p>Edad: <b><span datasrc="#ListaAlumnos9"
datafld="edad"></span></b>&nbsp;
Sexo: <b><span datasrc="#ListaAlumnos9"
datafld="sexo"></span></b></p>

<hr width="500" align="left">

<p>Curso: <b><span datasrc="#ListaAlumnos9"


datafld="curso"></span></b></p>
<p>Nivel: <b><span datasrc="#ListaAlumnos9"
datafld="nivel"></span></b></p>
<p>Observaciones: <b><span datasrc="#ListaAlumnos9"
datafld="observaciones">
</span></b></p>

<hr width="500" align="left"> Sigue 


..........
..........
<center>
<button onclick="ListaAlumnos9.recordset.MoveFirst()"
title="Principio">
&nbsp;&nbsp;|&lt;&lt;&nbsp;&nbsp;
</button>&nbsp;
<button onclick="if (! ListaAlumnos9.recordset.BOF)
ListaAlumnos9.recordset.MovePrevious()" title="Anterior">
&nbsp;&lt;&nbsp;
</button>&nbsp;
<button onclick="if (! ListaAlumnos9.recordset.EOF)
ListaAlumnos9.recordset.MoveNext()" title="Siguiente">
&nbsp;&gt;&nbsp;
</button>&nbsp;
<button onclick="ListaAlumnos9.recordset.MoveLast()"
title="Final">
&nbsp;&nbsp;&gt;&gt;|&nbsp;&nbsp;
</button>
</center>

</body>
</html>
......... variantes
<xml id="ListaAlumnos10" src="alumnos04_04.xml"></xml>
.........
<p>Número: <b><span datasrc="#ListaAlumnos10"
datafld="numero"></span></b></p>
<p>Nombre: <input type="text" datasrc="#ListaAlumnos10" datafld="nombre"
size="25"></p>
<p>Apellido: <input type="text" datasrc="#ListaAlumnos10"
datafld="apellido" size="25">
<p>Edad: <b><span datasrc="#ListaAlumnos10"
datafld="edad"></span></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sexo: <input type="radio" datasrc="#ListaAlumnos10" datafld="sexo"
value="H">Hombre
<input type="radio" datasrc="#ListaAlumnos10" datafld="sexo"
value="M">Mujer</p>
<hr width="500" align="left">
<p>Curso: <select datasrc="#ListaAlumnos10" datafld="curso" size="1">
<option value="HTML">HTML
<option value="UNIX">UNIX
<option value="Windows 2000">Windows 2000
<option value="XML">XML
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Nivel: <select datasrc="#ListaAlumnos10" datafld="nivel" size="1">
<option value="Iniciación">Iniciación
<option value="Básico">Básico
<option value="Medio">Medio
<option value="Avanzado">Avanzado
</select></p>
<p>Observaciones: <b><span datasrc="#ListaAlumnos10"
datafld="observaciones">
</span></b></p>
..........
..............
<xml id="ListaAlumnos11" src="alumnos04_18.xml"></xml>
<table id="lista" datasrc="#ListaAlumnos11" datapagesize="2" border="0"
cellspacing="4" cellpadding="2">
.............. Navegación controlada
<tr bgcolor="#cccccc">
<td align="center"><span datafld="numero"></span></td>
<td align="left"><span datafld="nombre"></span>&nbsp;
<b><span datafld="apellido"></span></b></td>
<td align="center"><span datafld="curso"></span></td>
<td bgcolor="#ff9999"><u><span datafld="nivel"></span></u></td>
<td align="center"><span datafld="edad"></span></td>
</tr>
</tbody>
</table>

<hr width="500">

<button onclick="lista.firstPage()" title="Principio">


&nbsp;&nbsp;|&lt;&lt;&nbsp;&nbsp; </button>&nbsp;
<button onclick="if (! ListaAlumnos11.recordset.BOF)
lista.previousPage()" title="Anterior">
&nbsp;&lt;&nbsp;</button>&nbsp;
<button onclick="if (! ListaAlumnos11.recordset.EOF) lista.nextPage()"
title="Siguiente">
&nbsp;&gt;&nbsp;</button>&nbsp;
<button onclick="lista.lastPage()" title="Final">
&nbsp;&nbsp;&gt;&gt;|&nbsp;&nbsp;</button>&nbsp;

</center>
</body>
</html>

También podría gustarte