HIPERENLACES
Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a
otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario
se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra
parte pero dentro del mismo archivo en el que está, dentro de la misma url.
Esta explicación la entenderás más fácilmente cuando te presentemos los
tipos de enlaces que hay y veas sus características. Así pues, vamos a ello:
La etiqueta <a>
Es dentro de esta etiqueta y de su cierre (</a>) dónde
encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una
imagen, estará considerado como un enlace y el navegador lo interpretará así.
Atributo href
Para que un enlace esté activo debemos indicar dentro de él el destino
del mismo. Para establecer este destino le colocamos a la etiqueta <a>
este atributo. La etiqueta completa nos quedaría así:
<a href=“enlace”>Pincha aquí para ir al destino del
enlace</a>
Las urls pueden tener dos tipos de rutas o direcciones: Las urls con
dirección relativa y las urls con dirección absoluta. Vamos a explicarlas a
continuación:
Direcciones absolutas y relativas:
Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente:
<a href="http://html.hazunaweb.com/112.php">Artículo de
enlaces html</a>
Si pincháramos en el enlace iríamos directamente al artículo de mapas de
imágenes del tutorial. Fijaros en lo que hablábamos: podemos apreciar todas
las partes de la url.
En las direcciones relativas vemos que no está la url
completa. En este tipo de direcciones, las partes que faltan de la dirección
el navegador las genera de la propia página en la que está el enlace. Por
ejemplo, si dentro de la página http://html.hazunaweb.com/112.php
encontráramos la siguiente url...
<a href="111.php">Artículo de enlaces html</a>
…el navegador entiende que dentro de la página y de la carpeta en la que
se encuntra, debe dirigirse al fichero “111.php”.
Protocolos
Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros
os vamos a presentar los dos más importantes:
Mailto
La url mailto es aquella que te lleva directamente a una dirección de
correo y, más concretamente, a redactar un mensaje. Una dirección mailto
sería la siguiente:
<a
href=“mailto:correodeejemplo@correodeejemplo.com>correodeejemplo@correodeejemplo.com</a>
Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para
albergar el enlace, hemos puesto la misma dirección que la que va a abrir la
url. ¿Por qué?
El programa de correo que abre el navegador es aquel que el usuario tenga
como predefinido. Nosotros te aconsejamos que como texto para albergar el
enlace pongas la dirección de correo electrónico. Windows por defecto tiene
predeterminado el Outlook y al pinchar en el enlace lo abre directamente.
Muchos usuarios prefieren copiar la dirección y pegarla en su programa de
correo.
La etiqueta target:
La etiqueta sirve para definir la forma en la que se accederá a la nueva
url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede
ser de diferentes tipos:
Anclas
Un ancla nos sirve para dirigir al usuario a otra parte distinta pero
dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear
primero el lugar al que queremos acceder. Debemos escribir lo siguiente:
<a name=“ancla”>
Y después debemos escribir un enlace con el código siguiente:
<a href= “#ancla”>Enlace para acceder al ancla</a>
Yo he situado un ancla justo al principio de este artículo. Si pinchas en
el siguiente enlace acudirás a ella y verás el efecto.
Y para terminar te mostraremos como podemos hacer que un enlace nos
diriga directamente a una imagen. Le hemos indicado al enlace que nos abra la
imagen en una ventana diferente gracias al target:blank. El código es el
siguiente:
Y el resultado le verás pinchando en aquí: Ir a ver el
ejemplo de prueba
Y terminamos con otro tipo de enlace. Esta vez el enlace está en la
imagen. Si pinchas en ella, irás al artículo dónde vimos por primera vez esa
fotografía. Primero te mostramos el código:
Y aquí tienes la imagen con el enlace. Se abrirá en una ventana nueva
gracias al target blank.
|
No hay comentarios:
Publicar un comentario