1. Introducción

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.

Figura 1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE.

1.1. Características del lenguaje HTML

Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

1.2. Qué se necesita para crear una página web

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.

Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una página Web

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situación.

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html.

Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:

Figura 1.3. Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente.

1.3. Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:

El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos-fuentes por separado, por un lado el archivo del editor y por otro el archivo del código HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.

1.4. HTML es un lenguaje descriptivo

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, Microsoft Word o KWord) o un programa de descripción de páginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aquí comienza un párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar esos elementos.

Figura 1.4. Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.

¿Por qué funciona así? En un principio esta característica del HTML puede resultar molesta para el creador de la página, que no puede saber como será vista su página más que de una forma aproximada. Sin embargo es fundamental para conseguir que el World Wide Web pueda ser navegado con cualquier tipo de ordenador (dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los sistemas operativos son gráficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser descriptivo y como consecuencia tras crear una página el programador debe ver como es mostrada con varios navegadores distintos como Netscape Navigator o Microsoft Internet Explorer incluyendo algún navegador de texto como Lynx.

Pero una consecuencia más importante aún de esta característica, es que ha permitido que aparezcan navegadores vocales, que leen las páginas en vez de mostrarlas. Gracias a ello personas ciegas también han podido disfrutar del WWW. Es más, esta misma tecnología esta siendo usada para los nuevos navegadores embarcados en coches que leen la página al conductor para que no se distraiga.

NOTA: Una vez creada una página es recomendable probar nuestra página, no sólo con varios navegadores, sino también con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la posibilidad de probarlo además con un navegador vocal, mucho mejor aún.

Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como poner el titular de una página:


	<h1>Bienvenido a la página de La Super Editorial</h1>
      

Con este código estamos describiendo el texto Bienvenido a la página de La Super Editorial como el texto de máxima importancia en nuestra página, es el titular. En los navegadores más usados como el Netscape Navigator o el Microsoft Internet Explorer este titular será mostrado como un texto en negrita y de tamaño grande (el tamaño más grande posible). Sin embargo repetimos una vez más que existen navegadores como pueden ser Lynx o Emacs-W3 que son bastante usados por la comunidad académica y universitaria que sólo pueden mostrar texto y no pueden variar el tamaño de la letra. Por esta razón la etiqueta <h1> no dice que el texto que encierra debe ser de tal tamaño o si debe ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante de la página, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los medios de que dispone, como por ejemplo poniéndolo en mayúsculas o usando distintos sangrados.

También podemos encontrar ventajas de la descripción mirando al futuro. Imaginemos que la informática evoluciona hasta tal punto que los monitores de dentro de unos años pueden mostrar objetos en tres dimensiones. Sería muy interesante que el titular de nuestra página fuese en 3-D de manera que resaltase lo máximo posible. Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamaño 20 puntos y en negrita, por ejemplo) el navegador sabe que queremos que ese texto sea el más importante y puede actuar de manera inteligente poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros hayamos cambiado una sola línea de nuestro código! Parece interesante ¿no?

Una vez a quedado claro cual es el espíritu de HTML, hay que decir que últimamente se han introducido métodos para conseguir un mayor control sobre las páginas. Estos métodos permiten controlar aspectos como el tamaño de la letra la disposición (aproximada) de imágenes y texto de manera que se facilita la labor del programador. Pero hay que tener siempre en mente que siempre habrá ligeras diferencias entre como verán las páginas unos usuarios u otros y no debemos pretender poder controlar la presentación y diseño de nuestra página hasta el mínimo detalle.

1.5. Las bases de HTML

Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.

Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE_ETIQUETA>

O bien esta otra:


	<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
      

Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.

Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:

<hr>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:


	<etiqueta atributo="valor">
      

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores.

Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.

El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.

En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML pero con algunas restricciones adicionales del mundo de XML.

Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas o de minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del curso.

En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementos del código para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del código y no afecta al modo en que los objetos de nuestra página serán mostrados.