Comunidad de diseño web y desarrollo en internet online

Enlaces

Hablar es fácil. Enséñame el código.
Lista de correo del kernel de Linux Linus Torvalds, ingeniero de software

Ya sabemos las etiquetas necesarias para escribir texto. Ahora toca aprender a usar una de las características más importantes de la web: los enlaces (o links). Se implementan con la etiqueta <a>.

Enlace a una página externa

Si queremos enlazar a una página o archivo que está en otro servidor (normalmente webs que no son nuestras), usamos <a> de esta forma:

<a href="http://www.algo.com" title="Descripción">Texto del enlace</a>

El atributo href contiene la URL a la que queremos enlazar. Es muy importante que no se nos olvide el protocolo1 (en este caso http://) o no funcionará.

1. http:// es el protocolo para la web, ftp:// para los FTP, etc.

En title escribimos una descripción de la página que enlazamos. Al igual que con <acronym> y <abbr>, en la mayoría de navegadores este título aparecerá al pasar el ratón por encima del link. No hay que confundir el título con el texto del enlace. Son completamente independientes.

Imagina que quieres enlazar a Barrapunto2:

2. Blog colectivo geek, similar a Slashdot. Ya no es lo que era, pero sigue usando Debian.

<a href="http://www.barrapunto.com" title="La información que te interesa">Barrapunto</a>

Enlace a una página local

Para enlazar a una página que esté en nuestro servidor, necesitamos saber la ruta (path) desde donde estemos hasta la ubicación del archivo.

Si el origen (página donde está el link) está en el mismo directorio que el destino (página a la que apunta el link), entonces sólo tenemos que escribir su nombre:

<a href="profile.html" title="Información sobre mí">Ficha personal</a>

Si el destino estuviera en un subdirectorio, utilizaríamos una barra / para indicar el camino3:

3. ¡Atención usuarios del Maligno! En Windows se utilizan las barras invertidas \ para separar los directorios. En el resto del universo, se utilizan las barras normales.

<a href="galeria/color.html" title="Galería color">Ver dibujos a color</a>

Si el destino estuviera un directorio por encima, pondríamos dos puntitos y una barra ../ de esta manera:

<a href="../index.html" title="Página principal">Volver al inicio</a>

Enlace a una dirección de e-mail

Podemos crear un enlace que, al pulsar sobre él, se abra automáticamente una ventana del cliente de correo que tenga el usuario4 para que escriba un mensaje a esa dirección.

4. Normalmente el infame Outlook. Usa Thunderbird, que es mejor y libre.

Para ello, sólo tenemos que usar mailto: en el atributo href, seguido de una dirección de correo electrónico:

<a href="mailto:[email protected]" title="E-mail de la Princesa Leia">Leia</a>

Anclas

Las anclas nos permiten enlazar a una posición concreta de la página, en plan teletransporte. Funcionan así:

Primero creamos el ancla en el sitio al que queremos enlazar después. Para esto, usamos el atributo id (podemos ponerlo prácticamente en cualquier etiqueta). Por ejemplo, así:

<h3 id="comentarios">Lista de comentarios</h3>

Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la ID de antes precedida de una almohadilla #:

<a href="#comentarios" title="Lista de comentarios">Leer comentarios</a>

También podemos enlazar a un ancla que esté en otra página:

<a href="post005.html#comentarios" title="Lista de comentarios ">Comentarios del post no 5</a>

¡Así de fácil! Hay otro modo de crear anclas, y es usando el atributo name de una etiqueta a sin atributo href y sin texto para el enlace; pero esta manera es obsoleta. De todos modos, revisando códigos de otras páginas te las puedes encontrar, así que no está de más conocer cómo se hace. Tienen este aspecto (y ojo, ¡son invisibles!):

<a name="comentarios" />

Y ya está todo lo que hay que saber sobre anclas. Son útiles para páginas muy largas, como las FAQ’s5: tienen un índice de preguntas que enlazan al ancla de la respuesta correspondiente. Así, si hacemos clic en la pregunta número 3, nos enlazará a ese punto concreto de la página. Normalmente las respuestas tienen otro enlace que nos devuelve a un ancla situada en el índice de preguntas, para facilitar la navegación.

5. FAQ significa Frequently Asked Questions y es una recopilación de las preguntas más frecuentes sobre un tema, contestadas. Está muy mal no leerse las FAQ’s y luego preguntar sobre cosas que ya están respondidas, así que ya sabes qué hacer si no quieres que Matrix te castigue.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.