1. Introducción
- HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII2 (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales).
- Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< >)3. Estas etiquetas contienen todo el resto de la información de la página web.
- Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo.
- Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos.
- A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y
manejar siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para ello:
- Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas modificaciones durante el proceso de creación. Con bastante frecuencia se hará necesario consultar el código completo, con las etiquetas HTML (lo que se suele denominar código fuente o código madre) para corregir las disfunciones.
- Tal vez la mejor manera de aprender a diseñar páginas web es observar las páginas de los demás, cuyos códigos fuente están siempre disponibles para ser imitados (o incluso copiados, técnicamente, al menos). Pero, para ello, es necesario entenderlos.
- Los mismos editores HTML manejan términos propios del lenguaje HTML (heading, cellspacing, etc.), que es preciso comprender.
- Es necesario un buen conocimiento de HTML para insertar otros códigos más potentes, como los de Javascript, por ejemplo.
- El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los programas de texto disponibles en Windows: el Cuaderno de Notas.4 De esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas.
 inicio |
2. Esquema mínimo de un documento HTML
- Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el documento en cuestión está construido con dicho lenguaje.
- La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.
- Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.
- Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).
- La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
- El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
- Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM:
| EJEMPLO 1 |
| <HTML> |
| <HEAD> |
| </HEAD> |
| <BODY> |
| </BODY> |
| </HTML> |
| Ver resultado |
- He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y cuerpo, simplemente para facilitar su compresión gráfica, puesto que esta cuestión es totalmente indiferente. El resultado no variaría de haber colocado las etiquetas de cualquier otra manera. Por ejemplo:
| EJEMPLO 1: Variantes de escritura |
| <HTML> |
| <HEAD> |
| </HEAD> |
| <BODY> |
| </BODY> |
| </HTML> |
| <HTML><HEAD></HEAD><BODY></BODY></HTML> |
| <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> |
| Ver resultado |
- Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el comando Actualizar (o Refresh) para ver los cambios.
- Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así:
| EJEMPLO 2 |
| <HTML> |
| <HEAD> |
| <TITLE>Ejemplo 2</TITLE> |
| </HEAD> |
| <BODY> |
| </BODY> |
| </HTML> |
| Ver resultado |
- Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.
inicio |