FUNDAMENTOS FRONTEND

Multimedia en HTML

Imágenes, Favicons e Iframes

Enriquece tu web con multimedia. Aprende a insertar imágenes, optimizar con atributos alt, añadir favicons e incrustar iframes respetando accesibilidad y rendimiento.

1

Insertar Imágenes en HTML: etiqueta <img>

Las imágenes se insertan en HTML usando la etiqueta <img>. Es una etiqueta autocontenida (no tiene cierre) y se define completamente mediante atributos. El atributo obligatorio es src, que indica la ruta del archivo de imagen.

<!-- La etiqueta <img> se usa para mostrar una imagen en la página -->
<!-- Es una etiqueta autocontenida: no tiene etiqueta de cierre -->

<!-- src (source) indica la ruta del archivo de imagen -->
<!-- ./ significa: buscar el archivo en la MISMA carpeta que este HTML -->
<!-- Es una ruta relativa explícita (buena práctica para aprender) -->
<img src="./paisaje.jpg" />

<!-- También podemos cargar imágenes desde subcarpetas -->
<!-- ./assets/img/logo.png indica que la carpeta assets está al mismo nivel que el HTML -->
<img src="./assets/img/logo.png" />
2

Atributo alt: Accesibilidad y SEO

El atributo alt describe el contenido de la imagen. Es clave para accesibilidad, posicionamiento en buscadores y para mostrar texto alternativo si la imagen no carga correctamente.

<!-- Las imágenes son elementos inline por defecto -->
<!-- Esto significa que se comportan como texto -->
<!-- Si hay espacio, se muestran una al lado de la otra -->

<img src="icono-1.png" alt="Icono uno" />

<!-- Aunque estén en líneas separadas en el código -->
<!-- el navegador puede mostrarlas en la misma fila -->
<img src="icono-2.png" alt="Icono dos" />
Comparación entre imagen con y sin atributo alt
El atributo alt permite que lectores de pantalla y buscadores comprendan la imagen.
3

Las Imágenes como Elementos de Línea (inline)

Por defecto, las imágenes son elementos inline. Esto significa que se comportan como texto: se colocan una al lado de la otra si hay espacio disponible en la misma línea.

<!-- Dos imágenes colocadas una debajo de la otra en el código -->
<img src="icono-1.png" alt="Icono uno" />

<img src="icono-2.png" alt="Icono dos" />
Imágenes alineadas horizontalmente por comportamiento inline
Las imágenes se alinean horizontalmente porque son elementos de línea.
4

Formatos de Imagen para la Web

Cada formato de imagen tiene un uso recomendado. Elegir el formato correcto mejora el rendimiento, la calidad visual y la experiencia del usuario.

<!-- Imagen en formato WebP -->
<!-- WebP es moderno, liviano y optimizado para la web -->
<img src="foto-paisaje.webp" alt="Paisaje natural" />

<!-- Imagen SVG -->
<!-- SVG es vectorial: no pierde calidad al agrandarse -->
<!-- Ideal para logos e íconos -->
<img src="logo-empresa.svg" alt="Logo de la empresa" />

<!-- Imagen PNG -->
<!-- PNG permite transparencias -->
<!-- Ideal para imágenes recortadas -->
<img src="objeto-recortado.png" alt="Objeto con fondo transparente" />
Comparación de formatos JPG, PNG, SVG y WebP
Elegir el formato correcto mejora la velocidad y la calidad del sitio.
5

Favicon: Identidad Visual del Sitio

El favicon es el pequeño ícono que aparece en la pestaña del navegador. Se define en el <head> del documento usando la etiqueta <link> y ayuda a reforzar la identidad visual del sitio.

<head>

<!-- La etiqueta <link> se usa para enlazar recursos externos -->
<!-- rel="icon" indica que este archivo es el favicon del sitio -->
<!-- href define la ruta del archivo -->
<!-- type indica el tipo de imagen (opcional pero recomendado) -->
<link rel="icon" href="favicon.png" type="image/png">

<!-- Versión alternativa en formato ICO -->
<!-- Es compatible con navegadores antiguos -->
<link rel="icon" href="favicon.ico">

</head>
Ejemplo de favicon visible en la pestaña del navegador
El favicon ayuda a identificar visualmente un sitio entre varias pestañas abiertas.
6

Iframe: Incrustar Contenido Externo

La etiqueta <iframe> permite incrustar otro documento HTML dentro de tu página, como mapas, videos o widgets externos. A diferencia de las imágenes, el iframe NO usa texto alternativo interno. La accesibilidad se maneja con atributos como title y, opcionalmente, aria-label.

<!-- La etiqueta <iframe> incrusta otra página dentro del sitio -->
<!-- Se usa para mapas, videos, formularios y widgets externos -->

<iframe
  <!-- src indica la URL del contenido externo -->
  src="https://www.google.com/maps/embed?..."

  <!-- width define el ancho del iframe en píxeles -->
  width="600"

  <!-- height define la altura del iframe -->
  height="450"

  <!-- title describe el contenido del iframe -->
  <!-- Es obligatorio para accesibilidad -->
  title="Mapa de ubicación del local"
></iframe>

<!-- A diferencia de <img>, iframe NO usa atributo alt -->
Ejemplo de iframe mostrando un mapa dentro de una página web
Los iframes permiten integrar contenido externo como mapas o videos sin salir del sitio.
7

