Fundamentos Frontend

Multimedia en HTML

Imágenes, Favicons e Iframes

Una web sin imágenes es difícil de comprender. En esta lección aprenderás a insertar contenido multimedia correctamente, cuidando la accesibilidad, el rendimiento y el posicionamiento en buscadores.

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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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" />
Ejemplo de uso básico de la etiqueta img en HTML
La etiqueta img se utiliza para mostrar imágenes dentro de una página web.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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.

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.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- 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
htmlCssOnlineCourseResponsiveWebDesignFromScratch

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 especialDisponible por 0 Días y 00:00:00 Hs
Ver próximas fechas
¿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.
¿Puedo poner un video de YouTube con la etiqueta `<img>`?No. Para videos externos como YouTube se usa `<iframe>`. Para videos propios alojados en tu servidor, se usa la etiqueta `<video>`.
¿Qué formato de imagen debo usar para logotipos?Sin duda SVG. Al ser vectores matemáticos, se ven nítidos en cualquier tamaño de pantalla y pesan poquísimo en comparación con un PNG o JPG.
¿El atributo `title` es lo mismo que `alt`?No. `alt` es el reemplazo del contenido si falla. `title` ofrece información adicional que aparece como un 'tooltip' flotante al pasar el mouse por encima. `alt` es obligatorio, `title` es opcional.
¿Qué hace el atributo `loading="lazy"`?Difiere la carga de la imagen. Le dice al navegador que no descargue la imagen hasta que el usuario haga scroll y esté cerca de verla. Mejora muchísimo la velocidad de carga inicial del sitio.
¿Por qué no veo mi Favicon en local?A veces los navegadores guardan en caché los favicons agresivamente. Prueba abrir el archivo en modo incógnito o asegura que la ruta en el `href` sea correcta relative a tu archivo HTML.
¿Puedo cambiar el tamaño de un Iframe?Sí, con los atributos `width` y `height` en la etiqueta, o mejor aún, usando CSS para controlar su tamaño de forma responsive.
¿Es posible anidar un enlace `<a>` alrededor de una imagen?Sí, es una práctica muy común para hacer botones gráficos o banners clicables: `<a href="..."><img src="..." /></a>`.
¿Qué es WebP?Un formato de imagen moderno desarrollado por Google que ofrece compresión superior (imágenes más ligeras) con mejor calidad que JPG y soporte de transparencia como PNG.
¿Cómo centro una imagen?Al ser un elemento inline, no puedes usar `margin: auto` directamente. Debes convertirla a bloque (`display: block; margin: 0 auto;`) o centrar al padre con `text-align: center`.
¿Qué pasa si la ruta del src está mal escrita?El navegador mostrará un icono de 'imagen rota' estándar y mostrará el texto que hayas puesto en el atributo `alt`.

Información de cursos

Completá el formulario y recibí detalles sobre contenidos, fechas, niveles y promociones disponibles.

Completá el formulario para mantenerte informado. 👉