HTML Imagenes

---

1. Sintaxis de la etiqueta <img>

La etiqueta <img> se utiliza para insertar imágenes en HTML. Es una etiqueta vacía (no tiene cierre).

Sintaxis básica:

<img src="ruta_de_la_imagen" alt="descripcion_de_la_imagen">

Atributos principales:

• src (source):
  Indica la ruta donde está la imagen (puede ser local o una URL).
  Ejemplo:
  src="imagenes/foto.jpg"
• alt (alternative text):
  Texto alternativo que se muestra si la imagen no carga o para accesibilidad (lectores de pantalla).
  Ejemplo:
  alt="Foto de una casa" 
• target indica donde se abrirá el recurso destino, para que sea en una nueva pestaña su valro debe ser _blank
  

---

2. Insertar imagen con width y height

Usando atributos HTML:

<img src="imagen.jpg" width="400" height="500" alt="Imagen de ejemplo">

pero es recomendable cambiar la imagen directamente desde un editor de imagenes

---

3. Formatos de imagen soportados por navegadores

• JPEG / JPG → Fotos
• PNG → Imágenes con transparencia
• GIF → Animaciones simples
• WebP → Mejor compresión (moderno)
• SVG → Gráficos vectoriales 

 

                                     Photo by Jackson Sophat on Unsplash 

---

4. Ejemplo de inserción de un GIF animado

<img src="animacion.gif" alt="Animación divertida">

---

5. Insertar imagen casa.jpg en carpeta imagenes

<img src="imagenes/casa.jpg" alt="Casa">

---

6. Insertar imagen desde internet

<img src="https://www.ejemplo.com/imagen.jpg" alt="Imagen desde internet">

 Ejercicios

Insertar todas las imagenes definidas en sus mockups en todas sus páginas web