Enlaces en HTML
La propiedad más importante de Internet, es la posibilidad de conectarse los unos con los otros.
http://www.comocreartuweb.com/ejemplo-con-divs/la-plantilla/estilos-para-enlaces.html
http://www.comocreartuweb.com/ejemplo-con-divs/la-plantilla/estilos-para-enlaces.html
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
La etiqueta <a> tiene como cierre </a>.
Sintaxis
<a atributo="valor">Texto del enlace</a>
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
...texto antes del destino de vínculo...
<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.<a name="destino-uno">Capítulo 1</a> <!-- Definimos un destino en el Capítulo 1 -->
...texto después del destino de vínculo...
<a href="http://www.misitio.com/uno.html#destino-uno">Ir al Capítulo 1</a>
O en caso que el enlace esté definido en el mismo documento:
<a href="/#destino-uno">Ir al Capítulo 1</a>
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: alguien@gmail.com">Mandar email</a> </body> |
|
Resultado
Mandar email
|
|
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
id, class, title, style, dir, lang, tabindex, accesskey
Si desea una descripción completa, diríjase a: atributos estándard.Eventos intrínsecos
onfocus, onblur, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup
Si desea una descripción completa, diríjase a: eventos intrínsecos.http://www.virtualnauta.com/html-enlaces
