Etiqueta de Imagen (<img>) y Atributos (src, alt, title, width, height)

La etiqueta <img> se utiliza para insertar imágenes en una página web. Es una etiqueta de autocierre y requiere el atributo src para especificar la ruta de la imagen. Otros atributos importantes incluyen alt para texto alternativo, title para información adicional, y width y height para definir el tamaño.

html

Formatos de Imágenes (JPEG, PNG, GIF, SVG, etc.)

Cada formato de imagen tiene sus propias características:

• JPEG: Ideal para fotografías. Tiene compresión con pérdida, lo que reduce la calidad a medida que se comprime.
• PNG: Soporta transparencia y es sin pérdida, adecuado para gráficos con áreas transparentes.
• GIF: Permite animaciones, pero tiene una paleta de colores limitada.
• SVG: Es vectorial, lo que significa que se escala sin perder calidad. Perfecto para íconos y logotipos.

Ejemplos visuales de diferentes formatos de imágenes, mostrando sus características

Elementos de Audio y Video (<audio>, <video>)

HTML5 permite incorporar audio y video directamente en la página web mediante las etiquetas <audio> y <video>. Ambos elementos requieren el atributo src y pueden incluir otros atributos como controls para permitir al usuario reproducir, pausar o ajustar el volumen.

Ejemplo de Audio

html

Ejemplo de Video

html

Insertar Videos de Otras Plataformas

Podemos insertar videos de plataformas externas como YouTube utilizando la etiqueta <iframe>. Solo necesitamos la URL del video para que se muestre directamente en nuestra página.

html

Cierre del Capítulo

Ahora sabes cómo incluir imágenes, audio y video en tus páginas HTML, añadiendo una capa visual y multimedia a tu contenido. En el próximo capítulo, exploraremos cómo crear tablas para organizar datos de manera estructurada.