<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Imágenes y Figuras en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f1f5f9; }
    .galeria-contenedor { max-width: 520px; margin: 0 auto; }
    figure {
      background: white;
      margin: 0;
      padding: 15px;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      border: 1px solid #cbd5e1;
    }
    figure img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
    }
    figcaption {
      margin-top: 12px;
      font-size: 0.85rem;
      color: #64748b;
      text-align: center;
      border-top: 1px solid #f1f5f9;
      padding-top: 8px;
    }
  </style>
</head>
<body>

  <div class="galeria-contenedor">
    <figure>
      <!-- Usamos una imagen de muestra segura en línea -->
      <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=80" 
           alt="Laptop mostrando líneas de código en un editor moderno" 
           width="600" 
           height="400" 
           loading="lazy">
      <figcaption>
        <strong>Fotografía 1.1:</strong> Espacio de trabajo de un programador web en Kilopolis.
      </figcaption>
    </figure>
  </div>

</body>
</html>