Tutoriales Web

XHTML

Presentación

Lenguajes de marcado y lenguajes de presentación

En cualquier documento hay al menos tres componentes diferenciados: (1) el contenido, (2) la estructura y (3) la presentación. Para nosotros son una sola cosa, porque vemos directamente el resultado y no el proceso por el cual ha pasado el documento antes de ser como es; por ejemplo, para nosotros esto que estamos leyendo ahora es una sola cosa, texto sin más, pero en realidad es texto más una serie de indicaciones que causan que lo veamos como un párrafo y no de otra manera (p.e. como un titular o de color azul o en negrita). Por lo tanto, en el proceso de producción de ese texto ha hecho falta que alguien (en este caso el autor de esta página) "marcara" cada porción del texto indicando cosas como las señaladas: tipo de componente (p.e. párrafo), familia de letra, tamaño, variación (p.e. negrita), etc.

Otro ejemplo: la siguiente imagen muestra parte de un documento donde se destacan algunas de las característica que ha sido necesario marcar previamente para causar que la página se muestre exactamente de la forma que la vemos aquí (y en el sitio web original en http://www.unhchr.ch/udhr/index.htm, en marzo del 2008):

Página web de las Naciones Unidas

Figura 1: Una parte de la página web de las Naciones Unidas resaltando algunas de las marcas que contiene el documento a nivel interno y que causan la apariencia y la estructura que vemos aquí

Un lenguaje de marcado es un conjunto predefinido de marcas o etiquetas que sirven para especificar la estructura de un documento en base a señalar el tipo de componente estructural que es cada pieza del documento, por ejemplo, si es un párrafo, una tabla, un pie de ilustración, un título de sección, etc.

Un lenguaje de presentación es un conjunto reglas que especifican cómo deben mostrarse en un soporte determinado (p.e. en una pantalla de ordenador) cada componente de la estructura de un documento, por ejemplo, cómo deben mostrarse los títulos de cada capítulo o el texto de cada párrafo, qué margenes debe tener cada página, el color de fondo de la misma, etc. Tradicionalmente, el mundo de las artes gráficas ha utilizado distintos lenguajes de marcado para que en la cadena de producción de un documento impreso (p.e. un libro) la estructura y la apariencia final correspondiera a la apariencia diseñada.

En el mundo de la web hacen falta también lenguajes de marcado y lenguajes de presentación que sirvan para indicar las cosas señaladas. De otro modo, los navegadores como Opera, Mozilla o IExplorer no sabrían cómo mostrar una página (o las mostraría todas iguales o cada navegador mostraría la misma página de forma totalmente distinta). En concreto, en la Web, los lenguajes más utilizados son:

Código fuente

Tanto XHTML como CSS son lenguajes que corresponden a estándares internacionalmente aceptados y son independientes de cualquier marca o fabricante. XHTML (o sus versiones anteriores bajo la denominación antigua, sin la X, o sea HTML) no solamente es el lenguaje con el que está publicada la inmensa mayoría de las páginas web, sino que precisamente es el lenguaje recomendado para hacerlo, hasta el punto que, en realidad decir XHTML es decir página web (y a la inversa).

En condiciones normales no vemos el lenguaje de marcado porque el navegador lo oculta. En realidad nadie quiere ver el lenguaje de marcado, lo que queremos ver es el resultado, y de eso se encarga el navegador, es decir, de interpretar las marcas, aplicarlas a la porción del documento que afectan y mostrar directamente el resultado.

Las marcas del lenguaje XHTML se denominan etiquetas y el conjunto de esas etiquetas junto con el contenido afectado en una página web se denonima código fuente. En rigor, toda página web es un documento de texto y sólo de texto, aunque aparentemente contenga imágenes y otros elementos multimedia. Lo que ocurre es que ese documentos de texto, denominado código fuente desde este punto de vista, contiene el nombre de los distintos ficheros que deben mostrarse de una forma más o menos armoniosa como parte de una página unitaria. Esa tarea de esamblaje es cosa del tantas veces mencionado e imprescindible navegador.

Las imagénes siguientes muestran a la izquierda una página tal como la interpreta un navegador y a la derecha en código fuente:

 

PBS Nova PBS Nova código fuente

Figura 2: Una página web interpretada por un navegador y una porción de su código fuente

 

 

 

 

 

Estructura de una página web