Los enlaces

Las páginas web son una aplicación de un tipo de documentos denominados documentos de hipertexto, es decir, documentos que contienen información directamente visible (como las páginas de un libro) y formas de acceder a otras fuentes de información, normalmente relacionada con el documento. Estas otras fuentes pueden ser una imagen, un video, un audio u otro documento.

Al hablar de enlaces web nos referimos a como construir estos accesos para llegar a otras fuentes de datos. Los enlaces o links son elementos interactivos de la página que al ser activados nos muestran contenido de otro lugar. Estos elementos suelen destacarse de alguna forma: color, subrayado, una imagenm un botón.

Estos enlaces pueden ser de varios tipos

Enlaces externos
Nos llevan a otra página web o nos muestra información en otro lugar de la red distinto a la página actual. Son los enlaces habituales en menus de navegación o en llamadas para ampliar un término o para mostrar imágenes
Enlaces internos o locales
Nos llevan a otra parte de la página web. Útiles para dar saltos dentro de la página sin necesidad de hacer scroll o desplazamientos con el ratón, o el dedo en caso de pantallas táctiles. Además del enlace se debe marcar el punto de destino del enlace.
Enlaces mixtos
Realmente son enlaces externos que nos llevan a una parte concreta dentro de otra página web. O sea, enlaces internos dentro de una página externa. En la página web de destino es necesario colocar una marca o señal para marcar el punto donde debe llevar el enlace.
 

Como crear los enlaces: <A></A>

La etiqueta <A href ></A> nos sirve para definir un enlace o link. Lo que esté encerrado en esta etiqueta será un elemento interactivo que puede ser activado por el usuario, normalmente con el ratón o con el dedo en el caso de pantallas táctiles. Habitualmente es mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato). La estructura de esta etiqueta es la que sigue:

<A HREF="dirección de destino" target="destino">Pulsar para ir a destino</A>

Vemos el atributo HREF que contendrá la dirección de destino que se describe mediante una URL, en formato absoluto o relativo o un punto de destino en la página o incluso un script. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. La frase Pulsar para ir a destino aparecería en la página en azul y subrayada, aunque mediante los estilos CSS este aspecto se puede modificar. En lugar del texto podría usarse una imagen o un botón.

El otro atributo es target, para indicarle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:

_blank
 
El navegador abre una nueva ventana o pestaña cuyo contenido es la página señalada por el enlace en href
 
_self
 
Muestra la nueva página en la misma ventana o pestaña donde está declarado el enlace. Este es el destino por defecto de cualquier enlace dentro de una página.
 

El atributo download se usa para decir al navegador que no debe mostrar el destino, sino que se trata de un archivo para descargar. A este atributo se le puede asignar un texto que sería el nombre con el que se descargará el archivo indicado en href.

.

Las marcas de enlaces internos

Al explicar que son los enlaces vimos un caso en el que el destino es un lugar dentro de una página, puede ser la misma dónde se encuentra el enlace u otra externa.

En HTML5 estos puntos de destino de enlace, antes llamados anclas, también se definen con la etiqueta <A></A> solo que no se escribe el atributo href. Para identificar ese punto de destino se puede usar el atributo id al que se le asigna el nombre que lo identificará (el atributo name está descartado en HTML-5)

Por ejemplo en una página llamada premios.htm queremos crear una marca para los premios Goya. El código de esta página será algo similar a:

<div> Los premios del año </div>
... ...
... ...
Los <a id="goya">Goya</a> de este año......
... .... ...

Hemos creado un punto de destino para un enlace a esta página. Si desde otra página enlazáramos a este punto el explorador mostrará la página desde esa linea (Los Goya)

< a href="premios.htm#goya>Los premios Goya</a>

Al acceder mediante este enlace veríamos la página desde la linea donde aparece el elemento <a id="goya">

Y si quiseramos enlazar a este punto desde dentro de la misma página (premios.htm):

< a href="#goya>Los premios Goya</a>