Conceptos HTML y XML
HTML
La red mundial WWW es una red de recursos de información. Se basa en 3 mecanismos para lograr que estos recursos estén disponibles a la mayor audiencia posible.
1. Un esquema uniforme de nombrado para localizar recursos en el Web (Ejemplo URIs (Universal Resource Identifier))
2. Protocolos para accesar los recursos nombrados en el Web (Ejemplo HTTP). 3. Hipertexto, para la fácil navegación entre los recursos (Ejemplo HTML).
Para publicar información de manera global se requirió de un lenguaje universal de entendimiento, un tipo de lengua materna para publicación que cualquier computadora entendiera. El lenguaje utilizado para publicación por el WWW es HTML (HyperText Markup Language).
El lenguaje HTML se basa en el uso de etiquetas también llamadas marcas, directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los símbolos menor que < y mayor que >. Básicamente, estas etiquetas indican al navegador, la forma de representar los elementos (texto, gráficos, etc...) que contiene el documento.
Estructura de un documento.
El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Languages). Esto implica que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas de esta manera:
<ETIQUETA parámetros> ... </ETIQUETA>
Hay ocasiones en que no es necesario cerrar la etiqueta. Un documento HTML esta definido por una etiqueta de inicio <HTML> y una de terminación </HTML>. Otras dos partes fundamentales de todo documento HTML son el encabezado, comprendido entre las etiquetas <HEAD> y </HEAD> y el cuerpo entre <BODY> y </BODY>.
Cabecera de un documento HTML.
La cabecera de un documento viene delimitada por las etiquetas <HEAD> y </HEAD> respectivamente y contiene fundamentalmente información sobre el documento. Todas ellas son opcionales, aunque el uso de la etiqueta <TITLE> es más que recomendado.
La etiqueta <TITLE> es la encargada de especificar el título del documento. El titulo del documento se suele mostrar generalmente en la parte superior del navegador. También es utilizado como identificador en las listas de favoritos o bookmarks.
(obviamente, en el supuesto de que se haya utilizado un software específico como ejemplo el Dreamweaver o FrontPage). En todos los casos, la información se escribe usando pares nombre/valor. Los siguientes ejemplos muestran la estructura para manejo de esta etiqueta. Para dichos ejemplos se esta empleando atributos de tipo HTTP-EQUIV y NAME. En ambos casos el valor se especifica en el campo CONTENT :
<META HTTP-EQUIV=”Refresh” CONTENT=”15; URL=http://www.unitec.mx/ > <META http-EQUIV=”Expires” CONTENT=”Caduca en enero de 2003 00:00 GMT”> <META NAME=”Autor” CONTENT=”Universidad Tecnológica de México”> <META http-EQUIV = “authoring_tool” CONTENT = “Home Site 2.5”>
La etiqueta para incluir comentarios dentro del código es <!-- comentarios -->. Su uso es ampliamente recomendado.
Cuerpo del documento HTML.
El cuerpo de un documento HTML contiene el texto de la página que se va a presentar. Las etiquetas de inicio y fin son <BODY> y </BODY> respectivamente, y entre ellas. Se debe situar todo el código fuente restante del documento.
La etiqueta <BODY> presenta una serie de atributos que permiten establecer una serie de características generales para todo el documento, como puede ser el color del texto, de los enlaces o del fondo del documento.
Los colores se pueden indicar de dos maneras diferentes: en formato hexadecimal o referenciados por su nombre preestablecido.
Si queremos indicar colores en formato hexadecimal, se deberá indicar la proporción de rojo, verde y azul correspondiente para formar el color deseado. Así pues, el valor RGB del color vendrá determinado por RR, GG y BB para los niveles de Rojo, Verde y Azul, con valores entre 0 y FF (0 a 255). Visto esto, el número “#000000” corresponde al color negro, “#FF0000” al rojo, “#00FF00” al verde, “#0000FF” al azul, “#FFFFFF” al blanco y así sucesivamente.
Sin embargo, es mucho más cómodo indicar el nombre del color en inglés, como black, teal, blue, navy, lime, white, purple, yellow, olive, reg, marron, gray, fucsia, green, silver y aqua.
Black Silver Gray White Maroon Red Purple Fuchsia Green Lime Olive Yellow Navy Blue Teal Aqua
Una opción muy usada en los documentos HTML es una imagen como fondo del documento. Esta imagen se mostrará debajo del texto y de las imágenes de contenido en la página. Si no es lo suficientemente grande como para rellenar todo el fondo del documento será reproducida tantas veces como sea necesario hasta completarlo.
El atributo que se encarga de determinar la imagen de fondo es BACKGROUND=”nombre del archivo gráfico”.
<HTML> <HEAD>
<TITLE>Ejemplo 1 de documento HTML</TITLE> </HEAD>
<!-- El color de fondo es gris, el texto negro, los enlaces aparecerán en azul, los visitados en violeta y los cuando se activen. -->
<BODY BGCOLOR=Gray TEXT =Black LINK =Blue VLINK=Fucsia ALINK =Red> </BODY>
</HTML>
Etiquetas principales para la estructuración del texto.
HTML no reconoce más de un espacio en blanco separando cualquier elemento o texto, es decir, los saltos de línea, tabulaciones y demás separadores son convertidos a un único espacio en blanco. Así pues existen una serie de etiquetas que se encargan de gestionar el aspecto general del texto del documento HTML. Los siguientes cuadros resumen las etiquetas principales utilizadas por HTML
Etiqueta Utilidad Resultado
<P>
Sirve para delimitar un párrafo. Inserta una línea en blanco
antes del texto.
Soy un párrafo
<CENTER> ... </CENTER>
Permite centrar todo el texto del párrafo.
Yo soy normal
Yo estoy centrado
<PRE WIDTH=x> ... </PRE>
Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro WIDTH especifica el número máximo de caracteres en una línea.
Estoy en paso fijo
<DIV ALIGN=x> ... </DIV>
Permite justificar el texto del párrafo a la izquierda
(ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY)
Yo estoy a la izquierda Yo al centro
Y yo a la derecha (recuerda a la política esto, oye) Yo estoy justificado, porque estoy en todos los lados.
<ADDRESS> ... </ADDRESS>
Para escribir direcciones (de esas donde vive la gente, no electrónicas).
Daniel Rodríguez Herrera C/Ecuador 9, 1ºB
28220 Majadahonda
<BLOCKQUOTE> ... </BLOCKQUOTE>
Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente.
Me gustaría
Otra etiqueta muy asociada a lo anterior es <BR>. Esta etiqueta sólo tiene marca inicial y se usa para cambiar de línea. Las cabeceras se emplean para dividir los documentos en secciones, o más concretamente, para marcar los títulos de estas secciones. La etiqueta que define la cabecera es <Hn> y </Hn>, donde n varía de 1 a 6.
Etiqueta Resultado
<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2>
Cabecera de nivel 2
<H3> ... </H3>
Cabecera de nivel 3
<H4> ... </H4>
Cabecera de nivel 4
<H5> ... </H5> Cabecera de nivel 5
<H6> ... </H6> Cabecera de nivel 6
Para poder separar partes del documento, la etiqueta <HR> dibuja una barra horizontal que divide la pantalla con un grosor y una longitud determinada a través de sus atributos. La siguiente lista de etiquetas mostrada se utiliza para dar formato a textos:
Etiqueta Utilidad Resultado
<B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
<S> ... </S> Para tachar. A mí, en cambio, nadie me quiere
<TT> ... </TT> Permite representar el texto en un tipo
de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ...
</SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
<BLINK> ... </BLINK>
Hace parpadear el texto. Resulta algo
Para dar formato a frases las etiquetas principales son:
Etiqueta Utilidad Resultado
<CITE> ... </CITE> Para citar un texto ajeno. Esta frase no es mía
<CODE> ... </CODE>
Para representar una etiqueta HTML
o código de un programa. int x=0;
<STRONG> ...
</STRONG> La cosa es importante. Hay cosas importantes.
<EM> ... </EM> Para dar énfasis. Hay que poner algunas cosas. énfasis en
<KBD> ... </KBD> Texto tecleado por el usuario. El usuario debe teclear Multivac es el mejor.
<VAR> ... </VAR> Representar variables de un código. La variable anteriormente...x, definida
<SAMP> ... </SAMP>
Para representar una serie de
caracteres literalmente. Estoy en un literal
<ABBR> ...
</ABBR> Abreviaturas. La WWW usa el protocolo http
La etiqueta <FONT> permite controlar casi totalmente el estilo de un bloque de texto. Podremos establecer el tamaño de la fuente mediante el atributo SIZE, la fuente de texto a usar mediante FACE y el color de la misma con el atributo COLOR. Debe cerrarse mediante </FONT>.
Ejemplo manejo de <FONT>:
<HTML> <HEAD>
<TITLE>Listado ejemplo de uso de FONT</TITLE> </HEAD>
<BODY>
<FONT SIZE=6 FACE=Cosmic COLOR=Blue>Este texto está en azul con una fuente Cosmic </FONT>
<BR>
<FONT SIZE=2 FACE=Arial COLOR=Black>Este otro en negro con la fuente Arial</FONT> <BR>
<FONT SIZE=5 FACE=Dauphin COLOR=Red>Para terminar <FONT COLOR=blue>un <FONT COLOR=Red>ejemplo<FONT COLOR=Navy> más<FONT COLOR=Black>. Final. </FONT>
</BODY> </HTML>
Otra función importante en el lenguaje HTML es el hipertexto. El hipertexto consiste en poder moverse a través de un documento o varios seleccionando zonas de texto o imágenes programadas para tal fin.
Cualquier elemento de un documento HTML puede ser definido como enlace, y una imagen, un párrafo de texto o un bloque de texto pueden ser definidos como enlaces a otros puntos del documento o de la red.
La estructura general de un enlace está formada por la etiqueta <A> seguida de determinados atributos. Para comprender rápidamente la filosofía de trabajo de los enlaces, veremos algunos ejemplos para ver su estructura y método de uso.
Como norma general un enlace se distingue del texto normal porque éste aparece resaltado en otro color (generalmente azul) y subrayado. Si se trata de una imagen con borde, éste aparecerá de color azul. Concretando un enlace será toda zona de la página Web sobre la que al pasar el cursor este cambia de aspecto, y aparecerá en la parte inferior del navegador el lugar al que se accederá.
Enlace a un punto de la misma página.
Cuando se trabaja con documentos muy extensos o índices suelen ponerse enlaces desde el principio del documento al final del mismo y viceversa, así se agiliza la tarea del usuario examinando el documento. Tomando esta situación como punto de partida, el primer paso consiste en marcar las distintas zonas del documento a las que se desea poder acceder de manera inmediata; en este caso el inicio y final del documento.
Así pues, en el principio del documento añadiremos la siguiente línea de código:
<A NAME=”iniciodocumento”>
Hemos marcado como inicio un punto en el comienzo del documento. Ahora nos situamos al final del mismo y añadimos otra línea de código.
<A NAME=”finaldocumento”>
Una vez marcadas las distintas zonas del documento vamos a situar en el mismo los enlaces que nos permitirán ir de arriba debajo de la página con un clic y viceversa. En el inicio y final del documento añadiremos las siguientes líneas respectivamente:
<!-- Esta línea debe situarse al comienzo del cuerpo del documento --> <A HREF=”#finaldocumento”>Pulsa aquí para ir al final de esta página </A>
<!-- Esta línea debe situarse al final del cuerpo del documento -->
<A HREF=”#iniciodocumento”>Pulsa aquí para ir al principio de esta página </A>
Ejemplo de página con ligas:
<HTML> <HEAD>
<!-- El color de fondo es gris, el texto negro, los enlaces aparecerán en azul, los visitados en violeta y los cuando se activen. -->
<BODY BGCOLOR=Gray TEXT =Black LINK=Blue VLINK=Fucsia ALINK =Red> <A NAME="iniciodocumento">
<A HREF="#finaldocumento">Pulsa aquí para ir al final de esta página </A> <H1><CENTER>World Wide Web</CENTER></H1>
<HR> <P>
<STRONG>La red mundial WWW (World Wide Web) es una red de recursos de información.</STRONG><BR>
La red se basa en tres mecanismos para lograr que estos recursos estén disponibles a la mayor audiencia posible.
</P> <BR>
<PRE width=30>
1. Un esquema uniforme de nombrado para localizar recursos en el Web (Ejemplo URIs (Universal Resource Identifier))<BR>
2. Protocolos para accesar los recursos nombrados en el Web (Ejemplo HTTP).<BR>
3. Hipertexto, para la fácil navegación entre los recursos (Ejemplo HTML).<BR>
</PRE> <BR> <P>
Para publicar información de manera global se requirió de un lenguaje universal de entendimiento, un tipo de lengua materna para publicación que cualquier computadora entendiera. El lenguaje utilizado para publicación por el WWW es HTML (HyperText Markup Language).
El lenguaje HTML se basa en el uso de etiquetas también llamadas marcas, directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los símbolos menor que < y mayor que >. Básicamente, estas etiquetas indican al navegador, la forma de representar los elementos (texto, gráficos, etc...) que contiene el documento.
</P>
<A NAME="finaldocumento">
<A HREF="#iniciodocumento">Pulsa aquí para ir al principio de esta página </A> </BODY>
</HTML>
Enlaces a otras páginas.
Cuando se dispone de varias páginas, es normal que desde una de ellas se pueda acceder a otra y, desde esta otra a una tercera, etc. Pues bien, el procedimiento es similar al anterior, sólo que esta vez, deberemos especificar el nombre del archivo que contiene la página a la que se quiere acceder.
Supongamos que tenemos dos páginas llamadas principal.html y secundaria.html. Para crear un enlace de la primera a la segunda, deberemos escribir:
<A REF=”secundaria.html”> Pulsa aquí para acceder a la otra página </A>
Visto esto, si el enlace se quisiera conectar a un punto concreto de la página marcado como opciones, la estructura del código sería la siguiente:
El siguiente ejemplo ilustra distintos modelos de enlaces:
<HTML> <HEAD>
<TITLE>Ejemplo Modelos de enlaces</TITLE> </HEAD>
<BODY>
<!-- Enlace a un URL -->
<A HREF="http://www.java.sun.com">Todo sobre Java</A> <BR>
<!-- Enlace a una dirección de correo -->
<A HREF="mailto:[email protected]">Dudas JavaEE ([email protected])</A> <BR>
<!-- Enlace activo la figura oracle.jpg Al pulsar sobre ella accede a la dirección--> <A HREF="http://www.oracle.com"><img src="Oracle.jpg"</A>
<BR>
<!-- Enlace que presenta en la pantalla una imagen al seleccionar--> <A HREF="Scanner.jpg">Pulsar para ver modelo de Scanner</A> <BR>
</BODY> </HTML>
Imágenes.
Para incluir imágenes en documentos HTML se emplea la etiqueta <IMG> junto con el tributo imprescindible: SRC. Un atributo muy útil es ALT. Su cometido es introducir una descripción de la imagen con la finalidad de que los usuarios que acceden a la página con un navegador en modo texto puedan hacerse una idea de las imágenes que contiene. Es importante conocer los distintos formatos gráficos que podemos utilizar. Si se especifica un formato no reconocido por HTML, el navegador simplemente lo ignora y no se visualiza la imagen en el documento. Los formatos permitidos son: GIF, JPEG, XBM o PNG.
El atributo ALIGN permite alinear la imagen respecto al texto en función de los siguientes valores principales:
Valor de ALIGN Utilidad
TOP Coloca el punto más alto de la imagen coincidiendo con más alto de la
línea de texto actual.
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.
BOTTOM(Por
defecto) Alinea el punto más bajo de la imagen con la base del texto.
LEFT Coloca la imagen a la izquierda del texto.
RIGHT Coloca la imagen a la derecha del texto.
Sonidos.
ya sea como música de fondo que se ejecuta automáticamente al cargar la página o bien para que sea activada por el usuario.
La etiqueta encargada de reproducir un archivo de audio es <BGSOUND> asociada al atributo SRC. Los archivos pudrán ser de formato *.wav, *.au, *.mid.
Un atributo fundamental es LOOP. Será usado para especificar el número de veces que se debe ejecutar el archivo de sonido. LOOP puede tener un valor numérico que indicará el número de veces que se reproducirá el archivo o valor infinite, que reproducirá el archivo indefinidamente.
El siguiente ejemplo muestra el uso de sonido en una página:
<HTML> <HEAD>
<TITLE>Ejemplo Manejo de Sonido</TITLE> </HEAD>
<BODY TEXT=Blue BGPROPERTIES="fixed"
BACKGROUND="D:\CursojavaEE\EjerciciosHTML\Imagenes\Logo_unitec_light.jpg"> <H1> <CENTER>Ejemplo Manejo de Sonido</CENTER> </H1>
<HR>
<BGSOUND SRC="Sonidos\inicio.wav" LOOP=5>
<CENTER><IMG SRC="Imagenes\guerrero.jpg" ></CENTER> </BODY>
</HTML>
Netscape tiene otra etiqueta para gestionar el sonido (entre otras cosas): <EMBED> asociada al atributo SRC. A diferencia del navegador de Explorer, Netscape presenta en pantalla una ventana de control de audio con las funciones de avance, retroceso, ejecución y Stop.
Tablas.
El tag que define la tabla es <TABLE> </TABLE>, toda la tabla debe estar entre estas dos etiquetas, y las opciones que se apliquen aquí tendrán efecto sobre toda la tabla.
Con <TR> </TR> se define cada una de las líneas de la tabla, los atributos que se empleen en esta etiqueta tendrá efecto en toda la línea. En resumen, tendremos tantos <TR>...</TR> como filas tenga la tabla y, como la tabla de arriba tiene dos filas, entonces tiene dos tags <TR>...</TR>. También podemos utilizar las etiquetas <TH> y </TH> para definir el inicio y final de una celda de cabecera. El contenido de ésta aparecerá en negrita y centrado.
Dentro de cada fila indicamos una celda concreta con las etiquetas <TD> </TD>, entre las cuales pondremos lo que queremos que este en esa celda (puede ser texto, imágenes o cualquier otra cosa).
La etiqueta <CAPTION> permite asignar un título a la tabla. Esta etiqueta tiene de parámetro el ALIGN que puede tomar valores de top y bottom.
<HTML> <HEAD>
<TITLE>Ejemplo de dimensionado de celdas</TITLE> </HEAD>
<BODY BGPROPERTIES="fixed" BACKGROUND="\Imagenes\Logo_unitec_light.jpg"> <H1> <CENTER>Ejemplo Manejo de tablas en HTML</CENTER> </H1>
<HR>
<TABLE BORDER=5 BGCOLOR=YELLOW CELLSPACING=10 CELLPADDING=5> <CAPTION>Ejemplo de alineaciones y dimensionados</CAPTION>
<TR>
<TD COLSPAN=2 ALIGN=Right>ESTO OCUPA DOS CELDAS</TD> <TD>CELDA</TD>
<TD>CELDA</TD> </TR>
<TR>
<TD ROWSPAN=2 VALIGN=bottom>ESTO OCUPA DOS RENGLONES</TD> <TD>CELDA</TD>
<TD>CELDA</TD> </TR>
<TR>
<TD BGCOLOR=GREEN>CELDA</TD> <TD>CELDA</TD>
<TD>CELDA</TD> </TR>
</TABLE> </BODY>
</HTML>
Frames.
Los frames es la herramienta que el HTML pone a nuestra disposición para presentar varias páginas en una sola. Lo primero que necesitamos es una página "madre" que dividiremos en viñetas (los frames propiamente dichos), y una serie de páginas "hijas", que serán las que ocupen esas viñetas.
Para crear los frames usamos la sentencia <FRAMESET>...</FRAMESET>, un aspecto importante a considerar es que el FRAMESET debe ser declarado en la cabecera de la página (El BODY no tiene efecto).
Formularios.
Los formularios son el sistema del que nos provee el HTML para enviar información desde una página web a algún programa u otro recurso en un ordenador remoto. Esto quiere decir que un formulario no sirve de mucho si no tenemos un lugar al que enviarlo.
donde está alojada la página (o en otra máquina de Internet), y envían una respuesta al navegador.
La etiqueta principal que tenemos que tener en cuenta es el que crea un formulario. Esta deberá englobar en su interior a todos los elementos que formen parte de este: <FORM>...</FORM>
Dentro debemos colocar algunos elementos, llamados controles, como cuadros de texto, botones, ect. Para crear cada uno de estos elementos tenemos la directiva <INPUT>, que tiene un atributo obligatorio: TYPE, que es el que determina el tipo concreto de control de que se trata:
<INPUT TYPE="tipo de control">
Donde "tipo de control" puede ser uno de los siguientes:
"SUBMIT" crea el clásico botón "Enviar", y es el que, al ser pulsado, envía los datos del formulario a la dirección especificada en ACTION.
"RESET" inserta un botón "Borrar" que, al ser pulsado, elimina los datos de todos los controles del formulario que lo contiene.
"BUTTON" crea un botón.
"TEXT" crea un cuadro para insertar una línea de texto.
"PASSWORD" hace lo mismo que "TEXT", pero los caracteres que se escriban no se verán en pantalla, sino que serán sustituidos por asteriscos.
"CHECKBOX" crea una caja de verificación.
"RADIO" crea un "Radio Button", algo parecido a lo anterior, pero con la sutil diferencia de que suelen ser redondos, estar agrupados, y que, dentro de un grupo solo puede aparecer uno marcado cada vez.
"IMAGE" funciona exactamente igual que "SUBMIT", pero aquí puedes especificar una imagen para que aparezca en lugar del aburrido botón tradicional.
"HIDDEN" no muestra nada, absolutamente nada. Si se pone dentro del formulario, este se verá exactamente igual. ¿Y para que sirve entonces? Pues para enviar al programa en el servidor, siempre que se use ese formulario, información que pueda ser necesaria, pero que no necesite cambiarse ni verse.
"FILE" sirve para crear un cuadro de diálogo mediante el que enviar un archivo desde tu disco duro. No está soportado en todos los navegadores.
XML
Antes de nada conviene repasar su historia y precedentes. La versión 1.0 del lenguaje XML es una recomendación del W3C desde Febrero de 1998, pero se ha trabajado en ella desde un par de años antes. Está basado en el anterior estándar SGML (Standard Generalized Markup Language, ISO 8879), que data de 1986, pero que empezó a gestarse desde principios de los años 70, y a su vez basado en el GML creado por IBM en 1969.
modelo de objetos (en forma de API) que permite acceder a las diferentes partes que pueden componer un documento XML o HTML.
SGML proporciona un modo consistente y preciso de aplicar etiquetas para describir las partes que componen un documento, permitiendo además el intercambio de documentos entre diferentes plataformas. Sin embargo, el problema que se atribuye a SGML es su excesiva dificultad; baste con pensar que la recomendación ocupa unas 400 páginas.
Así que, manteniendo su misma filosofía, de él se derivó XML como subconjunto simplificado, eliminando las partes más engorrosas y menos útiles. Como su padre XML es un metalenguaje: es un lenguaje para definir lenguajes. Los elementos que lo componen pueden dar información sobre lo que contienen, no necesariamente sobre su estructura física o presentación, como ocurre en HTML.
Desde su creación, XML ha despertado encontradas pasiones, y como para cualquier tema en Internet, hay gente que desde el principio se ha dejado iluminar por sus expectativas, mientras que otras muchas lo han denostado o simplemente ignorado.
Durante el año 1998 XML ha tenido un crecimiento exponencial, y ello se refiere sobre todo a sus apariciones en los medios de comunicación de todo tipo, menciones en páginas web, soporte software, tutoriales, etc.
Una pregunta que ha acudido a muchos de nosotros es: ¿será XML el sustituto de HTML, que tan bien conocemos, dominamos, amamos y odiamos? No. Esa es la respuesta, básicamente XML no ha nacido sólo para su aplicación en Internet, sino que se propone como lenguaje de bajo nivel (a nivel de aplicación, no de programación) para intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto, hojas de cálculo, y casi cualquier cosa que podamos pensar. Sin ir más lejos, algunos lenguajes, definidos en XML, recorren áreas como la química y la física, las matemáticas, el dibujo, tratamiento del habla, y otras muchas.
Pues bien, no lo sustituirá, pero, aplicado en Internet, sí va a mejorar algo de lo que HTML empezaba a adolecer desde hace un tiempo: establece un estándar fijo al que atenerse, y separa el contenido de su presentación. Esto significa que a partir de ahora, o mejor desde el momento que se aplique definitivamente, para ver un documento web no estaremos sujetos a la parte del estándar de hojas de estilo (CSS) que soporte el Navigator de Netscape o el IExplorer de Microsoft, ni al lenguaje de script del servidor y al modelo de objetos definido por MS, Nestcape, etc. Además tampoco estaremos atados a la plataforma: podremos ver la misma información desde nuestro PC o desde un Hand-HeldPC, un navegador textual, una lavadora, un microondas o un reloj con acceso a Internet, con presentaciones adecuadas a cada entorno.
Estructura.
Lo primero que debemos saber es que hay dos tipos de documentos XML: válidos y bien formados. Éste es uno de los aspectos más importantes de este lenguaje, así que hace falta entender bien la diferencia:
• Bien formados: son todos los que cumplen las especificaciones del lenguaje respecto a las reglas sintácticas que después se van a explicar, sin estar sujetos a unos elementos fijados en un DTD (luego veremos lo que es un DTD). De hecho lo s documentos XML deben tener una estructura jerárquica muy estricta, de la que se hablará más tarde, y los documentos bien formados deben cumplirla.
• Válidos: Además de estar bien formados, siguen una estructura y una semántica determinada por un DTD: sus elementos y sobre todo la estructura jerárquica que define el DTD, además de los atributos, deben ajustarse a lo que el DTD dicte.
DTD es una definición de los elementos que puede haber en el documento XML, y su relación entre ellos, sus atributos, posibles valores, etc. De hecho DTD está por Document Type Definition, o Definición de Tipo de Documento. Es una especie de definición de la gramática del documento, en definitiva. Más adelante hablaré de cómo se incluye un DTD en un documento XML, pero lo importante ahora es entender que cuando se procesa cualquier información formateada mediante XML, lo primero es comprobar si está bien formada, y luego, si incluye o referencia a un DTD, comprobar que sigue sus reglas gramaticales. Hay pues diferencia entre los parsers que procesan documentos XML sin comprobar que siguen las reglas marcadas por un DTD (sólo comprueban que está bien formado), que se llaman parsers no validadores, y los que sí lo hacen, que son parsers validadores (comprueba que además de bien formado se atiene a su DTD y es válido). Veamos un ejemplo simple de un documento XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <ficha>
Lo primero que tenemos que observar es la primera línea. Con ella deben empezar todos los documentos XML, ya que es la que indica que lo que la sigue es XML. Aunque es opcional, es más que recomendable incluirla siempre. Puede tener varios atributos (los campos que van dentro de la declaración), algunos obligatorios y otros no:
• version: indica la versión de XML usada en el documento. La actual es la versión 1.0, con lo que no debe haber mucho problema. Es obligatorio ponerlo, a no ser que sea un documento externo a otro que ya lo incluía (ya veremos qué documentos externos puede haber).
• encoding: la forma en que se ha codificado el documento. Se puede poner cualquiera, y depende del parser el entender o no la codificación. Por defecto es UTF-8, aunque podrían ponerse otras, como UTF-16, US-ASCII, ISO-8859-1, etc. No es obligatorio salvo que sea un documento externo a otro principal.
• standalone: indica si el documento va acompañado de un DTD ("no"), o no lo necesita ("yes"); en principio no hay porqué ponerlo, porque luego se indica el DTD si se necesita.
En cuanto a la sintaxis del documento, y antes de entrar en el estudio de las etiquetas, hay que resaltar algunos detalles importantes y a los que nos debemos acostumbrar:
Los documentos XML son sensibles a mayúsculas, esto es, en ellos se diferencia las mayúsculas de las minúsculas. Por ello <FICHA> sería una etiqueta diferente a <ficha>. Además todos los espacios y retornos de carro se tienen en cuenta (dentro de las etiquetas, en los elementos).
Hay algunos caracteres especiales reservados, que forman parte de la sintáxis de XML: <, >, &, " y '. En su lugar cuando queramos representarlos deberemos usar las entidades <, >, &, " y ' respectivamente.
Los valores de los atributos de todas las etiquetas deben ir siempre entrecomillados. Son válidas las dobles comillas (") y la comilla simple (').
Pasando al contenido en sí, vemos etiquetas que nos recuerdan a HTML, y que contienen los datos. Es importante diferenciar entre elementos y etiquetas: los elementos son las entidades en sí, lo que tiene contenido, mientras que las etiquetas sólo describen a los elementos. Un documento XML está compuesto por elementos, y en su sintaxis éstos se nombran mediante etiquetas. Hay dos tipos de elementos: los vacíos y los no vacíos. Hay varias consideraciones importantes a tener en cuenta al respecto:
Toda etiqueta no vacía debe tener una etiqueta de cerrado: <etiqueta> debe estar seguida de </etiqueta>. Esto se hace para evitar la aberración (en el buen sentido de la palabra) a la que habían llegado todos los navegadores HTML de permitir que las etiquetas no se cerraran, lo que deja los elementos sujetos a posibles errores de interpretación.
Todos los elementos deben estar perfectamente anidados: no es válido poner:
<ficha><nombre>Angel</ficha></nombre>
<ficha><nombre>Angel</nombre> </ficha>.
Los elementos vacíos son aquellos que no tienen contenido dentro del documento. Un ejemplo en HTML son las imágenes. La sintaxis correcta para estos elementos implica que la etiqueta tenga siempre esta forma: <etiqueta/>.
DTD Definición de tipos de documento.
Como antes se comentó, los documentos XML pueden ser válidos o bien formados (o no serlo, claro, pero entonces no serían documentos XML :-). En cuanto a los válidos, ya sabemos que su gramática está definida en los DTD.
Hay varios modos de referenciar un DTD en un documento XML:
Incluir dentro del documento una referencia al documento DTD en forma de URI (Universal Resource Identifier, o identificador universal de recursos) y mediante la siguiente sintáxis:
<!DOCTYPE ficha SYSTEM "http://www.dat.etsit.upm.es/~abarbero/DTD/ficha.dtd">
En este caso la palabra SYSTEM indica que el DTD se obtendrá a partir de un elemento externo al documento e indicado por el URI que lo sigue, por supuesto entrecomillado.
O bien incluir dentro del propio documento el DTD de este modo:
<?xml version="1.0"?> <!DOCTYPE ficha [
<!ELEMENT ficha (nombre+, apellido+, direccion+, foto?)> <!ELEMENT nombre (#PCDATA)>
<!ATTLIST nombre sexo (masculino|femenino) #IMPLIED> <!ELEMENT apellido (#PCDATA)>
<!ELEMENT direccion (#PCDATA)> <!ELEMENT foto EMPTY>
]> <ficha>
<nombre>Angel</nombre> <apellido>Barbero</apellido> <direccion>c/Ulises, 36</direccion> </ficha>
La forma de incluir el DTD directamente como en este ejemplo pasa por añadir a la declaración <!DOCTYPE y después del nombre del nombre del tipo de documento, en vez de la URI del DTD, el propio DTD entre los símbolos '[' y ']'. Todo lo que hay entre ellos será considerado parte del DTD.
entre paréntesis, si el elemento es no vacío, se indica el contenido que puede tener el elemento: la lista de elementos hijos o que descienden de él si los tiene, separados por comas; o el tipo de contenido, normalmente #PCDATA, que indica datos de tipo texto, que son los más habituales. si es un elemento vacío, se indica con la palabra EMPTY. Ejemplos de cada caso se pueden ver en el DTD de mostrado.
A la hora de indicar los elementos descendientes (los que están entre paréntesis) vemos que van seguidos de unos caracteres especiales: '+', '*', '?' y '|'. Sirven para indicar qué tipo de uso se permite hacer de esos elementos dentro del documento:
+ : uso obligatorio y múltiple; permite uno o más elementos de ese tipo dentro del elemento padre, pero como mínimo uno.
* : opcional y múltiple; puede no haber ninguna ocurrencia, una o varias. ? : opcional pero singular; puede no haber ninguno o como mucho uno.
| : equivale a un OR, es decir, da la opción de usar un elemento de entre los que forman la expresión, y solo uno.
De este modo, si por ejemplo encontramos en un DTD la siguiente declaración:
<!ELEMENT ficha (nombre+, apellido+, direccion*, foto?, telefono*|fax*)>
Sabremos del elemento ficha que puede contener los siguientes elementos: un nombre y un apellido como mínimo, pero puede tener más de uno de cada; opcionalmente puede incluirse una o varias direcciones, pero no es obligatorio; opcionalmente también se puede incluir una única foto; y por fin, pueden incluirse, aunque no es obligatorio en ninguno de los dos casos, uno o más teléfonos o uno o más números de fax.
Como ya se comentó un documento XML presenta una jerarquía muy determinada, definida en el DTD si es un documento válido, pero siempre inherente al documento en cualquier caso (siempre se puede inferir esa estructura a partir del documento sin necesidad de tener un DTD en el que basarse), con lo que se puede representar como un árbol de elementos. Existe un elemento raíz, que siempre debe ser único (sea nuestro documento válido o sólo bien formado) y que se llamará como el nombre que se ponga en la definición del <!DOCTYPE si está asociado a un DTD o cualquiera que se desee en caso contrario. Y de él descienden las ramas de sus respectivos elementos descendientes o hijos. De este modo la representación en forma de árbol del documento XML del ejemplo sería:
Vemos que es un documento muy sencillo, con una profundidad de 2 niveles nada más: el elemento raíz ficha, y sus hijos nombre, apellido, direccion, foto. Es obvio que cuanta más profundidad, mayor tiempo se tarda en procesar el árbol, pero la dificultad siempre será la misma gracias a que se usan como en todas las estructuras de árbol algoritmos recursivos para tratar los elementos.
El DTD, por ser precisamente la definición de esa jerarquía, describe precisamente la forma de ese árbol. La diferencia (y la clave) está en que el DTD define la forma del árbol de elementos, y un documento XML válido puede basarse en ella para estructurarse, aunque no tienen que tener en él todos los elementos, si el DTD no te obliga a ello. Un documento XML bien formado sólo tendrá que tener una estructura jerarquizada, pero sin tener que ajustarse a ningún DTD concreto.
Para la definición de los atributos, se usa la declaración <!ATTLIST, seguida de:
• El nombre de elemento del que estamos declarando los atributos; • El nombre del atributo;
• Los posibles valores del atributo, entre paréntesis y separados por el carácter |, que al igual que para los elementos, significa que el atributo puede tener uno y sólo uno de los valores incluidos entre paréntesis. O bien, si no hay valores de finidos, se escribe CDATA para indicar que puede ser cualquier valor (alfanumérico, vamos). También podemos indicar con la declaración ID que el valor alfanumérico que se le de será único en el documento, y se podrá referenciar ese elemento a través de es e atributo y valor;
• De forma opcional y entrecomillado, un valor por defecto del atributo si no se incluye otro en la declaración;
• Por último, si es obligatorio cada vez que se usa el elemento en cuestión declarar este atributo, es necesario declararlo con la clausula #REQUIRED; si no lo es, se debe poner #IMPLIED, o bien #FIXED si el valor de dicho atributo se debe mantener fijo a lo largo de todo el documento para todos los elementos del mismo tipo (notar que no es lo mismo esto a lo que significaba ID).
Es importante destacar un aspecto de cara a la optimización del diseño de nuestros DTDs: muchas veces tendremos que decidir entre especificar atributos de nuestros elementos como elementos descendientes o como atributos en sí mismos. Esto es, podríamos suponer una pieza de maquinaria con unas características determinadas, y de la que podemos hablar de dos formas diferentes:
<pieza>MiPieza <color>Rojo</color> </pieza>
o bien considerar la opción:
<pieza color="Rojo">Mipieza</pieza>