Imágenes y enlaces
Con imágenes y enlaces, una página deja de ser solo texto y se convierte en algo navegable: se puede mirar y se puede recorrer.
En este módulo vas a...
- Insertar una imagen y entender por qué el texto alternativo es obligatorio.
- Crear enlaces a otras páginas y a otros sitios web.
- Entender la diferencia entre abrir un enlace en la misma pestaña o en una nueva.
Insertar una imagen
La etiqueta <img> es especial y
distinta a las que hemos visto hasta ahora: no tiene contenido ni
etiqueta de cierre (no hay </img>), porque no
"envuelve" nada dentro, simplemente inserta una imagen en ese
punto, como pegar una foto en un álbum.
<img src="https://picsum.photos/300/180" alt="Persona dibujando en una tableta gráfica">| Atributo | ¿Para qué sirve? |
|---|---|
src | De source (fuente): la ruta o dirección de la imagen. |
alt | De alternative: un texto que describe la imagen. |
El alt se muestra si la imagen no carga, y sobre
todo, lo leen en voz alta los lectores de pantalla que usan las
personas ciegas o con baja visión. Descríbelo como si se lo
contaras a alguien por teléfono: "Persona dibujando en una
tableta gráfica", no "imagen1.jpg".
Rutas de archivo: absolutas y relativas
Una ruta es simplemente la forma de decirle al navegador "dónde está" el archivo de la imagen, igual que una dirección postal le dice al cartero dónde está tu casa. Hay dos tipos:
- Ruta absoluta: una dirección web completa, como
https://ejemplo.com/foto.jpg. Se usa para imágenes que están en otro sitio web, fuera de tu propio proyecto. - Ruta relativa: la posición del archivo respecto a tu propio archivo HTML, como
imagenes/foto.jpg(lo que significa "busca una carpeta llamadaimagenesal lado de este archivo HTML, y dentro, el archivofoto.jpg"). Se usa para tus propias imágenes, guardadas en tu misma carpeta de proyecto.
Para practicar usaremos sobre todo rutas absolutas a imágenes de
muestra (como picsum.photos), para no complicarnos
con carpetas de imágenes todavía. Si más adelante quieres usar
tus propias fotos, guárdalas dentro de tu carpeta de proyecto y
usa una ruta relativa.
Crear enlaces
La etiqueta <a> (de anchor,
ancla) convierte texto o una imagen en un enlace pulsable. El
destino se indica con el atributo href (de
hypertext reference, "referencia de hipertexto"; no hace
falta memorizar el porqué del nombre, solo para qué sirve: decir a
dónde lleva el enlace).
<a> y </a> es
lo que se ve y se puede pulsar (normalmente subrayado y de otro
color); el atributo href es el sitio exacto al que
apunta ese dedo.
<a href="https://www.domestika.org">Visita Domestika</a>
<a href="blog.html">Ir a nuestro blog</a>
Si quieres que el enlace se abra en una pestaña nueva (útil cuando
llevas a un sitio externo), añade target="_blank":
<a href="https://www.domestika.org" target="_blank">Visita Domestika</a>Practica: la tarjeta de un curso
Completa el código: añade una imagen con su alt, y
convierte el título en un enlace que lleve a
"detalle-curso.html".