XHTML

 

Enlaces

Enlaces a una página externa

Para crear un enlace a una página web que esté en otro servidor, utilzamos la etiqueta <a>.

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

El atributo href contiene la URL a donde queremos enlazar. Es muy importante que no se nos olvide el http:// o no funcionará.

En title escribimos una descripción del sitio web al que enlazamos. Al igual que con las etiquetas <abbr> y <acronym>, el texto aparecererá al pasar el ratón por encima del enlace. No hay que confundir el título con el texto del enlace. Son completamente independientes.

Enlace a una página local

Para enlazar a una página que esté en nuestro servidor, necesitamos saber la ruta (path) desde donde estamos hasta la ubicación del archivo. Si el origen (página donde está el enlace) está en el mismo directorio que el destino (página a la que apunta el enlace), entonces sólo tenemos que escribir su
nombre:

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

Si el destino estuviera en un subdirectorio, utilizamos una barra / para indicar el camino:

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

Si el destino estuviera un directorio padre, se usan dos puntos y una barra ../ de esta manera:

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

Enlace a una dirección de correo

Podemos hacer un enlace que abra automáticamente el cliente de correo electrónico que tenga instalado el usuario: Outlook, por ejemplo, o Thunderbird.

Sólo tenemos que poner como valor del atributo href la palabra mailto: seguida de una direccón
de correo electrónico:

<a href="mailto:lol@visualco.com" title="E-mail de laurent Bié">Laurent Bié</a>

Anclas

Las anclas permiten crear enlaces en un mismo documento, a una posición concreta de la página. En el punto al que queremos saltar, insertamos un ancla y usamos el atributo id para identificar esta posción dentro del documento.

<a id="nuestra_ancla" />

Si ahora vemos la página en el navegador, no notaremos ninguna diferencia, puesto que las anclas son invisibles.

Para crear un enlace que nos lleve a esta parte del documento basta con con indicar la id del ancla al que queremos llegar:

<a href="#nuestra_ancla" title="descripción">Texto del enlace</a>

Observa que en la ruta del enlace hay que poner una almohadilla (#) delante del nombre del ancla. También podemos enlazar a un ancla que esté en otra página:

<a href="otra_pagina.html#ancla" title="descripción">Texto del enlace</a>

Ejercicio 1

Crea un documento XHTML con una lista de tu sitios web preferidos.

Ejercicio 2

Crea 3 documentos XHTML en 3 carpetas distintas y crea los enlaces necesarios para navegar entre ellas.

Ejercicio 3

Crea una documento XHTML con un 12 secciones de 2 párrafos cada una, y un sumario al principio del documento para enlazar con ellas.

Ejercicio 4

Crea una documento XHTML con una lista de personas y los enlaces de correo electrónico correspondientes.