Detrás de cada página bajada de Internet como ésta que el lector está leyendo, hay un código fuente de texto que mediante etiquetas y pares complementarios de etiquetas instruye al navegador sobre algunas de las características con las cuales será presentado visualmente el material al usuario, así como se pueden incluír enlaces de domicilios de sitios de donde será bajada más información (imágenes fotográficas, archivos de sonido, videos, enlaces a otras páginas Web, etc.). Aunque en las siglas HTML se le identifica como un lenguaje (Hypertext Markup Language), HTML no puede ser considerado realmente como un lenguaje, al menos no como un lenguaje de programación, en virtud de que carece de enunciados que permitan la elaboración de un conjunto de instrucciones en cuya ejecución haya saltos y transferencias tanto condicionales como incondicionales, razón por la cual nos referiremos aquí al HTML como un conjunto de convenciones.
Las etiquetas del código fuente están predefinidas y tienen la forma:
<ETIQUETA>
no importando en el HTML tradicional de viejo uso si se usan mayúsculas o minúsculas. Cuando se usan como pares complementarios, tienen la forma:
<ETIQUETA> ... </ETIQUETA>
en donde entre cada par de etiquetas se mete texto o información adicional. La primera etiqueta del par puede contener uno o más atributos, separados por lo menos por un espacio en blanco, que proporcionan información complementaria para que la etiqueta pueda llevar a cabo alguna acción:
<ETIQUETA atributo(s) >
Advertencia: Es importante tener presente en todo momento que no hay una sola versión de HTML, el lenguaje de marcado de hipertexto ha ido evolucionando desde su primera aparición (considerada como HTML 1.0, aunque en ése entonces ni siquiera tenía un número de versión cuando apareció por vez primera) hasta la versión HTML 5 en la cual se dá énfasis al uso de las Hojas de Estilo en Cascada CSS como el método predilecto para la creación de cosas tales como los marcos (frames) relegando otros recursos del HTML al rincón del olvido, e inclusive es posible que algunos de los atributos de las etiquetas HTML que funcionaban muy bien antes en todos los navegadores dejen de funcionar (agravando el problema de que ya de por sí no todos los atributos eran aceptados por igual en todos los navegadores) . Si el programador Web realmente quiere que sus páginas Web sean vistas e interpretadas por la gran mayoría de los usuarios conectados a Internet de la manera en la cual lo desea, entonces, en virtud de que no tiene manera de saber en un momento dado cuáles son los navegadores de mayor uso y en qué porcentajes están siendo usados, está prácticamente obligado a descargar e instalar en su máquina de prueba todas las versiones actualizadas de los navegadores de mayor uso (Firefox, Internet Explorer, Chrome, Opera, Safari, etc.) y probar sus creaciones en cada navegador. No es necesario repetir la prueba en varios tipos de máquina usando distintos sistemas operativos puesto que el navegador en sí es el que debe garantizar una independencia de la plataforma utilizada.
Las etiquetas HTML y sus atributos, cuando los hay, son las siguientes:
<-- ... -->
Este par de símbolos delimitadores se usa para agregar comentarios. Todo lo que se ponga entre este par de etiquetas será ignorado por el navegador.
<HTML> ... </HTML>
El código fuente de toda la página Web HTML es puesto entre este par de etiquetas, que marcan el inicio y el final del documento.
<META>
Esta etiqueta opcional es usada para proporcionar metainformación proporcionando palabras clave a los motores de búsqueda acerca de documentos HTML, y sirve como referencia de índice dentro de los motores de búsqueda de Internet cuando los usuarios están buscando páginas que tengan cierto tipo de contenido. Este recurso fue muy abusado en un principio para promocionar páginas Web aumentando la presencia de las mismas en los motores de búsqueda mediante un exceso de palabras clave recurriendo a una cantidad exagerada de etiquetas META, lo cual fue desactivado con robots de búsqueda inteligentes que ignoran los excesos de información meta usados intencionalmente para promocionar alguna página). La etiqueta <META> también es usada para proporcionar cabeceras especiales HTTP que pueden ser útiles en la recuperación de un documento, además de proporcionar información adicional como fecha de expiración. Nada de lo que es puesto dentro de una etiqueta META es mostrado por el navegador al usuario final. La información meta es puesta usualmente entre el par de etiquetas <HEAD>, y los atributos (como HTTP-EQUIV, CONTENT, NAME) son dados usualmente un formato de clave-valor:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Ejemplo del uso de etiquetas META</title>
</head>
<TITLE> ... </TITLE>
Entre este par de etiquetas opcionales puesto al comienzo del documento Web se le dá un título al documento, mismo título que será desplegado por el navegador en su tope como el título del documento.
<HEAD> ... </HEAD>
Entre este par de etiquetas usualmente se definen funciones y/o se pone código ejecutable que será utilizados en el cuerpo principal del documento Web.
<BODY atributo(s)> ... </BODY>
Entre este par de etiquetas se pone el contenido del documento que será mostrado visualmente por el navegador al usuario. Un atributo importante del par de etiquetas <BODY> es el que nos permite fijar el color de fondo (background) de la ventana de la página HTML, el atributo bgcolor, al cual se le asigna un número binario de 24 bits que a su vez está formado por tres grupos de ocho bits en el orden RGB; el primer grupo dá la intensidad de los puntos de color rojo (R, red) en la pantalla, el segundo grupo dá la intensidad de los puntos de color verde (G, green) y el tercer grupo dá la intensidad de los puntos de color azul (B, blue) en la pantalla. En cada caso, la intensidad puede variar desde 00000000 (00 hexadecimal) que representa la ausencia total del color hasta 11111111 (FF hexadecimal) que representa la intensidad máxima posible en la luminosidad de los puntos en la pantalla. El color blanco, obtenido combinando las intensidades máximas posibles de cada grupo, está especificado por el número hexadecimal:
#FFFFFF
mientras que el color negro está especificado por el número hexadecimal 000000. Puede verse que, en aras de una mejor legibilidad, las combinaciones de colores se especifican en notación hexadecimal anteponiendo para ello el símbolo “#”. El siguiente código produce una ventana con fondo rojo:
<HTML>Podemos dar así los siguientes fondos de color a la ventana con las combinaciones de color mostradas:
<HEAD>
<TITLE>Demostración del atributo bgcolor</TITLE>
</HEAD>
<BODY bgcolor="#FF0000">
<h2>Esta ventana tiene un fondo rojo</h2>
</BODY>
</HTML>
#00FF00 - verde puro (todos los puntos verdes encendidos al máximo)Puesto que, en el sistema binario, hay 255 intensidades diferentes para cada color desde cero intensidad hasta el máximo posible para cada uno de los tres colores, hay un total de 16,581,375 distintas combinaciones posibles de colores diferentes (¡16 millones de colores!), lo cual se considera más que suficiente para cualquier propósito (se estima que el ojo humano promedio puede distinguir alrededor de diez millones de colores).
#0000FF - azul puro (todos los puntos azules encendidos al máximo)
#FFFF00 - amarillo (puntos rojos y azules encendidos al máximo)
#0000FF - ciano (puntos verdes y azules encendidos al máximo)
#FF00FF - magenta (puntos rojos y azules al máximo)
<BR>
En las versiones preliminares de HTML, esta etiqueta de “line break” no tiene par complementario. Se usa para producir en un texto un salto de línea a la siguiente línea. De este modo, lo siguiente:
Esta es la primera línea.<BR>Esta es la segunda línea.<BR>Esta es la tercera línea.
será mostrado por el navegador del siguiente modo:
Esta es la primera línea.
Esta es la segunda línea.
Esta es la tercera línea.
Las actualizaciones más recientes de HTML indican que se debe usar en la forma <BR />.
<P> ... </P>
La primera versión de HTML especificaba a la etiqueta de párrafo <P> como una etiqueta solitaria sin par complementario, puesta al final de cada párrafo para que así el texto subsecuente quedara separado por una línea en blanco, y no había una etiqueta complementaria correspondiente:
Con JavaScript ejecutándose en la página Web en la máquina del usuario, se puede enviar información a un programa CGI en el servidor, y el programa CGI a su vez puede enviar de regreso más código JavaScript (que el navegador del usuario puede procesar) conteniendo información adicional.<P>A partir de HTML 4.01, las etiquetas de párrafo se volvieron en etiquetas de pares, indicando tanto el principio como el final de cada párrafo:
<P>Con JavaScript ejecutándose en la página Web en la máquina del usuario, se puede enviar información a un programa CGI en el servidor, y el programa CGI a su vez puede enviar de regreso más código JavaScript (que el navegador del usuario puede procesar) conteniendo información adicional.</P>
<DIV atributo(s)> ... </DIV>
Este etiquetaje de marcado no formaba parte del HTML original cuando empezó a ser usado por vez primera. Si se usa sin atributo alguno para enmarcar porciones de texto, entonces el efecto de las etiquetas <div> no producirá diferencia alguna en comparación con el efecto que producen las etiquetas usadas para separar párrafos <P>, y cada párrafo precedente será separado del párrafo que le sigue con una línea en blanco. Sin embargo, entre cada par de etiquetas complementarias <div> se pueden meter varios elementos HTML tales como imágenes o tablas, ello debido a que las etiquetas <div> se encargan de subdividir (de allí el nombre) la ventana principal del navegador en secciones que pueden ser estilizadas independientemente con la ayuda de las Hojas de Estilos en Cascada CSS. El atributo más importante que se puede usar en este tipo de etiquetas es aquél mediante el cual se le proporciona a cierto elemento <div> un identificador, ya sea con el atributo id o con el atributo class:
<DIV id ="contenido1"> ... </DIV>
<DIV class="listado"> ... </DIV>
<B> ... </B>
El texto puesto entre este par de etiquetas de “bold” será mostrado por el navegador con legras negritas. De este modo, lo siguiente:
La <B>ociosidad</B> es la madre de todos los vicios.
será mostrado por el navegador como:
La ociosidad es la madre de todos los vicios.
<I> ... </I>
El texto puesto entre este par de etiquetas será mostrado en letras itálicas. De este modo, lo siguiente:
El <I>cubo de Rubik</I> es útil en el aprendizaje de la Teoría de Grupos.
será mostrado por el navegador como:
El cubo de Rubik es útil en el aprendizaje de la Teoría de Grupos.
<U> ... </U>
El texto puesto entre este par de etiquetas de “underline” será subrayado. De este modo, lo siguiente:
Homero escribió en <U>La Ilíada</U> el sitio de Troya.
será mostrado por el navegador como:
Homero escribió en La Ilíada el sitio de Troya.
<FONT atributo> ... </FONT>
Este par de etiquetas puede cambiar el tamaño de la fuente usada por el texto que es encapsulado entre ellas. Hay un solo atributo en la primera etiqueta, SIZE="", usado para especificar el tamaño de la fuente, el cual puede variar de 1 a 7, siendo 3 el valor predeterminado:
<FONT SIZE="7">Este aparecerá en caracteres muy grandes</FONT>
<FONT SIZE="1">Este texto aparecerá en caracteres muy pequeños</FONT>
<SUP> ... </SUP>
El texto puesto entre este par de etiquetas será mostrado como texto superscripto. De este modo, lo siguiente:
2<SUP>4</SUP> = 16
será mostrado por el navegador como:
24 = 16
<SUB> ... </SUB>
El texto puesto entre este par de etiquetas será mostrado como texto subscripto. De este modo, lo siguiente:
PRESION<SUB>v=0<SUB>
será mostrado por el navegador como:
PRESIONv=0
<HR>
<HR atributo(s) />
Esta etiqueta no tiene una pareja complementaria de terminación. Hace que se traze una línea horizontal de un extremo a otro del navegador. De este modo, lo siguiente:
Este texto es colocado arriba de una línea horizontal.
<HR>
Este texto es colocado debajo de una línea horizontal.
será mostrado por el navegador como:
Este texto es colocado arriba de una línea horizontal.
Este texto es colocado debajo de una línea horizontal.
Los atributos de la etiqueta <HR> son SIZE para especificar en pixeles el grosor de la línea:
<HR SIZE="2" />
<HR SIZE="4" />
y WIDTH para la anchura de la línea horizontal especificada como un porcentaje de la anchura del navegador:
<HR WIDTH="75%" />
<HR WIDTH="50%" />
<HR WIDTH="25%" />
y ALIGN para situar la línea horizontal (en caso de que su anchura no sea del valor predeterminado de 100%) a la izquierda (ALIGN="left"), a la derecha (ALIGN="right") y al centro (ALIGN="center"):
<HR WIDTH="75% ALIGN="left" />
<HR WIDTH="50%" ALIGN="center" />
<HR WIDTH="25%" ALIGN="right" />
<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>
Estas son las etiquetas de cabecera (heading) de texto, siendo <H1> la de mayor nivel y siendo <H6> la de menor nivel. El código fuente HTML que se muestra a continuación:
<H1>Catálogo general</H1>
<H2>Sección técnica</H2>
<H3>División: Física del Estado Sólido</H3>
<H4>Area de interés: Microelectrónica</H4>
<H5>Temática: Familias CMOS</H5>
<H6>Libro: El proceso NMOS</H6>
produce el siguiente resultado en los navegadores de mayor uso:
Catálogo general
Sección técnica
División: Física del Estado Sólido
Area de interés: Microelectrónica
Temática: Familias CMOS
Libro: El proceso NMOS
<A> ... </A>
Este par de etiquetas proporcionan el anclaje “anchor” para crear un hipervínculo (enlace) hacia otra localidad en el mismo documento o en otro documento. El texto puesto entre el par de etiquetas será el hipervínculo hacia la nueva localidad especificada con el atributo HREF usado como HREF="..." con el domicilio puesto entre las dobles comillas. De este modo, lo siguiente:
<A HREF="http://www.logica-digital.blogspot.com">Fundamentos de Lógica Digital</A>
creará en el navegador el siguiente hipervínculo:
<IMG>
Esta es la etiqueta de imagen, y no tiene par complementario. Se usa para agregar una imagen gráfica al documento cuyo nombre de archivo y localidad son especificados con el atributo SRC="..." en donde el texto puesto entre el par de etiquetas es el hipervínculo hacia la imagen. De este modo, lo siguiente:
<IMG SRC="Cuquita.jpg">
hará que se reproduzca un archivo fotográfico JPG de nombre “Cuquita” en el documento.f
<UL> ... </UL>
Entre este par de etiquetas se ponen los elementos de una lista no-ordenada (Unordered List). Cada elemento de la lista debe ser precedido por la etiqueta <LI>. El siguiente código fuente HTML:
<UL>
<LI> Primera línea.
<LI> Segunda línea.
<LI> Tercera línea.
</UL>
produce el siguiente resultado en un navegador convencional:
- Elefante.
- Cocodrilo.
- Serpiente.
<UL>
<LI> Primera línea.</LI>
<LI> Segunda línea.</LI>
<LI> Tercera línea.</LI>
</UL>
Entre este par de etiquetas se ponen los elementos de una lista ordenada (Ordered List). Cada elemento de la lista debe ser precedido por la etiqueta <LI>. El atributo TYPE especifica la forma en la cual será numerada la lista. El siguiente código fuente HTML:
<OL TYPE=a>
<LI> Primer capítulo.
<LI> Segundo capítulo.
<LI> Tercer capítulo.
</OL>
produce el siguiente resultado en un navegador convencional:
- Primer capítulo.
- Segundo capítulo.
- Tercer capítulo.
<OL>
<LI> Primer capítulo.</LI>
<LI> Segundo capítulo.</LI>
<LI> Tercer capítulo.</LI>
</OL>
Este par de etiquetas cuyo uso va en declive (ya no es apoyado en la mayoría de los navegadores) fue introducido en un principio para crear listas de menú de hileras de texto de extensión corta sin meter simbología de ningún tipo para numerar el principio de cada línea de la lista de menú. Cada artículo de la lista de menú es indicado usando la etiqueta de lista <LI>:
<MENU>
<LI> Ir a la izquierda
<LI> Ir a la derecha
<LI> Ir hacia arriba
<LI> Ir hacia abajo
</MENU>
<DIR> ... </DIR>
Este par de etiquetas cuyo uso es hoy desalentado (ya no es apoyado en HTML 5 y en su lugar se recomienda usar los recursos de las Hojas de Estilos en Cascada CSS) fue introducido para enlistar artículos con una cantidad de palabras menor aún que lo que se encuentra en las listas de menú:
<DIR>
<LI>Naranjas
<LI>Peras
<LI>Manzanas
</DIR>
En la especificación HTML 4.01, tanto los tipos de lista <MENU> como <DIR> quedaron marcados como deprecados. (Una etiqueta deprecada o un atributo deprecado es aquél que ha sido marcado para su remoción de especificaciones HTML y navegadores futuros. Cuando se crean páginas Web nuevas el programador debe abstenerse de usar elementos y atributos deprecados porque el apoyo futuro de los mismos no está garantizado. De cualquier modo, las listas de menú y las listas de directorios son poco usadas en las páginas Web que se publican hoy en día.)
El anidamiento de listas (meter una lista, ya sea ordenada o desordenada, dentro de otra lista, también ordenada o desordenada) es permisible en HTML, sólo hay que poner la estructura entera de cada lista dentro de otra como uno de sus elementos:
<OL>El anidamiento mostrado arriba produce un efecto como el siguiente:
<LI> ...
<UL>
<LI> ...
<LI> ...
</UL>
<LI> ...
<UL>
<LI> ...
<LI> ...
<LI> ...
</UL>
<LI> ...
</OL>
El anidamiento de listas resulta un recurso sumamente útil para obtener con facilidad efectos que de otra manera no estarían disponibles.
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
<DL>
<DT> ... </DT>
<DD> ... </DD>
<DT> ... </DT>
<DD> ... </DD>
......
</DL>
Este conjunto de etiquetas conformado por los tres pares <DL> ... </DL> (Definition List), <DT> ... </DT> (Definition Term) y <DD> ... </DD> (Definition Definition) es usado para crear glosarios, listas de palabras y términos usualmente puestos al final de libro para definir terminología nueva que ha sido introducida en una obra, por ejemplo:
<DL>
<DT>AND</DT>
<DD>Un circuito con dos o más entradas de información digital binaria y una sola salida, siendo la salida igual a 1 solo cuando todas las entradas son iguales a 1.</DD>
<DT>Assembler</DT>
<DD>Un programa de computación que construye un programa en lenguaje de máquina a partir de un programa escrito en un lenguaje simbólico.</DD>
<DT>Bit</DT>
<DD>La pieza más pequeña de información, que puede tomar el valor de "1" o el valor de "0".</DD>
</DL>
<TABLE> ... </TABLE>
Usado para la creación de tablas. La etiqueta de apertura tiene un atributo BORDER al cual se le asigna un valor numérico puesto entre comillas. Se requiere especificar cada renglón en la tabla con el par de etiquetas:
<TR> ... </TR>
Par de etiquetas usadas para especificar cada renglón de una tabla. Dentro de cada renglón, se requiere especificar cada dato (o celda) encapsulado entre el siguiente par de etiquetas:
<TD> ... </TD>
Con el par de etiquetas <CAPTION> y </CAPTION> se le puede dar un título de cabecera a la tabla.
El siguiente código HTML:
<TABLE BORDER="1">produce en el navegador la siguiente tabla:
<TR>
<TD>Renglón 1, Celda 1</TD>
<TD>Renglón 1, Celda 2</TD>
</TR>
<TR>
<TD>Renglón 2, Celda 1</TD>
<TD>Renglón 2, Celda 2</TD>
</TR>
Renglón 1, Celda 1 Renglón 1, Celda 2 Renglón 2, Celda 1 Renglón 2, Celda 2
<DIV ALIGN="CENTER"> ... </DIV>
Lo que se pone entre este par de etiquetas (texto, tabla, etc.) es posicionado en forma centrada por el navegador. De este modo, lo siguiente:
<DIV ALIGN="CENTER">Este es un texto centrado.</DIV>
será mostrado por el navegador centrado en la página Web:
Este es un texto centrado.
<ABBR TITLE="..."> ...</ABBR>
<ACRONYM TITLE="..."> ... </ACRONYM>
Cada uno de estos dos pares de etiquetas fue introducido en un principio para añadir significado a las abreviaturas (con ABBR) y los acrónimos (con ACRONYM) sin romper el flujo de una página Web o distraer la atención de los lectores con hipervínculos adicionales. La manera en la que esto funciona es que al situar el cursor sobre la abreviatura o acrónimo aparecerá una pequeña ventana emergente con texto adicional que dá mayores detalles sobre el origen de la abreviatura. El texto adicional que aparecerá en la ventana emergente es puesto entre las dobles comillas asignadas al atributo TITLE como lo muestran los siguientes ejemplos:
La invención del diodo <ACRONYM TITLE="Light Emitting Diode">LED</ACRONYM> posibilitó la creación de las pantallas multicolores planas.La etiqueta <ACRONYM> quedó marcada para su remoción total en HTML 5, y se recomienda usar en su lugar la etiqueta <ABBR>.
La abreviatura <ABBR TITLE="Microwave Amplification by Stimulated Emission of Radiation">MASER</ABBR> fue inventada cuando se descubrió por vez primera el efecto del láser.
<PRE> ... </PRE>
Para texto elaborado en un bloc de notas o un editor de texto plano, llamado texto preformateado. Normalmente los navegadores eliminan todos los espacios en blanco extra que hay entre las letras y las palabras así como todos los retornos de carro, y automáticamente meten saltos de línea según el tamaño de la ventana para ajustar el texto al espacio horizontal disponible en la pantalla. El texto preformateado permite mantener los espacios en blanco extra y los saltos de línea que se hayan incorporado en el texto, y es ideal para reproducir código computacional con espaciado fijo entre los caracteres, tablas caseras elaboradas con un bloc de notas, y arte ASCII. A diferencia del texto de anchura fija en el cual se le dá a cada letra y número la misma anchura al ser puesto en una línea de texto, en muchos sistemas operativos se le dan a los caracteres alfabéticos anchuras distintas para hacer el texto más aceptable estéticamente. Sin embargo, usando este par de etiquetas, el texto mostrado por el navegador usa anchura fija para cada letra y se respetan asimismo los espacios en blanco y saltos de línea, poniéndolo tal y como estaba preformateado, lo cual es útil en la reproducción de código de programación estructurada en el cual se incluyen indentaciones para mejor legibilidad así como lo que se conoce comunmente como arte ASCII. El siguiente código HTML:
<PRE>Este tipo de texto respeta el espaciamiento original y los espacios en blanco</PRE>
produce el siguiente resultado en un navegador convencional:
Este tipo de texto respeta el espaciamiento original y los espacios en blanco
Si la etiquetas <PRE> están siendo aceptadas correctamente por el navegador que el usuario esté usando en estos momentos, entonces el siguiente ejemplo de arte ASCII elaborado en un bloc de notas debe mostar una vaquita de campo con sus cuernitos, sus ojos, sus patas y su cola tal y como fue elaborada en el texto original (este tipo de efectos es imposible de obtener con un texto de anchura proporcional):
( )
(OO)
¡Muuuuuu! \/----------------\
|| |\
|| ||\
|| || \
|| || *
<CODE> ... </CODE>
Este par de etiquetas es usado para encerrar dentron del HTML texto que forma parte de código programable, e impide que lo que hay entre las mismas pueda ser malinterpretado por el navegador como algo propio del HTML.
<CODE>
10 REM COMENTARIO DE UN PROGRAMA BASIC
</CODE>
produce el siguiente resultado en la mayoría de los navegadores convecionales:
10 REM COMENTARIO DE UN PROGRAMA BASIC
<BLOCKQUOTE> ... </BLOCKQUOTE>
El texto puesto entre este par de etiquetas es indentado en bloque como corresponde a citaciones de bloques completos de texto. A modo de ejemplo, lo siguiente:
<BLOCKQUOTE>
El lenguaje de marcado de hipertexto HTML logró por vez primera el poder presentar a usuarios no familiarizados con el uso de las computadoras contemporáneas el poder ver y leer texto e imágenes en un formato comprensible e inclusive el poder descargar dentro de una página archivos de sonido y videos lográndose con ello transformar a las computadoras en un vehículo multimedia.
</BLOCKQUOTE>
se imprimirá en la pantalla como se muestra a continuación:
El lenguaje de marcado de hipertexto HTML logró por vez primera el poder presentar a usuarios no familiarizados con el uso de las computadoras contemporáneas el poder ver y leer texto e imágenes en un formato comprensible e inclusive el poder descargar dentro de una página archivos de sonido y videos lográndose con ello transformar a las computadoras en un vehículo multimedia.<SPAN style="text-decoration: overline;"> ... </SPAN>
Este par de etiquetas se incluyen como una muestra de lo que se puede lograr cuando se recurre a las Hojas de Estilo en Cascada CSS en lugar de las etiquetas HTML ordinarias. Obsérvese la aparición de la palabra clave de estilo “style” en la primera etiqueta especificando el decorado overline (línea superior) que será puesto en el texto. Al texto que se ponga entre este par de etiquetas se le pondrá una barra superior horizontal. De este modo, la siguiente línea:
<SPAN style="text-decoration: overline;">TEXTO CON BARRA HORIZONTAL SUPERIOR</SPAN>
producirá el siguiente efecto:
TEXTO CON BARRA HORIZONTAL SUPERIOR
<FRAMESET atributos>
<FRAME atributos>
<FRAME atributos>
..........
<FRAME atributos>
</FRAMESET>
Las etiquetas <FRAMESET> y <FRAME> son usadas para subdividir la ventana principal del navegador en dos o más marcos (frames), cada uno de los cuales tendrá un contenido HTML que tiene que ser especificado en forma independiente como un archivo HTML invocado desde la etiqueta <FRAME> con el atributo de fuente (source) “SRC=”, por ejemplo (la combinación mostrada subdivide la ventana en dos marcos contiguos superiores de la misma anchura y un solo marco inferior a ellos que se extiende a lo largo de la ventana):
<FRAMESET ROWS="*,*" COLS="*,*">Cuando se usa en un documento HTML, la etiqueta <FRAMESET> reemplaza a la etiqueta <BODY>, no pueden existir ambas etiquetas en un mismo documento HTML. La etiqueta <FRAMESET> puede tener especificados el atributo de renglones “ROWS=” y de columnas “COLS=” para especificar la anchura y/o la altura de los marcos.
<FRAME NAME="Marco_1" SRC="HTML_1.html">
<FRAME NAME="Marco_2" SRC="HTML_2.html">
<FRAME NAME="Marco_3" SRC="HTML_3.html">
</FRAMESET>
Las normas más recientes han impulsado la práctica de hacer caer a los marcos en desuso, reemplazando tal concepto con lo que se puede obtener mediante las Hojas de Estilos en Cascada CSS.
<ADDRESS> ... </ADDRESS>
Puestas frecuentemente al final de un documento, este par de etiquetas se usa para proporcionar la dirección (address) en la cual puede ser contactado el autor de un documento así como otros datos relevantes que sean puestos en la información de contacto:
<ADDRESS>
Armando Martínez
armandito@www.armandomartinez.com
Copyright 2014
Revisión más reciente: 19 de enero de 2014
</ADDRESS>
Las convenciones XML
Antes de entrar en mayores detalles sobre lo que es XML, se enfatizará en el hecho de que XML, acrónimo de Extended Markup Language, no es un reemplazo de HTML, sino un complemento del mismo, y con un propósito diferente. Mientras que el objetivo de HTML es el desplegar visualmente información al usuario que se conecta a Internet, el propósito de XML es el transporte de datos, XML fue diseñado para almacenar y transportar datos.
Un documento XML es inconfundible porque en la primera línea del documento fuente usualmente tenemos algo como lo siguiente:
<?xml version="1.0"?>
o bien, en forma más detallada especificando la codificación de caracteres para la cual el documento XML será válido:
<?xml version="1.0" encoding="UTF-8"?>
XML, el cual fue convertido en una recomendación oficial emitida el 10 de febrero de 1998 por el consorcio mundial de estandarizaciones W3C, tiene algunas características interesantes que no encontramos en HTML. Por principio de cuentas, y a diferencia de HTML, las etiquetas de XML no están predefinidas, nosotros nos convertimos en creadores de nuestras propias etiquetas. Podemos sin problema alguno crear de inmediato etiquetas como las siguientes:
<CIUDAD> ... </CIUDAD>
<AEROPUERTO> ... </AEROPUERTO>
<ARMANDO> ... </ARMANDO>
Mientras que en HTML hay etiquetas que no son usadas en parejas, tales como <BR> y <P>, en XML todas las etiquetas deben ser puestas en parejas complementarias como <ETIQUETA> y </ETIQUETA>.
Quizá lo que sea un poco más difícil de comprender al principio es que XML no hace absolutamente nada. Fue creado para estructurar, almacenar y transportar información, datos, no para presentarla visualmente al usuario como lo hace HTML (poniéndola, por ejemplo, en forma de tablas, o enfatizando porciones de texto con subrayados o letras itálicas).
Los archivos fuente XML con algun nombre de archivo como “EJEMPLO.XML” pueden ser abiertos y pueden ser vistos con la mayoría de los navegadores contemporáneos. Sin embargo, no se espere que sean mostrados como si fuesen páginas HTML. Esto se debe a que las etiquetas XML, a diferencia de las etiquetas HTML que están predefinidas, son “inventadas” por el autor de un documento XML, y los navegadores no pueden saber en un documento XML si una etiqueta como <table> describe una tabla HTML o una mesa de comedor (la traducción al inglés de mesa de comedor es “table”). En pocas palabras, XML no puede ser manejado en forma directa por un navegador Web.
El siguiente ejemplo, guardado como un archivo XML bajo un nombre cualquiera como “EJEMPLO.XML”, nos empezará a ilustrar lo que es XML. Se trata de una nota enviada de Carlos a Sylvia:
<NOTA>Esta nota es autodescriptiva. Tiene información del remitente y del destinatario. Tiene también una cabecera y un cuerpo. Pero aún así, no hace absolutamente nada. Se trata simplemente de información enrollada dentro de etiquetas que fueron inventadas para tal propósito. Alguien tendrá que escribir algo de código para poder hacer algo con dicha información, y es aquí en donde entra JavaScript.
<PARA>Sylvia</PARA>
<DE>Carlos</DE>
<CABECERA>Invitacion</CABECERA>
<CUERPO>Te invito a cenar este fin de semana</CUERPO>
</NOTA>
Las etiquetas dadas arriba en el ejemplo introductorio tales como <PARA>, <DE> y <CABECERA> no están definidas en ningún estándard XML. Estas etiquetas fueron “inventadas” por el autor del documento XML. Esto se debe a que en XML no existen etiquetas predefinidas. Las etiquetas en HTML están todas predefinidas. Mientras que los documentos HTML solo pueden usar etiquetas que están definidas en las convenciones HTML (tales como <BR>, <P>, <H1>, etc.), en XML uno puede definir sus propias etiquetas.
XML es utilizado en muchos aspectos del desarrollo para la Web, principalmente para compartir y almacenar datos. XML separa los datos de HTML. Si se quiere mostrar datos dinámicos en un documento HTML, puede llevar mucho tiempo editar el HTML del documento cada vez que se cambien los datos. Con XML, en cambio, los datos pueden ser almacenados por separado en archivos XML. De este modo, podemos concentrarnos en el uso de HTML y de la convención para Hojas de Estilo en Cascada CSS (Cascading Style Sheets) para presentación y muestra de la información al usuario en su navegador, estando seguros de que cambios en los datos subyacentes no requerirán cambios en el HTML de la página Web principal. Con unas cuantas líneas de código JavaScript, podemos leer un archivo externo XML y actualizar el contenido de datos en nuestra página Web.
XML simplifica el poder compartir datos a través de Internet. En el mundo real, los sistemas de cómputo y las bases de datos que obran en ellos contienen muchos datos en formatos que pueden ser y de hecho son incompatibles. Los datos XML son almacenados en texto plano (ordinario), lo cual proporciona una manera de almacenar datos que es independiente del hardware y el software. Esto hace que sea mucho más sencillo crear datos que puedan ser compartidos por aplicaciones diferentes. Uno de los retos que más consumen el tiempo de los desarrolladores de páginas Web es el intercambio de datos entre sistemas incompatibles (máquinas Mac funcionando con OS X, máquinas funcionando con Windows, máquinas funcionando con Linux) a través de Internet. Intercambiando los datos como XML reduce mucho esta complejidad, puesto que los datos pueden ser leídos por aplicaciones que son diferentes e incompatibles entre sí. XML también simplifica los cambios que se puedan llevar a cabo en la plataforma. La actualización hacia nuevos sistemas, tanto en el hardware como en el software, siempre es una cosa que consume tiempo, ya que grandes cantidades de datos tiene que ser convertidos de un formato a otro, y datos incompatibles se pierden con frecuencia. Puesto que XML es almacenado en formato de texto, esto hace que sea más fácil hacer una expansión o actualización hacia nuevos sistemas operativos, nuevas aplicaciones, o nuevos navegadores, sin que se tengan que perder datos. XML hace que más datos estén disponibles, aplicaciones distintas pueden tener acceso a los datos no solo a traves de páginas HTML sino también a través de fuentes de datos XML. Con XML, los datos están disponibles a muchos tipos de “maquinarias de lectura” (computadoras portátiles, máquinas de voz, feeds de noticias, etc.) haciendo que los datos sean accesibles a gente ciega o con otros impedimentos físicos. Otra característica interesante es que muchos lenguajes nuevos de Internet han sido creados y siguen siendo creados con XML, entre cuyos ejemplos se pueden citar los siguientes:
• XHTML
• WSDL para describir servicios Web disponibles
• WAP y WML como lenguajes markup para dispositivos portátiles
• Lenguajes RSS languages para feeds de noticias
• RDF y OWL para la descripción de recursos y ontología
• SMIL para describir multimedia para la Web
Puesto que XML permite el poder crear y definir otros lenguajes de marcas con objetivos diferentes (inventando etiquetas nuevas las cuales pueden contener atributos), XML es un metalenguaje, y por eso se llama extensible. No es un lenguaje en particular, sino una manera de definir lenguajes. XML no es una extensión de HTML, y en esto todavía hay muchos malentendidos y confusiones, en virtud de que con XML podemos derivar un nuevo lenguaje conocido como XHTML, el cual es una extensión de HTML pero siguiendo las reglas propias de XML. De hecho, los lenguajes de marcado HTML y XML ambos provienen de una estandarización superior conocida como SGML, de modo tal que las aserciones que se han hecho arriba se pueden ilustrar jerárquicamente del modo siguiente:
SGML es un metalenguaje algo complejo, y no resulta fácil de manejar inclusive para programadores experimentados. Afortunadamente, en muchas situaciones es suficiente con recurrir a XML, que es un subconjunto de SGML.
XML no es un reemplazo de HTML. XML es un complemento de HTML.
Así como HTML a partir de la interfaces gráficas Mosaic y Netscape Navigator permitió el envío de páginas Web a plataformas diferentes logrando que en todas ellas se interpretase de igual manera el marcado de texto en letras negritas o poniéndole un subrayado al texto, del mismo modo se llegó a la conclusión de que era necesario acordar un formato común para compartir bases de datos almacenados bajo un sinnúmero de convenciones distintas en una gran variedad de serviudores. Es por esto que tiene mucho sentido que las aplicaciones futuras intercambien sus datos usando la convención XML. Con XML el futuro nos puede ofrecer procesadores de palabras, hojas de trabajo y bases de datos que puedan leer los datos elaborados bajo una infinidad de programas de aplicación sin que sea necesario programar utilerías especiales de conversión entre tales aplicaciones.
Un documento XML no puede ser manejado directamente por un navegador Web porque a diferencia de un documento HTML para el cual sí sabe lo que hay que hacer con etiquetas predefinidas (como el poner un texto en itálicas), no sabría qué hacer con un par de etiquetas como <MUSICA> y </MUSICA> creadas por el autor de una página Web. Se requiere de código adicional para hacer algo con los datos que son enviados bajo formato XML.
Los documentos XML forman una estructura de árbol que empieza desde la “raíz” y se extiende hasta las “hojas”. Antes de elaborar más sobre esto, tomaremos el ejemplo dado arriba para estructurarlo como un documento XML, de forma tal que nos muestre cómo los documentos XML utilizan una sintaxis simple y auto-descriptiva:
<?xml version="1.0" encoding="UTF-8"?>La primera línea es la declaración XML, y define la versión XML que se estará usando en el documento (en este caso la versión 1.0). Obsérvese cómo la primera línea se abre con un paréntesis angulado de apertura “<” anexado a un signo de interrogación “¿”, y se cierra con el signo de interrogación “?” anexado a un paréntesis angulado de cierre “>” (o sea, en orden inverso). La segunda línea con la etiqueta <NOTA> proporciona en forma descriptiva el elemento raíz del documento, para dar a entender algo así como “este documento es una nota”. Las siguientes cuatro líneas describen los cuatro elementos hijos de la raíz, o sea <PARA>, <DE>, <CABECERA>, y <CUERPO> con sus respectivas etiquetas de “cierre” </PARA>, </DE>, </CABECERA> y </CUERPO>. Finalmente, la última línea define con la etiqueta de cierre </NOTA> el final del elemento raíz. Podemos suponer, de este ejemplo, que el documento XML contiene una nota de Carlos a Sylvia. Como puede apreciarse, un documento XML puede ser muy auto-descriptivo, todo depende de la creatividad del programador.
<NOTA>
<PARA>Sylvia</PARA>
<DE>Carlos</DE>
<CABECERA>Invitacion</CABECERA>
<CUERPO>Te invito a cenar este fin de semana</CUERPO>
</NOTA>
Llendo en más detalle sobre la primera línea en el ejemplo anterior, se agregará que esa primera línea en un documento XML, escrita en forma más sencilla como:
<?xml version="1.0"?>
es conocida como el prólogo del documento XML. El prólogo es opcional, aunque se considera como una buena práctica de programación incluír el prólogo en todos los documentos XML para que quien lo lea pueda saber de inmediato que se trata de un documento XML y no de un documento HTML o de cualquier otro tipo. Usualmente el prólogo contiene como información adicional el número de la versión XML que está siendo usada, que en este caso es 1.0. El prólogo contiene también, con el atributo encoding, información acerca de la codificación usada en el documento. El siguiente prólogo especifica codificación UTF-8:
<?xml version="1.0" encoding="UTF-8"?>
La convención XML especifica que todo el software XML debe poder “entender” tanto la convención UTF-8 como la convención UTF-16. El valor predeterminado (default, por omisión) para los documentos XML que no incluyen información acerca de la codificación usada es UTF-8. Además, la mayoría de los sistemas de software XML deben poder “entender” codificaciones como ISO-8859-1, Windows-1252, and ASCII.
Los documentos XML pueden ser elaborados usando caracteres internacionales, como en noruego æøå, o en francés êèé. Para evitar mensajes de error, es conveniente especificar en el prólogo la codificación que se está empleando, o acostumbrarse a guardar todos los archivos XML en la computadora como archivos UTF-8 (quienes están acostumbrados a usar editores de texto como el Bloc de Notas de los sistemas operativos Windows de Microsoft tal vez se hayan dado cuenta de que bajo la opción de “Encoding” se puede guardar un archivo de texto no solo en formato ASCII sino también en formato UTF-8).
La codificación de caracteres define un código binario único para cada caracter diferente que es usado en un documento. En dialecto computacional, la codificación de caracteres también es conocida como conjunto de caracteres, mapa de caracteres, conjunto de código, y página de código.
Para la elaboración de documentos de texto llano (en inglés), inicialmente se contaba con los únicos caracteres disponibles que eran los caracteres que formaban parte del código ASCII (véase en los apéndices puestos al final de esta obra el anexo “El código ASCII”). Al considerarse insuficientes estos símbolos, el código ASCII fue ampliado doblándose el conjunto original de símbolos para tener lo que se conoce como “código ASCII extendido”, recurriéndose a toda la capacidad de combinaciones binarias posible en los ocho bits disponibles en un byte. Pero al resultar esto insuficiente para acomodar caracteres internacionales, se aumentó el tamaño de la palabra binaria de un byte (8 bits), proporcionando espacio más que suficiente para poder representar (casi) cualquier caracter internacional posible con un nombre y un número. Esta es la convención conocida como Unicode, el estándard de la industria para la codificación de caracteres de documentos de texto. Unicode conocido formalmente como UTF (Universal character set Transformation Format) tiene dos variantes: UTF-8 y UTF-16. UTF-8 usa un byte sencillo (8 bits) para representar los caracteres más comunes, y dos (o tres) bytes para representar el resto, mientras que UTF-16 usa dos bytes (16 bits) para representar la mayoría de los caracteres y tres bytes para representar el resto. El estándard de la Web es UTF-8, ésta es la codificación convencional en la Web y es la codificación predeterminada de caracteres para HTML-5, CSS, JavaScript, PHP, SQL y XML.
Generalizando el ejemplo que fue dado anteriormente, todos los documentos XML forman una estructura de árbol, y deben contener un elemento raíz, el cual es el “progenitor” de todos los demás elementos. Los elementos en un documento XML forman un árbol documental, el árbol empieza en la raíz y se ramifica hasta el nivel más bajo del árbol. Todos los elementos pueden contener sub-elementos y así sucesivamente:
<raíz>Los términos progenitor, hijo y hermano son usados para describir las relaciones que hay entre los elementos. Los elementos progenitores tienen hijos; e hijos en el mismo nivel son llamados hermanos.
<hijo>
<sub-hijo> ... </sub-hijo>
</hijo>
</raiz>
Tal y como ocurre en HTML, todos los elementos XML pueden tener contenido textual y atributos. De este modo, a las siguientes etiquetas XML carentes de atributos:
<LIBRO>
<TITULO>
se les pueden agregar atributos tales como:
<LIBRO CATEGORIA="...">
<TITULO IDIOMA="...">
Al igual que en HTML, los atributos proporcionan información adicional. En HTML los atributos proporcionan información que no es parte de los datos, por ejemplo:
<img src="computer.gif">
<a href="demo.asp">
En el siguiente ejemplo XML, el “tipo” de “archivo” es irrelevante para el dato en sí (el archivo “computadora.gif” es una imagen gráfica), pero el atributo (resaltado en color azul) puede ser importante para el programa de aplicación que se encargará de manipular el elemento:
<archivo tipo="gif">computadora.gif</archivo>
A continuación se muestra la hilación que hay en los atributos de las etiquetas creadas en XML:
La imagen dada arriba representa los datos de un libro descritos mediante el XML que se da abajo:
<LIBRERIA>El elemento raíz en este ejemplo es <LIBRERIA>. Todos los elementos <LIBRO> en el documento están contenidos dentro de <LIBRERIA>. El elemento <LIBRO> tiene cuatro hijos que a su vez son elementos: <TITULO>, <AUTOR>, <FECHA> y <PRECIO>. Obsérvese que el elemento <LIBRO> tiene un atributo, CATEGORIA; mientras que el sub-elemento <TITULO> tiene el atributo IDIOMA.
<LIBRO CATEGORIA="ELECTRONICA">
<TITULO IDIOMA="ESP">Electrónica para todos</TITULO>
<AUTOR>Guillermo González Camarena</AUTOR>
<FECHA>1952</FECHA>
<PRECIO>250.00</PRECIO>
</LIBRO>
<LIBRO CATEGORIA="NOVELA">
<TITULO IDIOMA="ESP">La piel de zapa</TITULO>
<AUTOR>Honorato de Balzac</AUTOR>
<FECHA>2005</FECHA>
<PRECIO>80.00</PRECIO>
</LIBRO>
<LIBRO CATEGORIA="ESTADISTICA">
<TITULO IDIOMA="ESP">Diseño de Experimentos</TITULO>
<AUTOR>Armando Martínez</AUTOR>
<FECHA>1982</FECHA>
<PRECIO>80.00</PRECIO>
</LIBRO>
</LIBRERIA>
Un elemento XML es todo aquello desde (inclusive) la etiqueta de apertura hasta (inclusive) la etiqueta de cierre, y puede contener: (1) otros elementos, (2) texto, (3) información numérica, (4) atributos, y (5) una mezcla de todo lo anterior.
Las reglas de sintaxis de XML son muy sencillas y lógicas, son fáciles de aprender y fáciles de usar, empezando por la más básica:
Todos los elementos de XML tiene que tener una etiqueta de cierre. En XML, es ilegal omitir la etiqueta de cierre. Mientras que en HTML podemos escribir lo siguiente (sin etiquetas de cierre):
<p>Este es un párrafo.
<br>
en XML esto mismo es ilegal, y se tiene que escribir lo siguiente:
<p>Este es un párrafo</p>
<br />
El lector tal vez se habrá dado cuenta de que en el ejemplo dado arriba al principio en el cual se puso en la primera línea la declaración XML que define la versión XML que se usa en el documento, la declaración no tuvo etiqueta de cierre. Esto no es un error, ya que una declaración como:
<?xml version="1.0" encoding="UTF-8"?>
no forma parte del documento XML en sí, y por lo tanto no tiene etiqueta de cierre.
Las etiquetas XML son sensibles a la capitalización. La etiqueta <DOCUMENTO> es diferente de la etiqueta <Documento> y ambas son diferentes de la etiqueta <documento>. Las etiquetas de apertura y de cierre tienen que ser escritas siempre con la misma capitalización:
<Ejemplo>Esto es incorrecto</ejemplo>
<ejemplo>Esto es correcto</ejemplo>
Los elementos XML tienen que estar anidados en forma apropiada. En HTML, podemos ver elementos anidados en forma inapropiada pero que de cualquier modo serán interpretados en forma correcta por la mayoría de los navegadores:
<B><I>Este texto es mostrado en letras negritas e itálicas</B></I>
Pero en XML, todos los elementos tienen que estar anidados en forma apropiada uno dentro del otro:
<B><I>Este texto es mostrado en letras negritas e itálicas</I></B>
En este ejemplo, “anidados apropiadamente” significa simplemente que si el elemento <I> (usado para convertir el texto ordinario a letras itálicas) es abierto dentro del elemento <B> (usado para convertir el texto ordinario a letras negritas), entonces tiene que ser cerrado con </I> dentro del elemento </B>.
No se permite la minimización de atributos. El siguiente código es incorrecto bajo XML:
<input checked>Pero el siguiente código sí es correcto:
<input readonly>
<input disabled>
<option selected>
<input checked="checked">Todos los documentos XML tienen que contener necesariamente un elemento raíz, el cual es el progenitor de todos los demás elementos del documento XML:
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
<raíz>Los valores en los atributos XML tienen que ser puestos entre dobles comillas. Tal y como ocurre en HTML, los elementos XML ocurren en pares “etiqueta valor de atributo”, pero en XML los valores de los atributos tienen que ser puestos siempre entre dobles comillas. En los siguientes dos ejemplos, el primero es incorrecto, mientras que el segundo es correcto:
<hijo>
<sub-hijo> ... </subhijo>
</hijo>
</raiz>
<NOTA FECHA=21/03/2014>El error en el primer documento es que el dato (valor) del atributo no fue puesto entre dobles comillas.
<PARA>Sylvia</PARA>
<DE>Carlos</DE>
</NOTA>
<NOTA FECHA="21/03/2014">
<PARA>Sylvia</PARA>
<DE>Carlos</DE>
</NOTA>
Algunos caracteres tienen un significado especial en XML. Si se pone un caracter como “<” dentro de un elemento XML, se generará un mensaje de error porque el parsificador interpretará esto como el inicio de un nuevo elemento. Lo siguiente generará un mensaje de error por el símbolo “<” que está puesto entre la variable “x” y el número “1000”:
<CODIGO>if x < 1000 then 250</CODIGO>
Para evitar este tipo de error, hay que reemplazar el caracter “<” con lo que se conoce como la referencia de entidad usada para cada símbolo. En el caso del símbolo “<”, la referencia de identidad es “<” con la cual se puede escribir:
<CODIGO>if x < 1000 then 250</CODIGO>
Existen cinco referencias de identidad predefinidas en XML:
Unicamente los caracteres “<” y “&” son estrictamente ilegales en XML. A diferencia del símbolo “menor que”, el caracter “mayor que” es legal, pero es un buen hábito el reemplazarlo con la referencia de identidad “>” con la finalidad de evitar confusiones.
La sintaxis para escribir comentarios en XML es igual a la sintaxis que se utiliza en HTML:
<! Este es un comentario ->
Los espacios en blanco son preservados en XML. Mientras que HTML trunca los caracteres de espacios en blanco a un espacio en blanco sencillo:
HTML: Hola Laurita
Salida: Hola Laurita
con XML los espacios en blanco no son truncados:
HTML: Hola Laurita
Salida: Hola Laurita
En lo que concierne a líneas nuevas de texto, las aplicaciones Windows almacenan una nueva línea de texto como un “regreso de carro” CR (Carriage Return) y una “alimentación de línea” LF (Line Feed), los sistemas operativos Unix y Mac OSX usan LF, mientras que los sistemas viejos Mac usan CR, pero XML almacena una línea nueva como LF.
Los documentos XML que están en conformidad con las reglas de sintaxis dadas arriba son llamados documentos XML “bien formados” (well formed).
Se puede usar una sintaxis alternativa para especificar elementos XML que no tienen contenido. En lugar de escribir un elemento de libro (sin contenido) de la siguiente manera:
<libro></libro>
se puede especificar lo mismo de la siguiente manera:
<libro />
Este tipo de elemento sintáctico es llamado auto-cerrante (self-closing).
Una de las ventajas de los elementos XML es que son extensibles, esto es, se pueden extender para ser portadores de una cantidad mayor de información, sin ocasionar problemas en el navegador. Considérese el siguiente ejemplo:
<NOTA>Supongamos que el autor del documento XML ha creado una aplicación para extraer los elementos <DE>, <PARA> y <CUERPO> del documento XML para presentar la salida al usuario de cierta manera. Imaginemos ahora que el autor del documento XML ha decidido a última hora agregarle información adicional:
<PARA>Carlos</PARA>
<DE>Sylvia</DE>
<CUERPO>Acepto gustosa tu invitación para cenar juntos este fin de semana</CUERPO>
</NOTA>
<NOTA>¿Hará esto que la aplicación deje de funcionar con lo que ha sido agregado? No, la aplicación debe poder seguir encontrando y extrayendo los elementos <PARA>, <DE> y <CUERPO> para seguir produciendo la misma salida.
<FECHA>2014-04-04</FECHA>
<PARA>Carlos</PARA>
<DE>Sylvia</DE>
<CUERPO>Acepto gustosa tu invitación para cenar juntos este fin de semana</CUERPO>
</NOTA>
En XML, la información puede ser transportada ya sea como un elemento, o como el atributo de una etiqueta. En el siguiente ejemplo se tiene información (el sexo de una persona) que es enviada como atributo de una etiqueta:
<persona sexo="masculino">En el siguiente ejemplo, la misma información proporcionada arriba en forma de atributo es proporcionada como un elemento XML:
<nombre>Armando</nombre>
<apellido>Martinez</apellido>
</persona>
<persona sexo>Algunas veces se asignan referencias de identificación “id” a los elementos. Estas id pueden ser usadas para identificar los elementos XML en una forma muy parecida a como lo hace un atributo id en HTML. El siguiente ejemplo nos muestra cómo:
<sexo>mascullino</sexo>
<nombre>Armando</nombre>
<apellido>Martinez</apellido>
</persona>
<mensajes>Los atributos id dados arriba permiten identificar notas distintas. No forman parte de las notas. en sí. Los metadatos (datos acerca de datos) son mejor guardados como atributos, mientras que los datos en sí son mejor guardados como elementos.
<nota id="341">
<de>Armando</de>
<para>Charly</para>
<cabecera>Recordatorio</cabecera>
<cuerpo>Sigue pendiente la resolución de la ecuación</cuerpo>
</nota>
<nota id="857">
<de>Charly</de>
<para>Armando</para>
<cabecera>Re: Recordatorio</cabecera>
<cuerpo>La ecuación ya está resuelta</cuerpo>
</nota>
</mensajes>
No hay reglas sobre cuándo usar atributos o cuando usar elementos. Aunque en HTML los atributos son convenientes (quizá por la fuerza de la costumbre), en XML algunos programadores prefieren usar elementos. Sin embargo, hay que tomar ciertas precauciones al usar atributos en XML: (1) los atributos no pueden contener valores múltiples (los elementos sí), (2) los elementos no pueden contener estructuras de árbol (los elementos sí), (3) los atributos no son fácilmente extensibles (en caso de que se hagan cambios futuros), (4) los atributos no son fáciles de leer y de darles mantenimiento. Usamos elementos para los datos, mientras que usamos atributos para información que no es relevante a los datos. Es por ello que debemos evitar incurrir en errores como se muestra a continuación:
<nota dia="04" mes="04" año="1950"A la hora de inventar etiquetas y ponerles nombres, los nombres tienen que obedecer ciertas reglas: (1) pueden contener letras, números y otros caracteres, (2) los nombres de las etiquetas no pueden comenzar con un número o con caracteres de puntuación (coma, punto, semicolon, etcétera), (3) los nombres no pueden empezar con la hilera de texto xml (o XML, o Xml, etc.), y (4) los nombres no pueden contener espacios en blanco. Cualquier nombre puede ser usado, no hay palabras reservadas.
para="Armando" de="Shanik" cabecera="Recordatorio"
cuerpo="Te espero en donde habíamos acordado">
</nota>
Puesto que en XML los nombres de los elementos son inventados por el creador de una página Web, esto puede ocasionar conflictos cuando se trata de mezclar documentos XML de diferentes aplicaciones XML. A modo de ejemplo, el siguiente XML conlleva información acerca de una tabla HTML:
<table>Por otro lado, el siguiente XML conlleva información (en inglés) acerca de una mesa:
<tr>
<td>Plata</td>
<td>Oro</td>
</tr>
</table>
<table>Si se intenta mezclar estos fragmentos XML, habría un conflicto de nombres, ya que ambos contienen un elemento <table>, pero los elementos tienen un distinto significado y contenido. Un usuario o una aplicación XML no sabría cómo manejar este tipo de situación. Una manera de evitar este tipo de conflictos consiste en recurrir a prefijos, como se muestra a continuación:
<estilo>Mediterráneo</estilo>
<anchura>2</anchura>
<largo>5</largo>
</table>
<h:table>Sin embargo, al usar prefijos en XML, para el prefijo se tiene que definir algo que se llama nombrespacio (namespace), con la siguiente sintaxis:
<h:tr>
<h:td>Plata</h:td>
<h:td>Oro</h:td>
</h:tr>
</h:table>
<f:table>
<f:estilo>Mediterráneo</f:estilo>
<f:anchura>2</f:anchura>
<f:largo>5</f:largo>
</f:table>
xmlns:prefijo="URI"
El nombrespacio es definido por el atributo xmlns en la etiqueta de inicio de un elemento. URI es lo que se conoce como un Identificador Uniforme de Recursos o URI (Uniform Resource Identifier), y es una hilera de caracteres que identifica un Recurso de Internet. El URI más común es el Localizador Uniforme de Recursos o URL (Uniform Resource Locator) que identifica un domicilio de dominio de Internet (otro tipo menos común de URI es el Nombre Universal de Recurso o URN que significa Uniform Resource Name).
El siguiente ejemplo muestra la forma en la cual se usa el nombrespacio:
<raiz>En este ejemplo, el atributo xmlns en cada etiqueta <table> les proporciona a los prefijos h: y f: un nombrespacio calificado. Cuando un nombrespacio es definido para un elemento, todos los elementos hijos con el mismo prefijo están asociados al mismo nombrespacio. Los nombrespacios pueden ser declarados en donde serán utilizados (como en el ejemplo que se acaba de dar), o en el elemento XML raíz (el URI del nombrespacio no es usado por el parsificador para buscar información):
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Plata</h:td>
<h:td>Oro</h:td>
</h:tr>
</h:table>
<f:table xmlns:f="http://www.armandomartinez.com/muebleria">
<f:estilo>Mediterraneo</f:estilo>
<f:anchura>2</f:anchura>
<f:largo>5</f:largo>
</f:table>
</raiz>
<raiz xmlns:h="http://www.w3.org/TR/html4/"El propósito es darle al nombrespacio un nombre que le sea único. Sin embargo, es frecuente que las empresas lo usen como un puntero hacia una página Web que contenga información nombrespacio.
xmlns:f="http://www.armandomartinez.com/muebleria">
<h:table>
<h:tr>
<h:td>Plata</h:td>
<h:td>Oro</h:td>
</h:tr>
</h:table>
<f:table>
<f:estilo>Mediterraneo</f:estilo>
<f:anchura>2</f:anchura>
<f:largo>5</f:largo>
</f:table>
</raiz>
Arriba se han usado prefijos para evitar conflictos. Sin embargo, definir un nombrespacio para un elemento nos evita el tener que estar utilizando prefijos en todos los elementos hijos. La sintaxis en tal caso es la siguiente:
xmlns="URInombrespacio"
De este modo, el siguiente XML proporciona información cuando “table” es una tabla HTML:
<table xmlns="http://www.w3.org/TR/html4/">Por otro lado, el siguiente XML proporciona información cuando “table” es una mesa de comedor:
<tr>
<td>Plata</td>
<td>Oro</td>
</tr>
</table>
<table xmlns="http://www.armandomartinez.com/muebleria">Una aplicación de los espacionombres se encuentra en XSLT, un lenguaje creado con XML que puede ser usado para transformar documentos XML hacia otros formatos (esta es la convención que el consorcio W3C recomienda utilizar), hacia un formato tal como HTML.
<estilo>Mediterraneo</estilo>
<anchura>2</anchura>
<largo>5</largo>
</table>
En el documento que se proporciona a continuación, podemos ver que la mayoría de las etiquetas del documento son etiquetas HTML (de hecho, las etiquetas usadas para construír una tabla dentro de HTML). Las etiquetas que no son HTML tienen el prefijo xsl, identificado por el espacionombre:
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
<?xml version="1.0" encoding="UTF-8"?>Hasta aquí, se ha descrito para lo que sirve XML, para enviar datos (tomados de una base de datos) en un formato que sea universalmente aceptable y comprensible para cualquier máquina conectada a Internet, sin importar el tipo de plataforma o sistema operativo, siempre y cuando el documento XML haya sido elaborado correctamente. Podemos asegurarnos de esto usando alguna utilería que verifique la sintaxis de documentos XML para determinar si no hay errores de sintaxis (hay varias de estas utilerías disponibles gratuitamente en Internet, y algunos navegadores proporcionan este tipo de ayuda para la depuración de errores).
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Catalogo de CDs</h2>
<table border="1">
<tr>
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML simplemente es un vehículo para enviar datos a través de Internet en un formato reconocido universalmente por cualquier plataforma, no proporciona absolutamente nada para dar algún tipo de acomodo o adorno a los datos que son enviados o recibidos. Esto no significa que no se puedan usar recursos adicionales para mejorar la presentación. El siguiente ejemplo nos muestra la manera de utilizar una hoja de estilo CSS (Cascading Style Sheet) para darle un formato a un documento XML (la segunda línea del código es la que se encarga de enlazar el archivo XML al archivo CSS):
<?xml version="1.0" encoding="UTF-8"?>Aunque lo anterior es perfectamente válido, formatear un documento XML con CSS no es el método más comunmente usado. Para tal propósito, el consorcio mundial W3C recomienda usar mejor la convención XSLT que se ha descrito arriba.
<?xml-stylesheet type="text/css" href="catalogo_libros.css"?>
<CATALOGO>
<LIBRO>
<TITULO>Fundamentos de Lógica Digital</TITULO>
<AUTOR>Armando Martínez Téllez</AUTOR>
<PAIS>México</PAIS>
<EDITORA>Tecnologías Asociadas</EDITORA>
<PRECIO>275.00</PRECIO>
<AÑO>1985</AÑO>
</LIBRO>
<LIBRO>
<TITULO>La Teoría de la Relatividad</TITULO>
<AUTOR>Armando Martínez</AUTOR>
<PAIS>México</PAIS>
<EDITORA>Compendios de Física</EDITORA>
<PRECIO>139.00</PRECIO>
<AÑO>2007</AÑO>
</LIBRO>
.
.
.
</CATALOGO>
Si la página Web que es enviada al usuario incorpora código de ejecución JavaScript haciéndose uso del objeto JavaScript XMLHttpRequest, hojas de estilo CSS, y (optativamente) se hace uso de la convención XML, se dice que el programador está utilizando un conjunto de herramientas conocido como Ajax. Es así como muchos periódicos y revistas que el lector consulta diariamente se están construyendo.
Como ya se mencionó desde el principio, los navegadores son incapaces de poder interpretar por cuenta propia un documento XML porque se presupone que contiene etiquetas inventadas por un programador que no son reconocidas como etiquetas predeterminadas HTML. Sin embargo, es posible proporcionarle una “ayuda” al navegador para que pueda acomodar los datos de una manera que sean entendibles por el usuario, siguiendo la filosofía de que con XML se envían datos en un formato universalmente reconocible mientras que con HTML se presenta la información en forma visualmente agradable al usuario. Para ello, recurrimos a las capacidades nativas de JavaScript que posee cada navegador, y al uso del objeto XMLHttpRequest (véase la entrada “La interfaz cliente-servidor”). Sin entrar en mayores detalles, a continuación se presenta el código de una página Web que abre un documento titulado “catalogo.xml” y le presenta al usuario en forma de una tabla HTML una lista de libros y de los autores de cada libro que forma parte del catálogo (se destacan en color rojo unos términos cuyo objetivo será aclarado más abajo):
<html>Obsérvese cómo mediante la aplicación repetida del método write, el cual es un método del objeto document bajo la convención DOM, se va construyendo la tabla que le será presentada por el navegador al usuario, la cual no es finalizada y mostrada en su forma final hasta en tanto el bucle que repite el código que empieza con la línea document.write("<table border='1'>") y que termina con la línea document.write("</table>") no haya sido agotado.
<body>
<script>
if (window.XMLHttpRequest)
{// código para los navegadores IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// código para los navegadores for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","catalogo.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("LIBRO");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("Autor")[0]
.childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("Libro")[0]
.childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
Cuando el diseño de un documento Web ha sido depurado de errores y es aceptado por la mayoría de los navegadores en la mayoría de las plataformas, se le puede consolidar dándole la forma de lo que se conoce como una definición de documento. Esto proporciona una referencia a los elementos legales y los atributos de un documento, una referencia que muchos usuarios (creadores de páginas Web) pueden compartir, y da una estandarización que puede simplificar las cosas. XML no requiere de una definición de documento. Cuando se está experimentando con XML o trabajando con archivos XML pequeños, la creación de definiciones de documentos podría ser una pérdida de tiempo. Si se están desarrollando aplicaciones, es mejor esperar a que la especificación sea estable antes de agregar una definición de documento, ya que de lo contrario el software podría dejar de funcionar al ocurrir errores de validación. Hay varios tipos de definición de documentos que pueden ser usadas con XML, siendo las principales:
1) Definición de Tipo de Documento (DTD, Document Type Definition), la convención original.
2) XML Schema, basada en XML, una convención más reciente y más moderna.
¿Y cómo puede manejar la máquina del usuario un documento XML que le ha sido enviado como tal por un servidor Web?
La especificación inicial del modelo DOM (Document Object Model) que apareció por vez primera no proporcionaba muchos detalles para las transacciones internas que se pudieran llevar a cabo en la máquina del usuario. Para escapar de las limitaciones del objeto DOM, los productores de navegadores crearon algo llamado Dynamic HTML (DHTML), un modelo DOM ampliado que le permitía al lenguaje ejecutable JavaScript instalado en cada navegador el poder manipular en forma efectiva más del contenido de una página. Desafortunadamente, esto seguía adolecíendo de muchas limitaciones, y lo que es peor, Netscape y Microsoft crearon versiones distintas e incompatibles de DHTML. Afortunadamente, y respondiendo a estas carencias e incompatibilidades, hizo su aparición la especificación DOM Nivel 2 (DOM Level 2), apoyada en la actualidad por la gran mayoría de los navegadores, que hizo a las dos versiones incompatibles de DHTML obsoletas e innecesarias. La especificación DOM Nivel 2 se volvió oficial en noviembre del año 2000, tras lo cual apareció posteriormente la especificación DOM Nivel 3 que se volvió oficial en abril de 2004.
La clave del procesamiento de documentos XML en la máquina del usuario consiste en aprovechar el hecho de que los objetos DOM de un documento son organizados dentro de una página Web en forma de una estructura en forma de árbol, con un elemento raíz a partir del cual se van anidadando otros elementos (en realidad, y a diferencia de los árboles en la Naturaleza, la “raíz” del árbol no es concebida estando abajo sino estando arriba, en el tope jerárquico del diagrama del árbol, mientras que el árbol va creciendo hacia “abajo” en lugar de ir creciendo hacia arriba). El árbol puede ser visualizado de tres maneras distintas. Ya vimos una de tales maneras, en las cuales cada árbol es un árbol que está formado por elementos, habiendo un elemento raíz dentro del cual están anidados otros elementos dentro de los cuales pueden estar anidados otros elementos y así sucesivamente. De este modo podemos asignarle a un objeto document (dentro del modelo DOM) que contiene un formulario una estructura como la siguiente:
Pero podemos visualizar el árbol de otro modo, en el cual cada elemento es lo que llamamos
un nodo (obsérvese que estamos usando aquí una terminología propia de las listas enlazadas que se estudian en la materia conocida como “Estructura de Datos”, y esto no es una mera casualidad). Pero además de esta segunda manera de ver un árbol de elementos, hay una tercera manera que consiste en ver cada elemento-nodo como un objeto. Y esto es de la mayor importancia, porque si cada nodo en el árbol puede ser tratado dentro de un lenguaje como JavaScript (o Java) como un objeto en el sentido formal de la palabra, entonces podemos asignar a cada nodo las características de un objeto formal, esto es, cada nodo posee propiedades y métodos.
Cada nodo es un objeto en el pleno sentido de la palabra en la terminología de la programación orientada-a-objetos, poseyendo propiedades y métodos.Así, al hablar de un documento XML podemos afirmar que estamos hablando de un documento DOM XML. Cada nodo (objeto) en el árbol de un documento DOM XML puede ser accesado mediante las técnicas que el lenguaje de programación JavaScript pone a la disposición de los programadores en lo que se conoce como la manipulación de nodos.
Mediante JavaScript, cada nodo, siendo un objeto, puede ser accesado a través de las siguientes propiedades que podemos examinar o fijar:
nodeName.- Este es el nombre (no la identificación ID) de cada nodo. Para nodos que están basados en etiquetas HTML, como <body> o <p>, el nombre del nodo es el nombre de la etiqueta: BODY o P. Para el nodo document, el nombre del nodo es un código especial: #document. De modo semejante, los nodos de texto tienen el nombre #text.Adicionalmente, cada nodo tiene un número de propiedades que describen su relación con otros nodos:
nodeType.- Este es número entero que describe el tipo de nodo: 1 para etiquetas HTML ordinarias, 3 para nodos de texto, y 9 para el nodo document.
nodeValue.- Este es el texto actual (o dato) contenido dentro de un nodo de texto. Esta propiedad no es válida para otros tipos de nodos.
innerHTML.- Este es el contenido HTML de cualquier nodo. Podemos asignarle a esta propiedad un valor que incluya etiquetas HTML así como cambiar dinámicamente los objetos hijo (child) DOM para un nodo. Frecuentemente es la manera más fácil para cambiar el contenido de una página Web (además de borrar y crear nodos de la manera convencional).
firstChild.- Este es el primer objeto hijo de un nodo. Para nodos que contienen texto, tales como h1 o p, el nodo de texto que contiene el texto actual es el primer hijo.Las relaciones en una familia de nodos dada por las propiedades antes citadas se pueden visualizar de la siguiente manera:
lastChild.- Este es el último objeto hijo de un nodo.
childNodes.- Esta es una lista ordenada (array) que incluye todos los nodos hijo. Podemos usar un bucle sobre esta lista ordenada de nodos para recorrer y trabajar sobre todos los nodos ubicados dentro de cierto nodo.
previousSibling.- Es el nodo hermano (sibling, un nodo al mismo nivel) previo al nodo actual.
nextSibling.- Es el nodo hermano (sibling) después del nodo actual.
Cada nodo dentro de una página Web o dentro de un documento XML, siendo un objeto, tiene disponibles cierto número de métodos. Cuál de estos métodos pueda ser válido depende de la posición del nodo dentro de la página, y de si el nodo tiene progenitores o hijos.
appendChild(nuevo).- Anexa el nuevo nodo hijo especificado poniéndolo después de todos los nodos previamente existentes dentro del objeto.El siguiente gráfico animado nos muestra cómo mediante estos métodos podemos llevar a cabo la creación, la destrucción, el reemplazo y el copiado de nodos según se requiera:
insertBefore(nuevo, previo).- Inserta el nuevo nodo hijo especificado antes del nodo hijo previo que debe existir con anterioridad.
replaceChild(nuevo, viejo).- Reemplaza el viejo nodo hijo especificado con un nuevo nodo hijo.
removeChild(nodo).- Remueve un nodo hijo del conjunto de nodos hijo de un objeto.
hasChildNodes().- Regresa un valor boleano de true (verdadero) si el objeto tiene uno o más nodos hijos, o false (falso) si no tiene ningún nodo hijo.
cloneNode().- Crea una copia idéntica de un nodo existente. Si se le suministra un parámetro true, la copia incluirá también todos los nodos que descienden del nodo original.
Como puede apreciarse en el gráfico animado, los nodos hermanos (sibling) forman una lista enlazada, y podemos aplicar sobre la misma todas las técnicas disponibles para el manejo típico de estructuras de datos habido el hecho de que se trata de una lista indexada y podemos accesar cualquier objeto en la lista a través de su índice respectivo. Obviamente, y como lo dictan las buenas prácticas de programación, no se borra un nodo progenitor sin antes haber borrado todos sus nodos hijos. Bajo la convención XML DOM (Document Object Model) existe un objeto que representa la lista completa y ordenada de nodos hermanos sibling, es el objeto NodeList, que tiene la propiedad length que nos regresa el número total de nodos que hay en una lista, y el método item que nos regresa el nodo de una lista de nodos entresacado por su índice.
Por su parte, y en lo que corresponde a la página HTML en sí, el nodo document bajo la convención del modelo DOM también tiene varios métodos útiles, siendo los más importantes:
getElementById(id).- Procura y regresa el elemento que posee el atributo id especificado.A continuación se presenta un ejemplo de la creación de un nodo de texto:
getElementsByTagName(etiqueta).- Regresa una lista ordenada (array) de todos los elementos que posean el nombre de etiqueta especificado. Podemos usar el símbolo de la tarjeta salvaje (*) para que se nos regrese una lista ordenada que contenga todos los nodos en el documento.
createTextNode(texto).- Crea un nuevo nodo de texto que contendrá el texto especificado, el cual podemos agregarle al documento.
createElement(etiqueta).- Crea un nuevo elemento HTML para la etiqueta especificada. Como en createTextNode, tenemos que agregar el elemento al documento después de crear el elemento. Podemos asignar contenido dentro del elemento cambiando sus objetos hijo o la propiedad innerHTML.
var nodo = document.createTextNode("Este es un ejemplo");
Una primera aplicación importante de XML es MathML, siendo precisamente el primer lenguaje XML en ser recomendado por el consorcio mundial W3C en abril de 1998. Desafortunadamente, MathML no es una manera compacta para obtener lo que se desea en un navegador, y hay muy pocos navegadores con apoyo a MathML integrado a los mismos. Tómese por caso la conocida solución a la formula cuadrática:
para cuya rendición gráfica en LaTeX se requiere el siguiente código que no ocupa más que una línea de caracteres:
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
En cambio, para que la misma fórmula cuadrática pueda ser reproducida correctamente por MathML en un navegador que sea capaz de hacer tal cosa, se requiere lo siguiente:
<math>Y hay muchas otras fórmulas mucho más complejas que la fórmula cuadrática que incorporan símbolos integrales, símbolos diferenciales, subscriptos y superscriptos, caracteres griegos, etc. Obviamente, MathML no fue diseñado para escribir o editado directamente fórmulas matemáticas, se requiere forzosamente de algún editor visual (como MathFlow, FireMath y MathType) que permita primero construír la formula o expresión matemática tras lo cual el editor visual pueda generar el código MathML que sera intercalado en la página Web. Cómparese la cantidad de texto-código que se requiere para reproducir la fórmula en LaTeX con la cantidad de texto-código que se requiere para reproducir la fórmula con MathML. En un documento HTML en el que haya unas doscientas o trescientas fórmulas matemáticas, algunas de ellas sofisticadas y complejas, la cantidad de caracteres en la página HTML (o mejor dicho, el tamaño del archivo) que se tiene que enviar vía Internet aunado a la cantidad del tiempo de cómputo requerido para que se reproduzca la fórmula en las máquinas de los usuarios, sumado al hecho de que son pocos los navegadores que incorporan un apoyo integrado a MathML, hace que en ciertas situaciones tal vez sea preferible producir archivos de imágenes GIF o PNG de las fórmulas y enviar imágenes de fórmulas matemáticas que el código MathML para producirlas.
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mrow>
<mo>-</mo>
<mi>b</mi>
</mrow>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo>⁢</mo>
<mi>a</mi>
<mo>⁢</mo>
<mi>c</mi>
</mrow>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
A continuación se tiene una muestra de un documento XML completo que en realidad es un documento MathML (obsérvese bien la declaración DOCTYPE que tiene que ser usada en este caso para advertirle a los navegadores acerca de la Definición del Tipo de Documento DTD usada):
<?xml version="1.0" encoding="UTF-8"?>MathML, siendo XML, puede ser incrustado dentro de otros archivos XML tales como XHTML usando nombrespacios XML, como lo muestra el siguiente ejemplo (compárese la declaración DOCTYPE en este ejemplo con la declaración DOCTYPE del ejemplo anterior):
<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<mo>⁢</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mo>⁢ </mo>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
</mrow>
</math>
<?xml version="1.0" encoding="UTF-8"?>Al concluir la primera década del tercer milenio, no eran muchos los navegadores que daban soporte de apoyo a código MathML incrustado en XHTML, dadas las dificultades técnicas que se encuentran en la construcción gráfica en tiempo-real de fórmulas matemáticas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ejemplo de MathML incrustado en un archivo XHTML</title>
<meta name="description" content="Ejemplo de MathML incrustado en un archivo XHTML"/>
</head>
<body>
<h1>Ejemplo de MathML incrustado en un archivo XHTML</h1>
<p>
El área del círculo es:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>π<!-- π --></mi>
<mo>⁢<!-- ⁢ --></mo>
<msup>
<mi>r</mi>
<mn>2</mn>
</msup>
</math>.
</p>
</body>
</html>
Las convenciones XHTML
Ya se indicó arriba que las convenciones usadas en el lenguaje XHTML son definidas usando a XML como metalenguaje. Combinando las fortalezas de HTML y XML, se desarrolló XHTML, el cual es HTML rediseñado como obedeciendo las sintaxis de XML.
Por haber sido diseñado XHTML usando XML, un documento XHTML tiene que obedecer las mismas reglas de sintaxis impuestas por XML que vimos arriba, o sea que, en lo que respecta a los elementos XHTML:
• Todos los elementos de XHTML tiene que tener una etiqueta de cierre.
• Todos los elementos de XHTML tienen que estar anidados en forma apropiada.
• Todos los documentos XHTML tienen que contener necesariamente un elemento raíz,
Adicionalmente, se impone la siguiente restricción a los elementos XHTML:
• Todos los elementos XHTML tienen que estar dados en letras minúsculas.
En lo que respecta a los atributos de los elementos XHTML, se deben cumplir las siguientes reglas de sintaxis:
• Los valores en los atributos XHTML tienen que ser puestos entre dobles comillas.
• No se permite la minimización de los atributos en los elementos XHTML.
• Los nombres de los atributos en los elementos XHTML tienen que estar dados en letras minúsculas.
En lo que toca a la estructura de un documento XHTML, la declaración <!DOCTYPE ....> que va al principio del documento XHTML es obligatoria. El atributo de nombrespacio XML que va en el elemento html es también obligatorio. Y la inclusión de los elementos <html>, <head>, <title>, y <body> también es obligatoria.
El siguiente ejemplo nos muestra un documento XHTML con un mínimo de las etiquetas requeridas en forma obligatoria para que sea aceptado universalmente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Podemos convertir un documento HTML en un documento XHTML sin muchas dificultades. Para ello, los pasos a seguir son los siguientes (véase el ejemplo dado arriba):
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
......
......
......
</body>
</html>
1. Se agrega una declaración XHTML <!DOCTYPE> a la primera línea de cada página.
2. Se agrega un atributo xmlns al elemento html de cada página
3. Se cambian todos los nombres de todos los elementos a letras minúsculas.
4. Se cierran todos los elementos vacíos.
5. Se cambian todos los nombres de todos los atributos a letras minúsculas.
6. Se ponen entre dobles comillas todos los valores de todos los atributos.
El documento XHTML puede hacer todo lo que hace un documento HTML para presentar texto e imágenes visualmente en el navegador al usuario, y además se pueden crear etiquetas nuevas que el HTML original no reconocería pero que el XHTML sí puede reconocer e interpretar con la ayuda de código adicional.
