El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
CUATRO NORMAS FUNDAMENTALES
HTML es simplemente texto
Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede editar con cualquier editor de texto sencillo, como el Block de Notas de Windows.
Igualdad de mayúsculas y minúsculas.
HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en mayúsculas.
No importan los tabuladores, ni los saltos de línea
Los visualizadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentación de manera bastante fácil.
La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas <P>...</P> o <BR> para evitar que quede todo el texto en una sola línea.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
<title>Manual práctico de HTML</title>en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento. El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:
Estas
palabras
forman una
frase.producimos exactamente lo mismo que con: Estas palabras forman una frase.A la hora de la verdad lo que se ve es: Estas palabras forman una frase.
En resumen, la estructura básica de un documento HTML queda de la forma siguiente:
<html> <head> <title>Título</title> </head> <body> Texto del documento, menciones a gráficos, enlaces, etc. </body> </html>
ESTILOS Y EFECTOS BÁSICOS
TÍTULOS
<h1>Mucha importancia</h1>
Mucha importancia
<h2>Menos importancia</h2>
Menos importancia
<h3>Mucha menos importancia</h3>
Mucha menos importancia
ATRIBUTOS DEL TEXTO
Este será un texto normal (párrafo 1, línea 1).<br> El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p> Este ya es el segundo párrafo (párrafo 2, línea 1).<p>Este será un texto normal (párrafo 1, línea 1).
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). Este ya es el segundo párrafo (párrafo 2, línea 1).
Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.
El texto preformateado (etiqueta <pre>) se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:
<pre> Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- </pre>
Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | ---------------------Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>:
<blockquote>Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.<br> (Gabriel García Márquez, Cien años de soledad)</blockquote>
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.Las direcciones de correo electrónico se suelen marcar con esta directiva:
(Gabriel García Márquez, Cien años de soledad)
<address>Dirección: webmaster@etsit.upm.es</address>Dirección: webmaster@etsit.upm.esSe pueden dar también los atributos más tradicionales: negrita y cursiva:
<b>Esto en negrita</b> y <i>esto en cursiva</i>Esto en negrita y esto en cursiva Se puede utilizar un tipo de letra similar al de una máquina de escribir:
<tt>Máquina de escribir</tt>Máquina de escribir Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>:
<center>Verde que te quiero verde</center>
LISTAS
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 por supuesto no tiene porqué ser del mismo tipo.
Esto es una lista no numerada:
<ul> <li>Tomates <li>Zanahorias <li>Puerros </ul>
- Tomates
- Zanahorias
- Puerros
<ol> <li>Miguel Induráin <li>Tony Rominger <li>Eugeni Berzin </ol>
- Miguel Induráin
- Tony Rominger
- Eugeni Berzin
<dl> <dt>Perro (<i>n. masc.</i>) <dd>Animal de cuatro patas que ladra. <dt>Gato (<i>n. masc.</i>) <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <dt>Pescadilla (<i>n. fem.</i>) <dd>Animal que vive en el mar y está recubierto de escamas. </dl>
- Perro (n. masc.)
- Animal de cuatro patas que ladra.
- Gato (n. masc.)
- Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
- Pescadilla (n. fem.)
- Animal que vive en el mar y está recubierto de escamas.
VARIOS
<hr>
Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser:
<!-- Modificado por Álvaro el viernes 2 de junio -->
ENLACES Y GRÁFICOS
INTRODUCCIÓN
QUÉ ES UN URL
La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000).
La ruta es el nombre del fichero que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra. Los diferentes nombres que constituyan la ruta completa al archivo se deben separar con la barra / (inclinada hacia la derecha), tal y como se hace en el sistema operativo UNIX (y al revés que en MS-DOS). La razón de este convenio es precisamente que la mayor parte de los servidores de WWW que hay en Internet son ordenadores basados en UNIX, debido a la gran superioridad tecnológica de este sistema sobre MS-DOS. Esto se nota también en que por lo general los nombres de los ficheros no tienen muchas limitaciones: pueden ser casi tan largos como queramos, contener varios puntos, etc. Por ejemplo, el nombre de cierto fichero situado en un servidor podría ser /info/documentos/ciencia/fisica/relatividad.html. Debemos tener en cuenta que en UNIX las mayúsculas y las minúsculas son distintas en los nombres de los ficheros: no es igual FICHERO que fichero.
Conviene que nos detengamos momentáneamente en la estructuración habitual de los ficheros en un servidor de WWW. Para empezar, siempre hay una página de bienvenida (home page) que podría compararse con la portada de un periódico o revista: si no sabemos exactamente qué es lo que buscamos, o no sabemos dónde encontrarlo, la portada es lo primero que vemos. Para acceder a la home page de cualquier servidor de WWW, basta con escribir una barra en el lugar de la ruta (es decir, reclamamos al servidor el directorio raíz). Por ejemplo, para acceder a la página de bienvenida de la ETSIT, hay que dirigirse a http://www.etsit.upm.es/, y para ir a la de la NASA habría que contactar con http://www.nasa.gov/.
El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese directorio raíz en distintos subdirectorios y archivos. Un convenio muy habitual relativo al nombre de los ficheros es hacer que los archivos que contengan documentos HTML terminen en .html.
ENLACES
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>Lo cual producirá el resultado: Pulse aquí para visitar la NASA
Por lo general no nos preocupa irnos tan lejos, sino sencillamente enlazar con otro documento que se encuentra en el mismo servidor, puede que incluso que en el mismo subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace, sino que basta con dar la mínima información imprescindible. El programa que se use para leer el documento final suele ser lo bastante listo como para deducir el resto. Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre: <a href="el_otro_fichero">pulse aquí</a>. O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a href="/la/ruta/que/sea/fichero.html">pulse aquí</a>. También pueden utilizarse rutas relativas: <a href="ruta/relativa/cosa.html">cosa</a>.
GRÁFICOS
Hay un parámetro optativo de la directiva <img> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos.
Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos:
<img src="monigote.gif" alt="MONIGOTE"><p>Lo que se traduce en:
Como se ve, hemos especificado el texto alternativo "MONIGOTE", con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo.
Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo:
<img src="http://naic.nasa.gov/images/nasa-logo.gif"><p>
Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <a>. En este caso no debemos olvidar utilizar la opción alt="texto" para que todos los usuarios puedan seguir el enlace: <a href="http://www.nasa.gov/"><img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA"></a><p>
CARACTERES ESPECIALES
- < (Menor que): <
- > (Mayor que): >
- & (símbolo de and, o ampersand): &
- " (comillas dobles): "
El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en nuestro idioma son:
- á: á
- é: é
- í: í
- ó: ó
- ú: ú
- Á: Á
- É: É
- Í: Í
- Ó: Ó
- Ú: Ú
- ü: ü
- Ü: Ü
- ñ: ñ
- Ñ: Ñ
- ¿: ¿
- ¡: ¡
La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es absolutamente recomendable respetar la norma especificada en HTML.
En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos sin preocuparse por estos problemas, y luego traducir a HTML correcto. Al final de este manual encontrará un enlace a un programita en C que hace precisamente eso.
, en 
