María Jesús Lamarca Lapuente. Hipertexto: El nuevo concepto de documento en la cultura de la imagen.

El lenguaje de marcas de hipertexto, HTML o (HyperText Markup Language) se basa en el metalenguaje SGML (Standard Generalized Markup Language) y es el formato de los documentos de la World Wide Web. El World Wide Web Consortium (W3C) es la organización que desarrolla los estándares para normalizar el desarrollo y la expansión de la Web y la que publica las especificaciones relativas al lenguaje HTML.

HTML fue concebido como un lenguaje para el intercambio de documentos científicos y técnicos adaptado para su uso por no especialistas en tratamiento de documentos. HTML resolvió el problema de la complejidad de SGML sirviéndose de un reducido conjunto de etiquetas estructurales y semánticas apropiadas para la realización de documentos relativamente simples. Pero, además de simplificar la estructura de los documentos, HTML soportaba el hipertexto.

En un corto período de tiempo, HTML se hizo muy popular y rápidamente superó los propósitos para los que había sido creado. Desde sus albores, ha habido una constante invención de nuevos elementos para usarse dentro de HTML como estándar y para adaptar HTML a las nuevas posibilidades de la Web, como la posibilidad de usar elementos multimedia o la utilización de elementos dinámicos (animaciones Java, uso de Flash, controles ActiveX, etc. que hacen las páginas web mucho más llamativas e interactivas para el usuario. Sin embargo, esta ampliación de nuevos elementos también ha traído problemas de compatibilidad de los documentos entre las distintas plataformas y programas.

El lenguaje HTML nace en 1991 de manos de Tim Bernes-Lee del CERN como un sistema hipertexto con el único objetivo de servir como medio de transmisión de información entre los científicos que se ocupaban de la Física de alta energía ,como parte de la iniciativa World Wide Web. Así pues, HTML tuvo lugar a la par que el origen de la Web, ya que se trata del lenguaje que sirve para crear páginas web. En 1993 Dan Connelly escribe la primera  DTD (Document Type Definition) de SGML describiendo el lenguaje y, desde entonces, el lenguaje HTML ha estado sometido a incesantes cambios. De hecho, han existido distintas versiones: 1.0 (en 1993), 2.0 (en 1995), 3.0 (en 1995), 3.2 (en 1997), 4.0 (en 1997, revisada en 1998).

Ya en 1994 el sistema había tenido tal aceptación que la especificación se había quedado obsoleta. Por aquel entonces WWW y Mosaic eran casi sinónimos debido a que el navegador Mosaic del NCSA (National Center for Supercomputing Applications) era el más extendido gracias a las mejoras que incorporaba. Es entonces cuando nace el HTML 2.0 en una especificación también realizada por Dan Connelly. El crecimiento exponencial que comienza a sufrir el sistema lleva a organizar la "First International WWW Conference" en mayo de 1994. El principal avance de 2.0 de HTML es la incorporación de los llamados "forms"  o formularios que permiten que el usuario cliente envíe información al servidor y ésta sea recogida y procesada allí. Precisamente con este fin, NCSA presenta la especificación del CGI, Common Gateway Interface, versión 1.0 que define una interfaz entre programas ejecutables y el sistema WWW. Desde entonces, el lenguaje HTML ha seguido creciendo como algo dinámico hasta llegar no sólo a la especificación HTML 4.01 en septiembre de 2001 (http://www.w3.org/TR/html401/) -la última versión está disponible en el sitio web del W3 Consortium en la dirección (http://www.w3.org/TR/1998/REC-html40-19980424)-, sino también a otros lenguajes de transición como XHTML que es una reformulación de HTML como aplicación XML.

La norma ISO/IEC 15445:2000 recoge el lenguaje HTML estandarizado (http://purl.org/NET/ISO+IEC.15445/15445.html). Roger Price y David Abrahamson han escrito una guía al respecto: la User's guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML) (http://purl.org/NET/ISO+IEC.15445/Users-Guide.html) donde establecen de forma pormenorizada la descripción de documentos y el procesamiento del lenguaje HTML.

Los documentos HTML son archivos de texto plano (también conocidos como ASCII) que pueden ser creados mediante cualquier editor de texto, aunque también existen programas específicos para editar HTML (los editores más conocidos son Microsoft FrontPage, Netscape Composer, Macromedia Dreamweaver y Adobe PageMill), concebidos específicamente para editar páginas web en HTML.

HTML no permite definir de forma estricta la apariencia de una página, aunque en la práctica, se utiliza también como un lenguaje de presentación. Los archivos de HTML se leen en un navegador web tal como Netscape Navigator, Microsoft Explorer, Mozilla, etc. La presentación de la página es muy dependiente del navegador o browser utilizado ya que el mismo documento no produce el mismo resultado en la pantalla si se visualiza con uno u otro, o sea, HTML se limita a describir la estructura y el contenido de un documento, y no el formato de la página y su apariencia.

Una de las claves del éxito de la World Wide Web, aparte de lo atractivo de su presentación es, sin duda, su organización y coherencia. Todos los documentos WWW comparten un mismo aspecto y una única interfaz, lo que facilita enormemente su manejo por parte de cualquier persona. Esto es posible porque el lenguaje HTML no sólo permite establecer enlaces entre diferentes documentos, sino que es un lenguaje de descripción de página independiente de la plataforma en que se utilice. Es decir un documento HTML contiene toda la información necesaria sobre su aspecto y su interacción con el usuario, y es luego el navegador que utilicemos el responsable de asegurar que el documento tenga un aspecto coherente, independientemente del tipo de ordenador o de estación de trabajo desde donde estemos efectuando la consulta.

Los archivos HTML tienen la extensión .html ó htm y para ver la estructura de una página web en lenguaje HTML, los navegadores suelen disponer de un menú con la opción "Ver"  desde la que se puede visualizar el código fuente de la página HTML. Dicho código fuente nos dará una idea clara de en qué consiste este lenguaje que, como hemos dicho anteriormente, es un simple lenguaje de marcas entre cuyas funciones destaca la posibilidad de enlazar documentos y partes de documentos, esto es, la hipertextualidad.

Así pues, existen dos herramientas fundamentales e imprescindibles asociadas al lenguaje HTML, por un lado, los editores HTML (para crear documentos HTML) y, por otro, los navegadores (para visualizar dichos documentos). Aunque también existen otras herramientas automatizadas para generar páginas web, como son los conversores desde otros formatos y otro tipo de herramientas como los revisores y validadores que nos permiten analizar los documentos HTML ya creados para ver si se ajustan a los parámetros de este lenguaje.

Creación de documentos HTML:

Para crear documentos HTML sólo es necesario :

•  Un procesador de textos o un editor de documentos HTML

•  Un navegador del WWW o lo que se denomina "programa cliente" que permite el acceso a páginas WWW de Internet.

Editores

Los documentos HTML están en formato de texto sencillo (también conocido como ASCII), por eso se puede utilizar un simple procesador de textos para escribir un documento en lenguaje HTML. Este archivo será posteriormente interpretado por el programa navegador correspondiente, siempre que el documento esté guardado en formato: "sólo texto". Una vez creado el documento HTML, lo guardaremos con la extensión .html ó htm.

Se puede usar el Bloc de notas de Windows o cualquier otro editor de textos sencillo. Sin embargo, hay que tener cuidado con algunos editores más complejos puesto que formatean el texto y colocan su propio código especial al guardar las páginas y  HTML debe ser únicamente texto plano, con lo que podríamos tener problemas. Si creamos un documento HTML en un editor de texto que formatee dicho texto, debemos guardar el documento como documento de texto sin formato.

El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente.

Para escribir un párrafo sin estilo específico (por defecto) no es necesario poner etiqueta alguna. Lo único que hay que tener en cuenta es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por esta razón se utilizan una serie de etiquetas que sustituyen a estos elementos. El texto escrito no sufrirá ninguna modificación, exceptuando los acentos, la letra "ñ" y un conjunto de caracteres especiales.

En la actualidad no se precisa conocer ni el lenguaje SGML ni HTML en sí mismo a la hora de crear un hipertexto en la Web, pues los editores de HTML actuales simplifican enormemente la labor y ya no hay que trabajar con texto plano y etiquetas en código HTML, sino que los programas de edición ofrecen la posibilidad de disponer y ver la página mientras se crea y de insertar los comandos HTML y sus atributos de forma automática. Además, se ha generalizado la interfaz CGI o Common Gateway Interface, que posibilita que el navegador pueda trabajar conjuntamente con el servidor. 

Los editores permiten también la inserción de elementos multimedia: imágenes, audio, vídeo,  javascripts, etc; e incluso ofrecen plantillas de páginas con modelos de páginas personales o corporativas, diseño con marcos o bordes compartidos, índices, mapas del web, etc ) y estilos predeterminados para dar homogeneidad a todo un sitio web. Los programas más recientes se orientan no sólo al formato físico de la WWW, sino también a su estructura y de esta forma es posible explorar y jerarquizar los nodos, mostrar las relaciones entre ellos, indicar la localización de los puntos de origen y destino de cada enlace, crear de forma automática tablas de contenido del web, índices, etc.

En la actualidad se han desarrollado un gran número de sistemas de gestión de hipertextos, ya sea para hipertextos independientes o para crear y gestionar hipertextos abiertos a la web y muchos de ellos son gratuitos. Sin embargo, los editores web que ofrecen mayor número de funcionalidades, suelen ser de pago. Entre los más conocidos destacan Hot Dog (http://www.sausage.com), Microsoft FrontPage (http://www.microsoft.com/frontpage/) el editor de Microsoft y con el que se ha diseñado este hipertexto, DreamWeaver (http://www.macromedia.com/software/dreamweaver/), Adobe GoLive (http://adobe.es/products/golive/main.html), pero existen un gran número y una gran variedad de editores web que emplean el lenguaje HTML.

Representación de la vista Exploración de este hipertexto en el proceso de su elaboración,
 mediante el editor web Microsoft FrontPage

Sin embargo, el uso de un editor de páginas Web presenta algunas desventajas en relación al uso de editores de texto sin formato. Por un lado, se depende de un software propietario que suele estar protegido por derechos de autor y que no presenta una total compatibilidad entre navegadores y, por otro, al utilizar este tipo de editores se produce una gran número de las llamadas etiquetas meta o metaetiquetas que suelen ser redundantes. Estas etiquetas meta que aparecen en la parte superior de la página y que proporcionan información acerca de la página, pero que no afectan a su apariencia, son las que incluyen los metadatos que posteriormente facilitarán la búsqueda y recuperación de los documentos por parte de los robots y motores de búsqueda. Por ejemplo, la metaetiqueta generator indica el tipo de editor con el que se creó la página HTML.

Por otro lado, también es posible crear documentos con editores de texto sin formato y después modificarlos con un editor HTML, o bien  realizar la operación contraria, con el fin combinar lo mejor de estos dos sistemas. Y además tenemos la posibilidad de crear un documento en un formato determinado y transformar dicho documento al formato HTML por medio de un conversor.

Los editores HTML se clasifican en 3 tipos:

•  Wysywyg (what you see is what you get -lo que ves es lo que obtienes-): son editores que muestran en pantalla de forma inmediata lo que se va creando. Son muy útiles para apreciar los colores y la disposición de los elementos.

•  No Wywywyg: editores que necesitan una aplicación externa (el navegador o browser) para mostrar lo que se va creando. Son útiles para recordar los comandos HTML y sus atributos.

•  Mixtos: presentan la pantalla dividida en dos ventanas, una con el código HTML y otra con el resultado final, o permiten la visualización de ambos en ventanas diferentes que se pueden visualizar de forma alternativa.

Conversores

Se trata de herramientas que permiten transformar un documento escrito en otro formato al formato de un documento HTML. La mayoría de los editores de HTML cuentan con herramientas de este tipo. Su utilización es muy eficaz cuando se ha realizado un gran trabajo previo en otro sistema diferente. Para usarlos, se debe simplificar al máximo el formato documento (eliminar las sangrías, uniformar los tamaños y tipos de letra, etc.) para luego pasar el conversor y generar así un documento HTML. También es posible convertir muchos hipertextos creados con herramientas independientes, para abrirlos a la Web al ser transformados en documentos HTML.

Revisores y validadores:

Uno de los problemas que ha acompañado al lenguaje HTML es la diversidad de navegadores, ya que no todos son capaces de interpretar un mismo código de una manera unificada. Esto obliga al diseñador de documentos HTML a que, una vez creada su página, compruebe que ésta puede ser leída satisfactoriamente por todos los navegadores, o al menos, por los más utilizados.

Existen una serie de herramientas llamadas revisores o validadores que permiten verificar si una página web se ajusta a las recomendaciones o especificaciones del W3C World Wide Web Consortium. Así, podemos comprobar si dicha página se ajusta al estándar HTML y a otros estándares complementarios, y si cumplen o no con las normas estandarizadas que hacen posible la accesibilidad.

Entre estos validadores podemos destacar los siguientes:

•  W3C MarkUp Validation Service.  http://validator.w3.org/ Servicio de Verificación de marcas o etiquetas del W3C que chequea si los documentos HTML son conformes con las Recomendaciones del W3C World Wide Web Consortium para los estándares HTML y XHTML.
   

•  W3C CSS Validation Service. http://jigsaw.w3.org/css-validator/  Servicio de Verificación de Hojas de Estilo (CSS) en documentos (X)HTML del W3C. Verifica si los documentos cumplen las recomendaciones del W3C World Wide Web Consortium

Las etiquetas del lenguaje HTML

Básicamente, HTML utiliza los mismos elementos que SGML, esto es, marcas o etiquetas compuestas de códigos enmarcados por los signos < >. Cualquier documento HTML comienza con la etiqueta <html> y termina con la etiqueta </html>. Dentro existen dos zonas bien identificadas: el encabezamiento, que se identifica con la etiqueta <HEAD> y </HEAD> y sirve para definir una serie de valores válidos en todo el documento, y el cuerpo del documento, representado por etiqueta <BODY> y </BODY> que muestra la información del documento.

Dentro del encabezamiento, la etiqueta principal es la del título, representado por la etiqueta <TITLE> En el cuerpo del documento se pueden establecer diferentes categorías utilizando diversos tamaños de fuentes y estableciendo así la estructura básica del documento. Dentro del cuerpo se coloca el contenido de la página web: textos, imágenes, tablas, formularios, gráficos, mapas sensibles, etc. La información se puede estructurar en párrafos y/ o secciones con cabeceras de distinto nivel, enlaces a otras partes del mismo documento, a documentos distintos, o a documentos que estén en distinto servidor, etc. 

También podemos determinar el estilo y tipo de letra mediante los atributos, como son los de final de línea <br> y final de párrafo <p>, los de presentación de texto preformateado, es decir, manteniendo los espacios y retornos de carro <pre> o los de negrita <b>, cursiva <i>, centrado <center>, etc. Además se pueden definir listas numeradas y no numeradas, glosarios, trazar líneas horizontales para separar textos, insertar comentarios, etc. 

Pero, sin duda, los elementos más característicos del lenguaje HTML y que dotan a los documentos con él creados de la característica hipertextual, son las anclas o anclajes utilizados para establecer los enlaces, ya se trate de texto o gráficos. Para fijar un enlace, se debe enmarcar el texto que aparecerá subrayado para que el usuario pueda pulsarlo y le redirija a la dirección o URL marcada. La etiqueta ancla debe incluir el parámetro href="URL" y el texto para pulsar. Si se trata de imágenes, éstas se insertan mediante la etiqueta src="URL" y también podemos conseguir que el gráfico se convierta en un enlace mediante la etiqueta correspondiente.

Existen una gran cantidad de etiquetas, muchas de ellas pueden contener elementos y atributos que realizarán una función u otra según la voluntad del autor. 

La estructura de un documento HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>.

Dentro del documento hay dos zonas principales: el encabezamiento, delimitado por las marcas <HEAD> y </HEAD>, que sirve para definir algunos valores válidos para todo el documento, y el cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la información del documento.

El elemento <TITLE> contenido dentro del encabezamiento permite especificar el título de un documento HTML. Este título no forma parte del documento en sí pues no se ve en la pantalla principal, sino que sirve como título de la ventana del programa que la muestra.

Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje HTML en su nivel básico no son necesarios.

El cuerpo de un documento HTML contiene el texto, imágenes, etc. que, con la presentación y los efectos que se decidan, se presentarán ante el usuario. Dentro del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o etiquetas (también otros autores las denominan "directivas").

Así pues, la estructura de un documento HTML es la siguiente:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible visualizar la página]
</BODY>
</HTML>

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

Hay otras etiquetas como <P>, para separar los distintos párrafos, la etiqueta de centrado  <CENTER> y </CENTER> que sirve para centrar todo lo que esté dentro de ella, ya sea texto, imágenes, etc. la etiqueta <HR> para obtener una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, etc.

He aquí un ejemplo:

<HTML>
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
</HTML>

Pero existen también una serie de Atributos:

<body background="nombre_de_archivo">

Especifica una imagen para el fondo del documento.

<body bgcolor="#rrggbb">

Especifica un color para el fondo del documento.

<body text="#rrggbb">

Especifica un color para el texto normal del documento.

<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">

Establece el color del texto de vínculo, del vínculo visitado y del vínculo activo.

#rrggbb representa el valor hexadecimal del color expresado como rojo-verde-azul.

Estilos y efectos básicos

Todas las etiquetas que siguen a continuación se introducen a partir de la etiqueta <BODY>, es decir, dentro del cuerpo del documento.

Títulos

Mediante los títulos, en sus diferentes niveles de importancia, se puede definir el esqueleto del documento o estructura básica. HTML tiene 6 niveles de cabeceras numeradas del uno al seis. He aquí algunos ejemplos de cabeceras HTML y su representación en pantalla:

Elementos de texto

<p>

El fin de un párrafo que será formateado antes de que se muestre en la pantalla

<pre>. . . </pre>

Identifica texto que ha sido formateado previamente (preformateado) por algún otro sistema y debe ser desplegado tal como es. Texto preformateado puede incluir etiquetas embebidas, pero no todos los tipos de etiquetas están permitidos. La etiqueta <tag> puede ser usada para incluir tablas en documentos.

<listing>. . . </listing>

Ejemplo de listado de ordenador; las etiquetas incluidas serán ignoradas, pero los espacios de tabulación funcionarán. Esta es una etiqueta ya arcaica.

<xmp>. . . </xmp>

Similar a <pre> excepto que no se reconocerán etiquetas incluidas.

<plaintext>

Similar a <pre> excepto que no se reconocerán etiquetas incluidas, como no hay etiqueta para finalizar, el resto del documento será traducido como texto simple. Esta es una etiqueta arcaica. Algunos navegadores reconocen una etiqueta </plaintext>, aún cuando no está definido por el estándar.

<blockquote>. . . </blockquote>

Incluye una sección de texto citado de cualquier otra fuente.

Atributos del texto

Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.

Fuentes HTML

Saltos de línea:

HTML no reconoce los finales de línea del editor de texto, pero la etiqueta <BR> desplaza el texto a la línea siguiente, y la etiqueta <P> también lo desplaza, dejando una línea de separación.

Párrafos:

A continuación se muestran las etiquetas HTML para fijar los párrafos y el resultado correspondiente:

Etiquetas HTML de párrafo

Tipos de letra:

Los tipos básicos son negrita, cursiva y teletipo o máquina de escribir, que utilizan los códigos B, I, TT, respectivamente, como demuestra el siguiente código:

Para centrar texto (o, en general, para centrar cualquier otra cosa: un gráfico, por ejemplo) se usa la etiqueta <center>:

<center>Verde que te quiero verde</center>

Listas

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).

Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios).

Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que no tiene porqué ser del mismo tipo.

 <ol>
 <li>Lentejas
 <li>Garbanzos
 <li>Judías
 </ol>

Tablas

He aquí las principales etiquetas para mostrar tablas en código HTML:

	<address>Dirección: socios@hipertexto.info</address>  Dirección: socios@hipertexto.info