Sobre enlaces o links (1): lo básico

Vamos a ver todo lo referido a los enlaces o links; cómo crear un enlace simple, una imagen que sirva de enlace, efectos (hover, visited,etc) y otros...Claro que veremos todo esto poco a poco.

Hoy hablaremos de algunas cosas simples pero muy básicas.

► Para crear un enlace (que podremos usar an algún menú, entrada o en la sidebar) deberemos de usar la etiqueta anchor ( <a> </a> ) y el atributo href; bueno dejándonos de tecnisismos, para crear un enlace deberemos de poner lo siguiente:

<a href="URL">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo: Diversas & Variadas

► Esa es la base, usaremos esta "estructura " cada vez que querramos agregar un enlace...¿Y qué pasa si queremos que en vez de texto sea una imagen la que nos sirva de enlace? Es otra pregunta frecuente que me hacen; parece que debería de haber algún "script especial", pero no es así.
Debemos usar la estructura anterior, pero sustituir el texto por una imagen de esta forma:

<a href="URL"><img src="URL-DE-LA-IMAGEN"></a>

Ejemplo:



► Y si queremos que el enlace se abra en una nueva página? Solo agregaremos a nuestra estructura base el atributo target, no importa si el enlace será con texto o con imagen, de la siguiente forma:

<a href="URL" target="_blank">EL-NOMBRE-DEL-ENLACE</a>

Ejemplos en texto e imagen:

Diversas & Variadas



► También, si queremos podemos usar texto e imagen al mismo tiempo en un enlace...Y ya deben de saber cómo hacerlo, pero de todas formas pongo como quedaría la estructura.

<a href="URL">EL-NOMBRE-DEL-ENLACE<img src="URL-DE-LA-IMAGEN"></a>

Diversas & Variadas

► Creo que éso sería todo por hoy, lo básico, hay todavía mucho que hablar sobre los enlaces y muchas formas de personalizarlos. Pero antes de irme, los dejo con la estructura de un enlace a correo electrónico:

<a href="mailto:aquitucorreo@electrónico">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo:

Contacto