En este articulo veremos los distintos Tipos de enlaces en HTML. Esto te servirá si te preguntas ¿Cómo hacer un link hacia un sitio en HTML? ¿Cómo hacer un link hacia una página en HTML? ¿Cómo hacer un link dentro de la misma página en HTML? ¿Como poner un link en una palabra HTML? ¿Cómo enlazar una página en HTML?
| Tabla de contenidos |
| 1. Rutas de enlaces 1.1 Rutas absolutas 1.2 Rutas relativas 2. Tipos de enlaces en HTML 2.1 Enlaces internos entre archivos html 2.2 Enlaces externos |
¿Qué es el HTML y para qué sirve?
El HTML viene de HyperText Markup Language y es el lenguaje que se utiliza para crear páginas web.
El medio por el cual se van enlazando los distintos sitios y paginas de internet son los hipervínculos (links o enlaces). Esta conexión permite al usuario elegir el sentido de la navegación.
En el HTML los enlaces se marcan con la etiqueta 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 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.
Existen distintos Tipos de enlaces en HTML que puedes utilizar en tus paginas web.
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 https://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
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 en HTML
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 absoluta del 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="https://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">Descargá 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. Hay muchos usuarios que utilizan correo webmail y este enlace no les sirve. Por otro lado le estamos facilitando el trabajo a los robots para que encuentren nuestro correo y lo incluyan en una base de datos de spam.
Esperamos te haya sido util este articulo sobre Tipos de enlaces en HTML.
