Estás en: HTML» Índice Tutorial » Lección 12: Enlaces
Tutorial de HTML	Lección anterior » Lección Siguiente

12.- Enlaces

Un enlace o link es una referencia a un documento HTML, o a cualquier otro recurso Web. Para ello, se utiliza la etiqueta <a></a> . Podemos utilizar de enlace cualquier texto o imagen que se encuentre dentro de los límites de esta etiqueta. Por defecto, el enlace aparecerá subrayado y la imagen tendrá un borde rodeándola. (Para modificar estos valores, consulta nuestro apartado de trucos sobre enlaces)

La dirección del documento al que queremos acceder cuando pulsemos nuestro enlace o link se indica mediante el parámetro href. (Consulta nuestro tutorial para solucionar cualquier duda sobre la indicación de las rutas)

Ejemplo de enlace de texto:

Ejemplo de enlace por medio de una imagen:

En el editor de textos	En el navegador
<a href = "http://www.distritoweb.net/" > <img src = "logo.jpg" ></a>

Si deseamos que el documento se abra en una página nueva, deberemos añadir el atributo target="blank" a la etiqueta <a>

Ejemplo:

<a href = "http://www.DistritoWeb.net/" target="blank" >DistritoWeb</a>

Los enlaces también pueden hacer referencia a páginas de nuestra propia página web. Para ello indicaremos la ruta a la carpeta correspondiente donde tengamos guardado el documento en cuestión.

Ejemplo:

<a href="documentos/introduccion.html">Introducción</a>

Cómo enlazar a un punto concreto de la misma página

En muchas ocasiones nuestras páginas son muy largas y queremos llegar a las diferentes secciones que la forman de una manera rápida. Para conseguirlo, utilizaremos el parámetro name según explicamos a continuación:

Imaginemos que nuestra página tiene tres epígrafes, con gran cantidad de texto cada uno. En el inicio de nuestra página podemos poner un pequeño índice, de modo que al pulsar sobre estos enlaces lleguemos al epígrafe correspondiente rápidamente:

Epígrafe 1                     Epígrafe 2                     Epígrafe 3                    

Para ello, lo primero que debemos hacer es identificar de alguna manera esos puntos concretos del documento a los que queremos acceder. Es algo tan sencillo como ponerles un nombre. Así, el navegador localizará el punto donde queremos ir exactamente. Escribiremos al inicio de cada uno de esos largos epígrafes lo siguiente:

<a name="epígrafe1"></a>

<a name="epígrafe2"></a>

o cualquier nombre que nos parezca bien para identificarlos.

Ahora sólo queda volver a nuestro índice en la cabecera del documento y establecer los vínculos que nos llevarán a esas diferentes partes del mismo que acabamos de identificar.

<a href="#epigrafe1">Epígrafe 1</a>

(No olvidar la #)

Resumiendo:

1º-Identificar los puntos concretos del documento a los que queremos ir, utilizando la etiqueta <a name="nombre cualquiera"></a>

2º-Crear el enlace a dichos puntos con la etiqueta <a href="#ruta"></a>

Para ver un ejemplo práctico de esta función, el capítulo "listas" de este tutorial, cuenta con este sistema de enlaces. Ir al capítulo Listas.

Para enlazar a un punto concreto de otra página sigue las instrucciones que indicamos en el truco enlaces a un punto otra página