Enlaces o vínculos

ETIQUETA <a>

La etiqueta <a> (de 'anchor', ancla) nos permite establecer vínculos o enlaces dentro del propio documento o con otros documentos.

Un vínculo es un 'salto' dentro del mismo documento o a otro fichero al que pueda acceder el navegador, fichero que puede estar en el propio equipo o en cualquier sitio de Internet.

Enlaces internos

Con el atributo name podemos poner un enlace 'interno' en un documento:

<a name="nombre1">Capítulo 7</a>

En el navegador sólo se ve lo que hay entre la etiqueta de inicio y la de cierre:

Los enlaces 'internos' se suelen usar en documentos extensos para facilitar la localización de puntos de interés que, sin los enlaces, tendrían que buscarse desplazando la página manualmente arriba y abajo. Los nombres de los enlaces 'internos' no deben repetirse, si hay varios en un documento cada uno debe ser único, teniendo en cuenta que las letras minúsculas y mayúsculas se consideran iguales. El texto entre las etiquetas de inicio y cierre puede omitirse.

Y con el atributo href podemos poner un enlace que nos lleve al anterior:

<a href="#nombre1">Capítulo 7</a>

En el navegador sólo se ve lo que hay entre la etiqueta de inicio y la de cierre, pero de forma distinta:

Observemos que el nombre del enlace 'interno' lleva un signo "#" delante.
Y la presentación y el comportamiento del vínculo con href: Éste se muestra subrayado, por defecto de color azul, cuando ponemos sobre él la flecha del ratón ésta cambia a una mano que señala y aparece en la barra de estado del navegador la dirección completa de destino; si lo 'pinchamos' con el botón izquierdo del ratón, el documento se desplaza de forma que vemos al principio el sitio donde se puso el enlace 'interno', y el enlace 'pinchado' cambia a color púrpura.

Enlaces externos

Con el atributo href de la etiqueta <a> podemos poner en un documento enlaces a otros documentos.

Si el documento vinculado contiene enlaces internos, podemos dirigirnos a ellos directamente poniéndolos a continuación de su nombre de fichero.

ENLACES RELATIVOS

Si el documento vinculado está en el mismo 'disco' (partición o sistema de ficheros), se referencia con una dirección relativa al sitio donde está el documento enlazador.

EJEMPLO 3.1
Crear un fichero h31.htm con el siguiente contenido:


<font size="4">Ejemplo de enlaces (1)</font>


<a name="inicio"></a><br>


<a href="#final">Final</a><br>


Texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


Texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


<a href="dentro/h32.htm">Ejemplo (2)</a><br>


<a href="dentro/h32.htm#inicio">Ejemplo (2) -inicio-</a><br>


<a href="dentro/h32.htm#final">Ejemplo (2) -final-</a><br>


Mas<br>texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


Mas<br>texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


<a href="#inicio">Inicio</a><br>


<a name="final"></a>


Luego, en el mismo sitio donde esté el fichero h31.htm, crear una carpeta con el nombre "dentro" y en esta carpeta crear un fichero h32.htm con el siguiente contenido:


<font size="4">Ejemplo de enlaces (2)</font>


<a name="inicio"></a><br>


<a href="#final">Final</a><br>


Texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


Texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


<a href="../h31.htm">Ejemplo (1)</a><br>


<a href="../h31.htm#inicio">Ejemplo (1) -inicio-</a><br>


<a href="../h31.htm#final">Ejemplo (1) -final-</a><br>


Mas<br>texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


Mas<br>texto<br>cualquiera<br>que<br>se<br>quiera<br>poner<br>


<a href="#inicio">Inicio</a><br>


<a name="final"></a>


Después, cargar en el navegador el fichero h31.htm.

Podremos ver el comportamiento de los enlaces 'pinchándolos' con el botón izquierdo del ratón.

ENLACES ABSOLUTOS

Si el documento vinculado está en un servidor Web externo, se referencia con una dirección absoluta al documento en el sitio Web, indicando además al principio el protocolo utilizado por el servidor.

Ejemplos
Enlace a <a href="http://www.uses.es/index.php">USES</a>
Enlace a <a href="http://www.soios.com/logo 170.gif">SOIOS</a> (logo)

Como podemos ver no sólo se pueden enlazar documentos html, puede vincularse cualquier documento o fichero. Al 'pinchar' el enlace, si el navegador puede mostrar el fichero lo hará, y si no puede, nos debería pedir qué es lo que queremos hacer con él.