PRACTICA 002: CREAR UN
XML
Ing. Honoria Reyes Macedo
Editor:
Block de notas, Atom, Dreamweaver
Editor
de XML: XMLNotepad
Navegador
web: Chrome, Firefox, safari, edge…
Tecnologias
web: HTML, CSS, XML
INTRODUCCION
El objetivo de esta práctica es hacer uso de un
editor de xml (XMLNotepad) y probar el resultado con el
archivo html de la práctica anterior, al final crear su propio archivo
de estilos “estiloXML2.css”
La carpeta de trabajo será “practica_xml”
Descargar el editor de XML “XMLNotepad”
de la siguiente url y ejecutarlo para su instalación
ACTIVIDADES
1.- Crear un archivo XML a partir de su
árbol XML
Observar los elementos y atributos del árbol(Algunos elementos se
manejan como nodos padre)
El nodo padre =alumno
El hijo = materia
1.1 Abrir “XML Notepad”
y crear un archivo nuevo à “materias.xml” en la carpeta “practica_xml” de la practica anterior
1.2 Agregar los elementos y atributos respectivos à En el menú insert
Observa que solo el primer elemento raiz es before, los siguientes seran child(hijos)
Nota: Cada que se inserta un
elemento, atributo, comentario, deberá ser sobre el elemento padre respectivo
Al final quedara así la vista del árbol(Tree View) : Capturar sus valores
en la parte derecha
1.3 Duplicar el elemento
materia 3 veces y cambiar los
valores
1.4 Seleccionar la pestaña XSL
Output (parte superior derecha del
editor)
Se
mostrará el archivo xml generado
1.5 Agregar el nombre del archivo “materias.xml” en el html de la práctica anterior
1.6 Probar en el navegador
2.- Crear el archivo
de estilos de materias.xml
2.1- Crear un archivo “estiloXML2.css” en la carpeta “css”
Apoyarse en este código de la práctica
anterior y cambiar los nombres de los elementos:
Nota:
Se podrán usar otros atributos como ejemplo:
clave, calificacion,
semestre, anio, secuencia, grupo{
padding-left: 5px;
color: blue;
font-size: 200%;
border-spacing: 10px;
border: black 1px solid;
}
Nota: Se podrá agrandar el tamaño del objet en los
estilos del html (estilopagina.css)
En #archivoXML agregar à height:80%;
Y en la section “alum” agregar à height: 20em;
2.2 En materias.xml agregar à xml-stylesheet y agregar sus valores
Otra opción es Abrir materias.xml con un notepad, Atom y
modificar:
Agregar la línea
sombreada en materias.xml
<?xml-stylesheet
type="text/css" href="css/estiloXML2.css" ?>
2.3 Probar en el navegador
Como evidencia enviar la visualización
en XMLNotepad y el resultado del punto
2.3
-------------------------------------------------0--0----------------------------------------------
--------------------------------------------------~------------------------------------------------
----------------------------------------------000--000-------------------------------------------
No hay comentarios.:
Publicar un comentario