sábado, 18 de junio de 2011

TALLER SOBRE XML CON CSS UTILIZANDO SOLAMENTE EL BLOCK DE NOTAS.

CONSTRUIR UN DOCUMENTO XML PASO A PASO

El taller consiste en:

·       Crear un documento XML desde el Block de Notas de Windows, ejecutarlo y ver como se muestra en el navegador sin una plantilla de diseño (css) asociada.

·       Asignarle al documento XML una plantilla y ver el cambio de apariencia al visualizarse en el navegador.


Para crear el documento XML seguir los siguientes pasos.

1.   Crear una carpeta en el directorio C:\. Llamada “ejemplo XML”
2.   Abrir el Block de Notas:
3.   En el Block de Nota digitar el siguiente texto:

4.   Guardarlo con el nombre “ejemplo1.xml”
5.   Cerrar el Block de Notas
6.   Localizar el archivo creado y ejecutarlo
Vemos que el documento mostrado en el explorador (Firefox) nos muestra datos que no queremos que se vean, como las etiquetas, además de que la parte que nos interesa mostrar se ve desordenada.

           Para corregir esto seguimos los siguientes pasos:

1.   Nos vamos a la carpeta que creamos y abrimos el archivo con el Block de notas.

2.   Entre la primera y segunda líneas de códigos insertamos las siguientes instrucciones.



3.   Guardamos los cambios y ejecutamos el archivo nuevamente en el explorador, el cual se verá de la siguiente forma:

Aquí el explorador ya no nos muestra las etiquetas que utilizamos para crear el documento, debido a que en la última línea de código que le agregamos al documento
()
Le decimos que lo muestre como una hoja con estilo, aunque hacemos referencia a la plantilla "articulo.css", que es la que en verdad contiene el estilo que queremos darle al documento, pero por lo meno ya no nos muestra las etiquetas, así es que estamos adelantando.

Ahora para que nuestro documento herede los detalles incluidos en la plantilla "articulo.css", primero tenemos que crearla, para ello realizamos los pasos descritos a continuación.

1.   Abrimos un nuevo Block de notas
2.   Digitamos las siguientes instrucciones:

titulop {display:block; font-family:Verdana; font-size:20pt; color:green; text-align:center}

salto1 {display:block; margin:20px; font-family:Verdana; font-size:10pt; font-style:italic}

tituloA {display:block; font-family:Arial; font-size:20pt; border-bottom:double 4pt navy; color:green; text-align:center}

salto2 {display:block; margin:40px; font-family:Verdana; font-size:10pt; font-style:italic}

nombre1 {display:block; font-family:Arial; margin-left:1cm; text-align:left; font-size:14pt; margin-bottom:10pt}

apellido1 {display:block; font-family:Arial; margin-left:1cm; text-align:left; font-size:14pt; margin-bottom:10pt}

matricula1 {display:block; font-family:Arial; margin-left:1cm; text-align:left; font-size:14pt; margin-bottom:10pt}

correo1 {display:block; font-family:Arial; margin-left:1cm; text-align:left; font-size:14pt; margin-bottom:10pt}

salto3 {display:block; margin:60px; font-family:Verdana; font-size:8pt; font-style:italic}

comentario {display:block; font-family:Arial; text-align:center; font-size:8pt; font-weight:bold; margin-bottom:10pt}

3.   Guardamos el archivo con el nombre articulo.css, en la misma carpeta donde esta el documento XML.
4.   Cerramos todos los Block de Notas
5.   Ejecutamos el documento XML y este debe de verse de la siguiente manera.

En conclusión el documento que contiene las etiquetas y la información que deseamos mostrar en nuestra página están en un documento distinto a donde se especifican las características de cada uno de los elementos que deseamos que se vean en la página como: el color y tipo de letra, el tamaño, la alineación, entre otros.