Curso de HTML – Crear enlaces (1)

por Álvaro Felipe, 26 Octubre 2008 9:03 AM

Crear un enlace desde un editor es bastante sencillo, basta seleccionar el elemento que servira de botón (texto o imagen por ejemplo), pulsar el botón enlace y escribir el destino al que dicho botón llevará.

Pero en este caso mostraré como insertar enlaces directamente desde el código html. Las utilidades son muchas:

Podrás crear enlaces desde textos planos (como en los comentarios de un blog donde no hay un editor con botones).
Podrás personalizar la manera en que se abrirá el enlace.
Podrás crear enlaces a “anclas” (secciones de la misma página web), lo que pocos editores añaden.
Podrás editar el código de los botones que añades a tu blog (por ejemplo, muchos botones abren el enlace en la misma página con lo que tu blog desaparece del navegador, así que tal vez quisieras que el enlace se abra en una nueva ventana).
Crear enlaces entre documentos de una misma carpeta. Y muchas utilidades más.

Comencemos:

La forma de añadir enlaces es (fíjate que se debe cerrar con la misma etiqueta del inicio pero con una barra:

[sourcecode language='html']

clic aquí

[/sourcecode]

Lo que generará esto (prueba a dar clic):
clic aquí

¿Por qué el enlace anterior no sirve si tiene la etiqueta de enlace?

La respuesta es sencilla y es que, aunque sí tiene la etiqueta de enlace, solo he escrito que existe un enlace pero no he escrito a donde quiero que me lleve ese enlace. La forma de hacerlo es agregando el argumento href, de la siguiente manera:

href=”destino”

Como quedaría en HTML:

[sourcecode language='html']
clic aquí
[/sourcecode]

Así queda en el navegador (prueba a dar clic):

clic aquí

¿Por qué este tampoco abre si ya se añadió el destino? Es simple, no se le ha añadido ningún destino, sino que he escrito la palabra destino, no una dirección web o un documento válido. Probemos con un sitio muy conocido: www.google.com

[sourcecode language='html']
clic aquí
[/sourcecode]

Así queda en el navegador (prueba a hacer clic):

clic aquí

¿por qué tampoco abre ahora si he escrito www.google.com que es una página conocida? Además si escribes www.google.com en tu navegador sí abre la página, entonces, ¿qué hice mal?

Facil, los navegadores están diseñados para añadir automáticamente el protocolo http:// (memorizalo, debe estar tan claro en tu cabeza como el uno más uno, recuerda http://), pero cuando escribimos HTML el código debe ser exacto.

Si ya entendiste la idea, el código correcto para crear el enlace debe ser:

[sourcecode language='html']
clic aquí
[/sourcecode]

El resultado es el siguiente:

clic aquí

Como ves, al hacer clic el enlace funciona. Repasemos:

El elemento que funcionará como botón debe estar encerrado entre las etiqueas <a> </a>
Dentro de la etiqueta de apertura se añade el destino del enlace:
1. Se deja un espacio después de la “a” y se escrie href= (debe quedar <a href=>
2. después del signo igual se escribe el destino, siempre encerrado entre comillas (debe quedar <a href=”destino”>
Recuerda que si el destino es una página web, debes escribir el protocolo http:// antes de la dirección. Entonces la etiqueta de apertura debe quedar así: <a href=”http://www.google.com”>
La etiqueta de cierre siempre será </a>

Juguemos un rato, voy a crear una lista de enlaces a sitios conocidos:

[sourcecode language='html']
Google
Yahoo
Wikipedia
Álvaro Felipe
Wordpress
[/sourcecode]

El resultado es:

Google
Yahoo
Wikipedia
Álvaro Felipe
Wordpress

Es todo por hoy, en el próximo artículo explicaré cómo personalizar los enlaces y algunos truquillos más.

Álvaro Felipe