Iframe con YouTube: Insertar Videos Externos

YouTube permite incrustar videos en una página web usando un iframe. Este método carga el reproductor oficial de YouTube dentro de tu sitio sin necesidad de descargar el video. Es la forma correcta y legal de mostrar videos externos.

<!-- Iframe que incrusta un video de YouTube -->
<!-- YouTube requiere usar la URL especial /embed/ -->

<iframe

  <!-- Ancho del reproductor -->
  width="560"

  <!-- Alto del reproductor -->
  height="315"

  <!-- URL del video a mostrar -->
  src="https://www.youtube.com/embed/VIDEO_ID"

  <!-- title describe el contenido del iframe -->
  title="Video tutorial de HTML y multimedia"

  <!-- Elimina bordes antiguos (compatibilidad) -->
  frameborder="0"

  <!-- allow define permisos del reproductor -->
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

  <!-- Permite ver el video en pantalla completa -->
  allowfullscreen
></iframe>
Ejemplo de video de YouTube incrustado en una página web con iframe
Los videos de YouTube se integran en HTML mediante iframes usando la URL especial /embed/.
Publicidad
html-css-online-course-responsive-web-design-from-scratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas

Lección anterior

Guía de enlaces HTML
Representación visual de la sintaxis básica y el funcionamiento de la etiqueta ancla en HTML.

Arquitectura de Enlaces: El Sistema Nervioso de la Web

Domina la navegación web con HTML. Aprende a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, anclas internas y a estructurar la arquitectura de tu sitio.

Comenzar Lección

Lección actual

Ejemplo visual de imágenes, favicons e iframes usados en HTML
Los elementos multimedia permiten enriquecer visualmente una página web y mejorar la experiencia del usuario.

Multimedia en HTML

Enriquece tu web con multimedia. Aprende a insertar imágenes, optimizar con atributos alt, añadir favicons e incrustar iframes respetando accesibilidad y rendimiento.

Lección actual

Lección siguiente

Ejemplo de listas HTML ordenadas, desordenadas y anidadas
Las listas en HTML permiten organizar información relacionada de forma clara, jerárquica y accesible.

Listas en HTML

Organiza contenido con listas HTML. Domina ul, ol y dl para crear menús y estructuras claras. Aprende anidamiento y semántica para una web accesible y profesional.

Comenzar Lección
¿Por qué la etiqueta `<img>` no tiene cierre `</img>`?⌄Porque es un 'Void Element' (elemento vacío). No puede contener texto ni otros elementos dentro de ella, se define completamente por sus atributos. En HTML5 basta con `<img ...>`, aunque en XHTML o React se cierra como `<img ... />`.
¿Qué pasa si no pongo el atributo `alt`?⌄Tu sitio será inaccesible para personas ciegas que usan lectores de pantalla y Google no podrá indexar el contenido de la imagen. Además, validadores de código marcarán esto como un error o advertencia grave.
¿Cuál es el tamaño ideal para un Favicon?⌄Lo estándar es tener al menos una versión de 16x16 px y otra de 32x32 px. Sin embargo, para soportar iconos de escritorio en móviles y tablets, se suelen generar versiones de 180x180 px o 192x192 px.
¿Es seguro usar Iframes?⌄Los iframes pueden ser un riesgo de seguridad si cargas contenido de sitios no confiables. Siempre usa `https` y considera usar el atributo `sandbox` para restringir lo que el contenido incrustado puede hacer (ej: ejecutar scripts o abrir popups).
¿Cómo hago que una imagen se adapte al tamaño de pantalla (Responsive)?⌄En HTML las imágenes tienen tamaño fijo por defecto. Para hacerlas 'responsive', debes usar CSS: `img { max-width: 100%; height: auto; }`. Esto asegura que nunca sean más anchas que su contenedor.
¿Qué significa que la imagen es un elemento 'de línea'?⌄Significa que se comporta como una letra más en un texto. Si pones una imagen en medio de un párrafo, fluirá con el texto. Si pones varias imágenes, se alinearán horizontalmente hasta que se acabe el espacio y salten de línea.
¿Puedo usar un GIF animado en `<img>`?⌄Sí, la etiqueta `<img>` soporta archivos `.gif` perfectamente. Funcionan igual que una imagen estática, pero mostrarán la animación automáticamente.
¿Qué diferencia hay entre `width` en HTML y `width` en CSS?⌄El atributo HTML `<img width="500">` define el espacio que ocupa la imagen antes de cargar (evitando saltos de diseño). El CSS tiene prioridad y se usa para el diseño visual final y la adaptabilidad.
¿Por qué mis imágenes tienen un pequeño espacio vacío debajo?⌄Como son elementos de línea, se alinean con la 'línea base' del texto (donde se apoyan las letras), dejando espacio para los descendentes (como la cola de la 'g' o la 'j'). Se soluciona poniendo `display: block` en CSS.
¿Qué es una ruta relativa en el atributo src?⌄Es cuando indicas la ubicación de la imagen basándote en dónde está el archivo HTML actual (ej: `img/foto.jpg`). Es preferible a las rutas absolutas (`C:/Usuarios/...`) para que el sitio funcione en cualquier servidor.