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.
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.
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.
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 ...
<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 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.
Actividad 3
Añade un indice para ir a cada una de las escenas que sean anclas.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios