Lección 3: Hipervínculos

Cuando queramos que los visitantes puedan navegar de manera sencilla entre las páginas necesitaremos usar hipervinculos o enlaces. Hablamos de un mecanismo que nos dan el poder de intercambiar la página que estamos visualizando o movernos con rapidez a un apartado a otro. E incluso ir a lugares externos que no nos pertenecen.

Etiqueta	`<a>`
Descripción	Enlace para navegar entre secciones, páginas o recursos.
Atributos	`href="ruta"` Destino o ruta a seguir. `target="_blank"` Abre destino en una nueva pestaña. `download` Descarga el recurso.
Tipo	Línea

Un ejemplo de su estructura.

<a href="https://www.gnu.org/software/emacs/">Editor de texto</a>

El texto del hipervinculo se mostrará de color azul con un subrayado, que al ser pulsado abrirá la página descrita en el atributo href. En el navegador se nos mostrará, por defecto, de color azul con un subrayado.

Enlace simple en HTML

Entre otras páginas

Si toda nuestra web esta en una sola página se volverá terriblemente aburrida, además de contener un scroll capaz de ahuyentar a los más pacientes. Por ello se divide en diferentes páginas que el visitante cambia a placer.

Pongamos el caso que tengo 2 fichero, uno se denominará niño.html y el otro colegio.html. Y ya que estamos, añadamos otra ficción: el niño quiere ir al colegio.

Navegar

Para ello colocaré en el primer HTML (niño.html) en el siguiente enlace.

<a href="colegio.html">Ir al colegio</a>

Al ser pulsado entrará en el colegio.

Otro caso, el niño quiere ir a la clase pero la clase esta dentro del colegio. Mi objetivo esta dentro de una carpeta, como puede ser colegio y el archivo interno es clase.html.

Carpeta

En niño.html, que esta a la misma altura que colegio, podríamos enlazarlo con el siguiente hipervinculo.

<a href="colegio/clase.html">Ir a la clase</a>

¿Y si quisiera ir desde clase.html hasta niño.html? Para retroceder siempre usaríamos ...

Volver atras

<a href="../niño.html">Ir a la clase</a>

Sitios externos

Si queremos ir una página fuera de nuestro sitio debemos dar la ruta completa con el dominio.

<a href="https://es.wikipedia.org/">Inicio de Wikipedia</a>

<a href="https://es.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a>

Un truco para abrir el sitio en una nueva pestaña es usar el target="_blank".

<a href="https://es.wikipedia.org/wiki/World_Wide_Web" target="_blank">World Wide Web</a>

Ideal si no queremos perder a nuestro visitante.

Dentro de la página

Se puede llegar a maquetar una página excesivamente larga, con demasiado scroll, siendo necesario crear atajos para moverse con rapidez y puntería. Esas herramientas son denominados anclas o enlaces internos.

Para hacer un ancla necesitas 2 partes: el enlace y el objetivo a donde nos desplazaremos. Un ejemplo de enlace:

<a href="#experiencia">Ver mi experiencia</a>

Dentro del atributo href colocaremos una # seguido de un alias que nosotros queramos (sin espacios ni acentos). A continuación nos situaremos donde queramos que ese enlace interno se dirija. Creamos nuestro marcador.

<p id="experiencia">Todo mi texto...</p>

Debe disponer del atributo id y en su interior el alias que nos hemos inventado.

Todo unido quedaría de la siguiente forma.

<a href="#experiencia">Ver mi experiencia</a>
<!-- Mucho mucho texto -->
<p id="experiencia">Todo mi texto...</p>

Para conseguir un suavizado en el movimiento puedes utilizar el CSS scroll-behavior: smooth; en la etiqueta html.

Recursos

No solo del HTML viven las páginas web. Es posible enlazar documentos en formatos que no sean propios del ecosistema, como los PDFs.

<a href="informe-maligno.pdf">Pulsa aquí para conquistar el mundo</a>

… o ZIP, DOC, PSD, MP3, JPG, etc. Dependiendo del navegador algunos serán reproducibles y otros no. Cualquier archivo que reconozca el navegador lo dibujará, a no ser que usemos el atributo download, el resto será descargado.

Por otro lado podemos enlazar funcionalidades del propio sistema operativo. ¿Funcionalidades? Sí, la capacidad de llamar por teléfono, o enviar un e-mail… y muchas otras.

Un pequeño ejemplo.

<a href="tel:34666777888">Llámame y te informo</a>

Código	Descripción	Ejemplo
tel	Llama por teléfono.	`<a href="tel:34666777888">Llámame y te informo</a>`
mailto	Abre el cliente de correo.	`<a href="mailto:guardianes@galaxia.com">¿Necesitas ayuda?</a>`
geo	Abre el software de Mapas o GPS (Windows, Linux y Android).	`<a href="geo:39.4597563,-0.3737169">Estamos aquí</a>`
geo	Abre el software de Mapas o GPS (MacOS y iOS).	`<a href="maps:39.4597563,-0.3737169">Estamos aquí</a>`
skype	Llama por medio de Skype.	`<a href="skype:starlord">Puedo recomendarte buena música</a>`
https://wa.me/`<telefono>`	Envia mensajes por WhatsApp. Más información.	`<a href="https://wa.me/34666777888">Vamos a chatear</a>`

No son las únicas, pero si las más importantes.

Actividad 1

Crea una página como la siguiente.

Actividad titulos

Actividad 2

Modifica la página anterior.

Añade otro hipervinculo que apunte a una nueva página menu-del-dia.html.
Crea la siguiente página menu-del-dia.html.
Los hipervinculos deben apuntar a unas imágenes que debes descargar de internet. (puedes usar un banco de imágenes gratuito como unsplash.