Imágenes · Programa con Martin

Añade fotos e imágenes a tu sitio web – y aprende a mantenerlas bien organizadas en una carpeta.

Te lo muestro: la etiqueta de imagen

Una imagen se añade con la etiqueta <img>:

<img src="images/school.jpg" alt="Our school building">

Dos cosas que merece la pena explicar:

src (source) indica dónde está la imagen. Aquí: en la carpeta images, el archivo school.jpg.
alt (alternative) es una descripción en texto de la imagen. Aparece si la imagen no carga, y los lectores de pantalla la leen en voz alta para personas ciegas. Rellénalo siempre – es educado y es la práctica habitual de los profesionales.

Fíjate en una cosa más: <img> no tiene etiqueta de cierre. No «envuelve» nada, simplemente se inserta – algunas etiquetas funcionan así.

💡

¿De dónde sacas imágenes? Tus propias fotos (pide a un adulto que te las envíe al ordenador), tus propios dibujos escaneados o fotografiados – o imágenes gratuitas de un sitio como pixabay.com. No cojas imágenes de Google a lo loco – la mayoría pertenecen a alguien y no se pueden usar sin permiso.

Mantén el orden: una carpeta para las imágenes

En VS Code, dentro de tu carpeta my-website, crea una carpeta nueva y llámala images (el icono de carpeta con un signo más arriba a la izquierda).
Copia 2–3 imágenes dentro. Incluso puedes arrastrarlas directamente a VS Code.
Renómbralas de forma sencilla: letras minúsculas, sin acentos, sin espacios. Algo como school.jpg, field.jpg, trip-mountains.jpg. Te ahorrará muchos dolores de cabeza.

Ahora tú 💪

Añade al menos dos imágenes a tu página que encajen con el contenido (quizá una justo debajo del título principal y otra en un capítulo).

🏫 Sitio web del colegio – solución

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Sitio web personal – solución

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Diario de viajes – solución

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Sitio web del club – solución

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

¿No se ve la imagen? Comprueba: 1) el nombre en tu código coincide exactamente con el nombre del archivo (¡incluso mayúsculas y minúsculas!), 2) la imagen está de verdad en la carpeta images, 3) no te olvidaste de guardar y actualizar la página. Encuentra más ayuda en el capítulo Cuando algo no funciona.

✅

Compruébalo tú: Puedes ver tus imágenes en la página. Puede que sean demasiado grandes o se vean raras – no pasa nada, arreglaremos el tamaño cuando lleguemos al CSS.

Lo que te llevas de esta lección

La etiqueta <img src="..." alt="..."> inserta una imagen – no tiene etiqueta de cierre.
alt describe la imagen con palabras. Rellénalo siempre.
Guarda las imágenes en una carpeta images, con nombres sencillos: minúsculas, sin espacios ni acentos.