Estiliza el Enlace HTML según su estado mas presentar lo enlazado

Enlaces HTML

Los enlaces se hallan en casi todas las paginas web. Los enlaces le permiten a los usuarios hacerse camino de una pagina a otra, a base de clicks.

Hiperenlaces

Los enlaces HTML son hiperenlaces.

Puedes hacer click sobre un enlace y pasar a otro documento.

Cuando mueves el puntero encima de un enlace, el puntero se convertirá en una mano pequeña.

Nota: un enlace no tiene por que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

Sintaxis

En HTML, los enlaces se definen con la etiqueta <a>:

<a href="url">texto del enlace</a>

Ejemplo:

<a href="http://www.ejemplo.com/html/">Visita nuestro tutorial de HTML</a>

El atributo href específica la dirección de destino (http://www.ejemplo.com/html/) del enlace.

El texto del enlace es la parte visible (Visita nuestro tutorial de HTML).

Hacer un clic encima del texto del enlace, te enviara a la dirección especificada.

Nota: sin un barra inclinada hacia adelante (/) colocada al final de una dirección que apunta a una subcarpeta (en el ejemplo, la carpeta llamada html), tu podrías generar dos peticiones al servidor (computador dedicado). Muchos servidores añadirán automáticamente una barra inclinada hacia delante a la dirección, y luego crearan una petición nueva.

---

Enlaces locales

El ejemplo de arriba usa una URL absoluta (una dirección web completa).

Un enlace local enlaza al mismo “sitio web” en donde se encuentra, y se especifica con una URL relativa (sin http://www. ...):

<a href="imagenes_html.asp">Hablemos de las imágenes en HTML</a>

---

Los colores HTML de los enlaces

Por defecto, un enlace se mostrara según lo siguiente, en todos los navegadores:

• Un enlace no visitado esta azul y subrayado
• Un enlace visitado esta purpura y subrayado
• Un enlace activado esta rojo y subrayado, hasta soltar el clic

Tú puedes cambiar la apariencia por defecto de estos, aplicando estilos:

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}

a:visited {color:pink; background-color:transparent; text-decoration:none}

a:hover   {color:red; background-color:transparent; text-decoration:underline}

a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

Expliquemos este ejemplo:

a:link

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia inicial.

a:visited

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia luego de ser visitado su enlace.

a:hover

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando el puntero esta encima.

a:active

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando se hace un clic encima o se mantiene presionado.

Todo esto con lenguaje CSS y dentro de un elemento HTML <style>.

---

El atributo target

El atributo target específica en donde se mostrara o abrirá el destino del enlace.

El atributo target puede tener uno de los siguientes valores:

• _blank – el documento enlazado se abre en una ventana o pestaña nueva
• _self – el documento enlazado se abre en la misma ventana/pestaña en donde el enlace fue cliqueado (esta viene por defecto)
• _parent – el documento enlazado se abre en el cuadro o división que contiene a esta otra
• _top – el documento enlazado se muestra o abre en la división o cuadro principal, que está en el tope de la jerarquía dentro de la ventana
• El nombrededivision – el documento enlazado se abre en una división o cuadro que cuenta con un nombre

Este ejemplo abrirá el documento enlazado en una nueva ventana/pestaña del navegador:

<a href="http://www.ejemplo.com/" target="_blank">Visita el sitio web Ejemplo y vuélvete uno!</a>

Consejo: si tu pagina está confinada dentro de un subdivisión, tu puedes usar target=”_top” para sacarla de cuales quiera subdivisiones que existan dentro de la ventana del navegador:

<a href="http://www.ejemplo.com/html/" target="_top">Ya creamos un tutorial de HTML5!</a>

PARTE 2, a continuación...