Chuck's Academy

HTML Básico

iFrames e Incrustaciones HTML

Insertar Contenido Externo (<iframe>)

La etiqueta <iframe> permite incrustar contenido externo en una página web, como videos, mapas y documentos. El atributo src define la URL del contenido a incrustar.

html
"En este ejemplo, el iframe muestra una página web externa en una ventana dentro de la página. El ancho y alto se definen con los atributos width y height."

Insertar Videos de YouTube, Mapas de Google y Otras Incrustaciones

Muchas plataformas, como YouTube y Google Maps, permiten generar un código <iframe> para incrustar su contenido directamente en una página web. Para añadir un video de YouTube, por ejemplo, se necesita la URL del video en el atributo src.

html
"Este iframe incluye un video de YouTube, con la URL del video en el atributo src. Se permiten los modos de pantalla completa y el marco tiene un borde cero."

Para incrustar un mapa de Google, simplemente utiliza el enlace de Google Maps proporcionado en la plataforma.

html
"Este iframe contiene un mapa de Google, embebido con una URL específica generada en Google Maps. Es posible personalizar el tamaño y otros atributos."

Consideraciones de Seguridad para iFrames

Al insertar contenido externo, es importante considerar los riesgos de seguridad asociados con los iFrames. Algunos consejos de seguridad incluyen:

  • Usar el atributo sandbox para restringir el comportamiento del iframe.
  • Usar referrerpolicy="no-referrer" para mejorar la privacidad del usuario.
  • Solo permitir iFrames de sitios de confianza.
html
"Este iframe usa el atributo sandbox para restringir ciertas funcionalidades, como los scripts. Esto ayuda a reducir riesgos cuando se embebe contenido externo."

Cierre del Capítulo

Ahora puedes utilizar iFrames para incrustar contenido externo en tu página web de forma efectiva y segura. En el próximo capítulo, aprenderemos cómo representar datos y estructurar información visualmente en HTML.


Pregúntame lo que sea