Preguntas y respuestas sobre enlaces

¿Cómo se crea un enlace?

Usando la etiqueta <a> </a> (anchor) donde el atributo href indicará la dirección URL del documento al que que queremos enlazar.

<a href="http://vagabundia.blogspot.com/">ENLACE</a>

Todos estos son enlaces que apuntan a la misma dirección:

http://vagabundia.blogspot.com/

CLICK

¿Qué es una dirección URL?

Una URL (Uniform Resource Locator) es una dirección que permite acceder a un archivo o un archivo (html, php, gif, jpg, mp3, swf, etc). Es la cadena de caracteres que identifica cada recurso disponible en la web:

protocolo://máquina/directorio/archivo
http://vagabundia.blogspot.com/index.html

¿Se escriben con mayúsculas o minúsculas?

Con minúsculas aunque, dependiendo del sistema operativo, carece de importancia, Windows y Mac ignoran el tipo de letra pero algunos sistemas basados en Unix no.

¿Siempre comienzan con http://?

En Blogger SI aunque alguna dirección puede comenzar con ftp:// o con mailto:. De todas maneras, en Blogger siempre comienzan con el llamado protocolo porque no disponemos de directorios o carpetas internas

En otros servicios, por ejemplo si tenemos un hosting propio, podemos usar los llamados paths relativos.

<a href="archivo.gif">
<a href="/imagenes/archivo.gif">
<a href="../imagenes/archivo.gif">

¿Todas las direcciones deben terminar con una barra inclinada (slash)?

NO, esa barra sólo se coloca cuando no se enlazan documentos y colocarla erróneamente, hace que el navegador nos dirija a cualquier parte. Por ejemplo:

http://vagabundia.blogspot.com/index.html/ [enlace incorrecto]
http://vagabundia.blogspot.com/index.html [enlace correcto]

La barra final sólo la usamos si no indicamos un archivo y de esa manera dejamos que sea el sitio al que nos dirigimos el que resuelva las cosas:

http://www.unsitio.com/html/

En el caso de ser la dirección del servidor (hostname), si no la colocamos, el navegador la mostrará agregada en la barra de direcciones y, por lo general, nos llevará a la página índice o a la página de inicio.

http://vagabundia.blogspot.com

Aunque, es conveniente colocarla, simplemente para que nos acostumbremos a usar la sintaxis correcta:

http://vagabundia.blogspot.com/

¿Cómo sé si la URL es válida?

El error más común es que digamos "esto no funciona" porque la dirección del recurso que colocamos está equivocada. Si se trata de una página web, basta chequear lo que nosotros escribimos con la dirección que nos muestra el navegador.

Si se trata de otro tipo de archivos debemos hacer lo mismo, copiarla en la barra de direcciones del navegador y hacer que nos muestre el recurso. El resultado, dependerá mucho de que tipo de archivo se trata pero, habrá básicamente dos posibilidades, o nos lo muestra (una imagen, un SWF si tenemos los plugins) o se abre la ventana de descarga. Si lo que vemos es una página web, la dirección es errónea

¿Cómo abrir un enlace en una nueva pestaña?

Podemos hacer que se abra en una nueva ventana, que se abra en una nueva pestaña dependerá de la forma en que configuremos el navegador. Para eso, agregamos el atributo target:

<a href="http://vagabundia.blogspot.com/" target="_blank">ENLACE</a>

¿Podemos abrir ventanas con un tamaño específico?

SI, pero para eso debemos usar JavaScript:

<a 
href="#"
target="nombre"
onclick="window.open('URL_destino', 'nombre', 'width=600,height=400'); return false">
ENLACE
</a>

¿Puedo colocar un enlace para que se pueda descargar un archivo?

En Blogger hay que alojar ese archivo en algún servidor y luego colocar su dirección; no tenemos acceso a ninguna otra posibilidad:

<a href="URL_archivo">ENLACE</a>

¿Lo que vemos de un enlace siempre es un texto?

NO. Podemos usar un texto, una imagen o ambos:

<a href="URL_archivo"><img src="URL_imagen"/></a>

TODO lo que está entre la etiqueta de apertura <a ...> y la etiqueta de cierre </a> será el enlace (hipervínculo) y, por defecto, al colocar el mouse encima, veremos un puntero on la forma de una mano.

¿Y si la imagen es muy grande, puedo redimensionarla?

SI, eso es posible usando los atributos width y height o bien estableciendo un estilo con style:

<img width="ancho" height="alto" src="URL_imagen"/>
<img style="width:anchopx;height:altopx;" src="URL_imagen"/>

Pero que se vea pequeña no significa que "se cargará chica". Por ejemplo, si queremos mostrar wallpapers de 1024x768, aunque establezcamos que se muestren de un tamaño menor, el navegador cargará la imagen original y luego la redimensionará así que el tiempo de carga será incluso superior a si directamente los colocásemos de tamaño natural. En esos casos, conviene tener una segunda imagen ya redimensionada.

¿Entonces puede tener una miniatura y enlazar la imagen grande?

SI, eso sería lo razonable:

<a href="URL_imagenOriginal"><img src="URL_imagenMiniatura"/></a>

¿Puede quitarse el borde de las imágenes que uso de enlace?

Por defecto, tienen un borde azul (espantoso y antigüo). Puede quitarse de dos maneras, en una imagen individual estableciendo el atributo border:

<a href="URL_destino"><img src="URL_imagen" border="0" /></a>

Enlace con borde	Enlace sin borde

O bien estableciendo una regla genérica en el CSS de la plantilla o web. Por lo general, se coloca al inicio de las definiciones de estilo:

a img {text-decoration: none; border: 0; outline: none;}

¿Y el subrayado de los textos de los enlaces?

Del mismo modo. En uno en particular lo hacemos usando el atributo style:

<a href="URL_destino" style="text-decoration: none;">ENLACE</a>

O establecemos una regla genérica:

a, a:visited, a:link, a:active {text-decoration: none; outline: none;}
a:hover {text-decoration: none; outline: none;}

¿Y el color de de los enlaces?

Lo mismo que con el subrayado, eso lo controlamos con las propiedades CSS:

a, a:link {color: #color;} /* el color genérico */
a:visited {color: #color;} /* el color de los enlaces visitados */
a:active {color: #color;} /* el color del enlace activo */
a:hover {color: #color;} /* el color cuando colocamos el mouse encima */

¿Por qué veo una marca blanca al lado de las imágenes de los enlaces?

Esa rayita indica que hay un espacio en blanco o un salto de línea antes o después de la etiqueta IMG:

<a href="URL_destino">
<img src="URL_imagen"/>
</a>

Se soluciona colocando toda la etiqueta A en una sola línea:

<a href="URL_destino"><img src="URL_imagen"/></a>

¿Los enlaces sólo sirven para abrir páginas o recursos?

NO, también los usamos para ejecutar JavaScript.

<a href="javascript:void(0);" onclick="funcion();">ENLACE</a>

Un ejemplo sencillo

HOLA

¿Pueden usarse otras etiquetas para que funcionen como enlaces?

SI, por ejemplo, los botones de los formularios:

<form action="URL_destino" method="get">
<input value="UN ENLACE" type="submit">
</form>

¿Y cómo creo un enlace para enviar mails?

Usando el protocolo mailto:

<a href="mailto:vagabundia@gmail.com">vagabundia arroba gmail punto com</a>.