(Inicio) (Artículos) (Charlas) (Documentos) (Programas) (Chorradas) (Otros)

Introducción al lenguaje HTML
 Ficha técnica
Autor: Esteban Manchado Velázquez
Fecha: Alrededor de 1998
Tema: Programación web

Si estás leyendo este texto, lo más probable es que hayas visto cientos de páginas web. Pero ¿sabes cómo son «por dentro»? ¿Sabes cómo hacer una página web «a mano»? Este artículo pretende ser una introducción al lenguaje HTML, el utilizado para generar las páginas web.

El lenguaje HTML (HyperText Markup Language, o lenguaje de marcas de hipertexto) no es más que un sencillo lenguaje de definición de documentos. Es relativamente flexible, aunque no muy potente... hasta llegar a la versión 4.0 del lenguaje, soportada sólo por los navegadores más modernos. Como todos los lenguajes de programación y algunos de definición de documentos, es puro texto. Sí, no es más que texto. Texto especial, eso sí. Porque no sólo escribimos el texto que queremos, sino cómo lo queremos. Por ejemplo, no sólo escribimos el título de la página. También escribimos que es un título.

¿Cómo se consigue esto? Con unas marcas especiales, llamadas etiquetas (del inglés «tag»). En HTML, estas etiquetas van entre ángulos (signos de mayor y menor que). Las hay de dos tipos: las que abren y cierran (el cierre se indica con una barra, «/» antes del nombre de la etiqueta a cerrar), que se utilizan para marcar «entornos», y las etiquetas «únicas», que no tiene cierre. Éstas últimas representan información por sí mismas. Las etiquetas, además, puedes tener propiedades, que son valores que «matizan» el significado de las etiquetas. Estas propiedades son palabras seguidas de un igual y un valor. Por ejemplo:

	<b>Este texto está en negrita (Bold)</b>.

	<p>Aquí empieza un párrafo nuevo, marcado por la etiqueta ``p''.

	<p>Y aquí va una etiqueta imagen (``img''), que necesita una
propiedad, que indique cuál es el archivo con la imagen a cargar <img
src=botoncito.gif>.

Así, tenemos que un documento HTML se compone de texto (lo que queremos) y etiquetas (que matizan lo que queremos y dan información adicional al navegador sobre cómo presentar las páginas). Hay que tener en cuenta que los espacios, para los analizadores de HTML, son simples marcas para separar las palabras, al igual que los saltos de línea. Si queremos separar texto, tenemos dos alternativas: La marca de párrafo (la «p»), y la marca de salto de línea (la «br», de break). La diferencia, por lo general, es que un nuevo párrafo deja una línea en blanco entre el anterior y el actual. Así, el texto a continuación aparecerá en una sola línea:

	<p>Este texto está cortado
en varias
	líneas, pero da igual,
porque los navegadores ignoran los espacios.

	Si hubiera querido separar este párrafo, tenía que haber puesto una
etiqueta ``p'' al principio, o una ``br''.

Con esto llegamos al papel de los navegadores. Ellos se encargan de leer las páginas HTML, que son texto, e interpretarlas, para sacar en pantalla el texto formateado correctamente, los atributos de éste, las imágenes, las tablas, etc. Es más difícil de lo que parece :-) Por ello, a veces las páginas no se ven exactamente igual en unos navegadores que en otros. Esto es debido a que nosotros, por lo general, sólo decimos qué queremos (un título), no cómo lo queremos (en negrita y con letras de 24 puntos). Esto lleva a que cada navegador puede interpretar los títulos de forma diferente, y presentar nuestras páginas de forma ligeramente distinta a como lo vemos en nuestro navegador preferido.

Pero volvamos a las etiquetas, y empecemos por el principio. Las etiquetas más importantes, que deben estar siempre al principio y al final de nuestros documentos, son las etiquetas «HTML» y «/HTML». Estas indican dónde empiezan y terminan nuestros documentos (se supone que deben ser lo primero y lo último en el fichero). Los documentos, a su vez, están divididos en cabecera y cuerpo. La cabecera (que se marca con la etiqueta «head») indica algunas propiedades «generales» del documento, como por ejemplo el título (eso que aperece en la barra de título de la ventana del navegador). Por ahora esa es la única que aprenderemos de la cabecera, el resto son para usos un poco más «avanzados». En el cuerpo va encerrado el contenido de la página lo que vemos dentro de la ventana del navegador.

Antes de empezar a escribir código HTML «serio», hay que hacer una puntualización importante. Muchos caracteres (los considerados «extraños» por los anglos, que son los que se podrían representar de forma diferente en máquinas distintas –PC y Mac, por ejemplo–) no se deben representar directamente, sino mediante una entidad. Aunque probablemente se verán bien en nuestro ordenador, en cualquier otro podría verse de forma lamentable. Los caracteres más representativos y usuales de estos caracteres «extraños» son los caracteres con tildes (cualquier tipo de tildes), nuestra maltratada «ñ», las comillas dobles, las comillas «europeas», el símbolo «y comercial» (ampersand, «&»), los símbolos de abrir admiración e interrogación, y por supuesto los símbolos de mayor y menor, que confundiríamos con etiquetas si no tuvieran una representación aparte.

A continuación sigue una tabla con las entidades de los simbolos más importantes, y con esto terminamos por este número:

Caracter Entidad
á &aacute;
é &eacute;
... ...
Á &Aacute;
É &Eacute;
... ...
ñ &ntilde;
Ñ &Ntilde;
¡ &iexcl;
¿ &iquest;
& &amp;
« &laquo;
» &raquo;
" &quot;
< &lt;
> &gt;

(Inicio) (Artículos) (Charlas) (Documentos) (Programas) (Chorradas) (Otros)