La característica que más ha influido en el espectacular éxito del Web (o tela de araña) ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.

En general, los enlaces tienen la siguiente estructura:

<A HREF="xxx"> yyy </A>

donde xxx es el destino del enlace (Obsérvese las comillas).
yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)

Tipos de enlaces

Vamos a distinguir cuatro tipos de enlaces:

1. Enlaces dentro de la misma página
2. Enlaces con otra página nuestra
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de email

1. Enlaces dentro de la misma página

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:

<A HREF="#marca"> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="marca"> </A>

Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:

<A HREF="#final"> Pulsa para ir al final</A>

Que resulta como: Pulsa para ir al final (Puedes comprobar cómo salta a la pantalla final)

Y en el final del documento he puesto esta otra etiqueta:

<A NAME="#final"> </A>

2. Enlaces con otra página nuestra

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.

Supongamos que queremos enlazar con la página anterior, que la hemos llamado pag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:

<A HREF="pag2.html"> Página Anterior </A>

Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca (véase la sección anterior), y completar el enlace con la referencia a esa marca.

Lo veremos con el siguiente ejemplo: Quiero poner un enlace desde aquí al capítulo 4, pero a un sitio concreto, donde he puesto la marca <A NAME="alinear"></A>. Entonces la etiqueta tiene que ser: <A HREF="cap4.html#alinear"> Capitulo 4 </A>

Una observación importante: Estoy suponiendo que la página en la que estoy escribiendo esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/pag2.html".

Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../pag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsérvese que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro , que es propio únicamente de Windows.

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras modificaciones.

3. Enlaces con una página fuera de nuestro sistema

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc.

Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sería:

<A HREF="http://home.netscape.com/"> Página inicial de Netscape </A>

Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores UNIX sí las distinguen)

4. Enlaces con una dirección de email

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de email. La estructura de la etiqueta es:

<A HREF="mailto: dirección de email"> Texto del enlace </A>

Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:

Comentarios a <A HREF="mailto: webmaster@colombus.cu">Colombus/WEB</A>

Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo verían de esta manera:

Comentarios a Colombus/WEB

y no tendrían ningún medio de conocer la dirección de email. Por lo tanto, es más seguro poner algo así como: Comentarios a Colombus/WEB en <A HREF="mailto: webmaster@colombus.cu"> webmaster@colombus.cu </A> Que resulta:

Es decir, es conveniente, por la razón dicha anteriormente, poner también en el texto del enlace la dirección de email.

Listas

A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos:

1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. Listas de definición.

Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

<UL>
<LI> Una cosa
<LI> Otra cosa
<LI> Otra más
<LI> Etc.
</UL>

Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). El resultado de lo anterior es el siguiente:

• Una cosa
• Otra cosa
• Otra más
• Etc.

Se puede anidar una lista dentro de otra. Por ejemplo:

<UL>
<LI> Mamíferos
<LI> Peces
  <UL>
  <LI> Sardina
  <LI> Bacalao
  </UL>
<LI> Aves
</UL>

Que daría el siguiente resultado:

• Mamíferos
• Peces
  • Sardina
  • Bacalao
• Aves

Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa.

<OL>
<LI> Primera cosa
<LI> Segunda cosa
<LI> Tercera cosa
<LI> Etc.
</OL>

El resultado es:

1. Primera cosa
2. Segunda cosa
3. Tercera cosa
4. Etc.

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.

El tercer tipo lo forman las listas de definición. Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).

<DL>
<DT> Una cosa a definir
<DD> La definición de esta cosa
<DT> Otra cosa a definir
<DD> La definición de esta otra cosa
</DL>

Su resultado es:

Una cosa a definir

La definición de esta cosa

Otra cosa a definir

La definición de esta otra cosa

 A>