Enlaces en HTML
La propiedad más importante de Internet, es la posibilidad de conectarse los unos con los otros.
Los Enlaces o Links
Los enlaces o links(en Inglés) nos permiten conectarnos con otros documentos:
- una imagen
- un video
- un archivo de sonido
- sitios en la web(otra página web)
- mandar un email
Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor(ancla).
La etiqueta <a> tiene como cierre </a>.
Sintaxis
Ejemplo |
|
Vamos a crear un enlace hacia la home de Virtualnauta.com |
|
|
Código
<body><a href="/http://www.virtualnauta.com/">La home de Virtualnauta</a> </body> |
|
|
Resultado
La home de Virtualnauta
|
|
EL atributo target
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.
Ejemplo |
|
Vamos a abrir el documento en una nueva página del navegador. |
|
|
Código
<body><a href="http://www.vitualnauta.com/" target="_blank">La home de Virtualnauta</a> </body> |
|
|
Resultado
La home de Virtualnauta
|
|
EL atributo name
Este atributo se usa para definir una determinada ubicación dentro de la página.
Supongamos que definimos un destino de vínculo llamado "destino-uno" en el archivo "uno.html".
Sintaxis
<a name="destino-uno">Capítulo 1</a> <!-- Definimos un destino en el Capítulo 1 -->
...texto después del destino de vínculo...
Y en otra parte de la página, del mismo sitio o de otro sitio, creamos un enlace a Capítulo 1. Para ello utilizamos el signo # seguido del nombre del enlace.
O en caso que el enlace esté definido en el mismo documento:
Creando un enlace a un email
Se utiliza en caso que queramos que un enlace mande un email.
En el momento que presionamos dicho link se abrirá automaticamente el programa de email que tenemos definido por defecto.
Ejemplo |
|
|
Código
<body><a href="/mailto: Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. ">Mandar email</a> </body> |
|
|
Resultado
Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
|
|
mailto: nos indica la dirección email a la que va dirigida, en este ejemplo: Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. .
Un enlace a partir de una imagen
Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.
Ejemplo |
|
|
Código
<body><a href="http://www.google.com/"><img src="/../graficos/google.gif"></a> </body> |
|
|
Resultado
|
|
Etiquetas y atributos de los enlaces
| Etiquetas | Atributos | Valor | Descripción | Ej. |
|---|---|---|---|---|
| <a> | Define un vínculo | |||
| href | URL | Dirección URL a conectar. |  |
|
| hreflang | código de lenguaje | Especifica el lenguaje de la URL. | |
|
| name | nombre de sección | Para crear un marcapáginas dentro de un documento. | |
|
| rel | alternate | Especifica la relación entre el documento actual y el destino del vínculo. | ||
| designates | ||||
| stylesheet | ||||
| start | ||||
| next | |
|||
| prev | |
|||
| contents | ||||
| index | ||||
| glossary | ||||
| copyright | ||||
| chapter | ||||
| section | ||||
| subsection | ||||
| apendix | ||||
| help | ||||
| bookmark | ||||
| nofollow | |
|||
| rev | alternate | Especifica la relación entre el destino del vínculo y el documento actual(vínculo inverso). | ||
| designates | ||||
| stylesheet | ||||
| start | ||||
| next | ||||
| prev | ||||
| contents | ||||
| index | ||||
| glossary | ||||
| copyright | ||||
| chapter | ||||
| section | ||||
| subsection | ||||
| apendix | ||||
| help | ||||
| bookmark | ||||
| coords | coordenadas | Especifica las coordenadas de la superficie que contiene el enlace. | ||
| shape | Define la forma del área. | |||
| rect | Usamos coords="izquierda, arriba, derecha, abajo" | |||
| rectangle | ||||
| circ | Usamos coords="centro x, centro y, radio" | |||
| circle | ||||
| poly | Usamos coords="x1, y1, x2, y2, .., xn, yn" | |||
| polygon | ||||
| target | Indica donde abrir el URL. | |||
| _blank | El URL se abrirá en una nueva ventana. | |
||
| _parent | El URL se abrirá en el frameset padre. | |
||
| _self | El URL se abrirá en el mismo frame donde fue apretado. | |
||
| _top | El URL se abriró en una ventana de tamaño completo. | |
||
| type | tipo de contenido | Especifica el tipo de contenido a conectar. |
Atributos estándard
Si desea una descripción completa, diríjase a: atributos estándard.
Eventos intrínsecos
Si desea una descripción completa, diríjase a: eventos intrínsecos.
<<< Caracteres especiales en HTML Los frames en HTML >>>