Los enlaces
Lo que caracteriza a la web como medio de comunicación es la navegación por medio de hipervínculos (links o enlaces). Esta conexión entre archivos permite al usuario elegir el sentido de la navegación.
En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es href=”” donde se escribe la ubicación del archivo de destino que puede estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o en otro sitio web.
Entre las etiquetas <a href=””></a> se puede colocar cualquier elemento html que funcionará como botón, generalmente se coloca un texto o una imagen. Si es un texto, el navegador por defecto lo muestra en color azul y subrayado. Si es una imagen, algunos navegadores especialmente las versiones anteriores a las actuales, le pueden agregar un borde azul.
Rutas de enlaces:
Se llama ruta al valor que se escribe dentro del atributo href=”” y se pueden clasificar en dos tipos:
Rutas absolutas:
Las rutas absolutas son las que definen la ubicación completa de un archivo en la web y empiezan desde http://nombredelsitio.com/archivo.html (el archivo de destino puede ser de cualquier extensión). Por ejemplo si queremos vincular nuestro sitio con Facebook, usaríamos una ruta absoluta y el código sería:
<a href="https://www.facebook.com/pagina">Estamos en Facebook</a>
Rutas relativas:
Como este enlace al inicio del sitio web
<a href=”/”>Inicio</a>
Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web.
Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a la ubicación del archivo que lo está llamando. Ejemplo: si el archivo index.html vincula con quien-soy.html y están en la misma carpeta, el código sería asi:
<a href="quien-soy.html">Quién soy</a>.
Tipos de enlaces
Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html
Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto.html el código sería así:<a href="contacto.html">Contáctenos</a>.El texto que queda encerrado entre las etiquetas <a> es lo que ve el usuario en color azul y subrayado.
Enlaces externos
Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro, tenemos que indicar la ruta absolutadel sitio escribiendo la url completa que conviene copiarla del navegador. En este caso, es común usar el atributo target=””que nos permite abrir el enlace en una pestaña nueva. Por ejemplo, si quisiera poner un vínculo a Google y que éste abra en pestaña nueva, sería así: <a href="http://google.com" target="_blank">Ir a Google</a>
Enlaces internos: anclas
Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios casos, por ejemplo en una página de preguntas frecuentes donde las respuestas están desarrolladas debajo de las preguntas, o en Wikipedia, cuando el texto es extenso el menú tiene vínculos con anclas. También en los textos largos, al finalizar muchas veces se coloca un botón para subir. En los sitios de una sola página donde los botones en realidad hacen scroll, esas son anclas.
El punto de destino tiene que estar marcado con el atributo id=”algo” y en el enlace se coloca un # (numeral) seguido del nombre. Por ejemplo:
<a href="#respuesta4">Pregunta 4</a>“salta” a este párrafo: <p id="respuesta4">acá está escrita la respuesta</p>
Enlaces para ampliar una imagen
Es común armar una galería de fotos con imágenes miniaturas que vinculan a imágenes ampliadas. Si combinamos este recurso con código javascript, logramos galerías de fotos muy atractivas. El código HTML es así:
<a href="imagenes/foto1-ampliada.jpg"><img src="imagenes/foto1-miniatura.jpg" alt="descripción de la foto"></a>
El navegador le muestra al usuario la foto miniatura y si cliquea en ella, le muestra la foto ampliada.
Enlaces para descargar archivos
En realidad, dentro del atributo href=”” podemos colocar la ruta hacia cualquier tipo de archivo. Si el navegador reconoce la extensión, lo abre por ejemplo: html, jpg, png, gif, svg, pdf, etc. Pero si no lo reconoce o es un archivo comprimido (.rar, .zip), el navegador le ofrece al usuario descargarlo. Ejemplo:
<a href="fotos.rar">Descargar todas las fotos</a>
Enlaces a una dirección de correo
Se puede vincular una dirección de correo para que abra en el programa de correo predeterminado. El código se escribe así:
<a href="mailto:info@dominio.com">Consúltenos a info@dominio.com</a>
Este recurso está bastante cuestionado por dos razones: primero porque muchos usuarios utilizan correo webmail (Gmail, Yahoo, Hotmail) por lo que este enlace no les sirve (incluso molesta) y segundo porque les estamos facilitando a los robots que encuentren nuestro correo y lo incluyan en una base de datos para spam.
