Embeber Páginas Web con Iframes de HTML

Introducción

La etiqueta <iframe> se utiliza para incrustar una página web dentro de otra página web. En este laboratorio, aprenderá a usar la etiqueta <iframe> para mostrar otra página web dentro de la página web actual.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/embed_media -.-> lab-70775{{"Página HTML Embebida"}} html/inter_elems -.-> lab-70775{{"Página HTML Embebida"}} html/custom_attr -.-> lab-70775{{"Página HTML Embebida"}} end

Agregar la etiqueta `<iframe>` a su archivo HTML

Para agregar un <iframe> a su archivo HTML, debe usar las etiquetas de apertura y cierre de <iframe> y agregar el atributo src, que especifica la URL de la página web que se va a mostrar. Aquí hay un ejemplo de una etiqueta <iframe>:

<iframe src="https://www.example.com"></iframe>

Establecer la altura y el ancho del `<iframe>`

Puede usar los atributos height y width para ajustar el tamaño del <iframe> según sus necesidades. Los atributos height y width toman valores en píxeles, porcentaje o em. Aquí hay un ejemplo:

<iframe src="https://www.example.com" height="500" width="500"></iframe>

Controlar las características de visualización con los atributos `sandbox` y `allow`

Puede usar los atributos sandbox y allow para controlar varias características del <iframe>, como permitir la visualización en pantalla completa, habilitar la ejecución de scripts dentro del <iframe>. Aquí hay un ejemplo:

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

Usando contenido alternativo

Se recomienda usar las etiquetas <iframe> con un contenido alternativo que se mostrará si el navegador no admite marcos en línea. Puede agregar el texto alternativo entre las etiquetas de apertura y cierre de <iframe>, que se mostrará si la etiqueta <iframe> no es admitida. Aquí hay un ejemplo:

<iframe src="https://www.example.com" height="500" width="500"
  >Su navegador no admite marcos en línea.</iframe
>

Resumen

¡Felicitaciones! Has aprendido cómo usar la etiqueta <iframe> para mostrar otra página web dentro de tu página web actual. Recuerda establecer el atributo src a la URL de la página web que quieres mostrar, y usar los atributos height y width para ajustar la visualización según tus necesidades. También puedes usar los atributos sandbox y allow para controlar varias características del <iframe>. Además, asegúrate de incluir un contenido alternativo para los navegadores que no admiten la etiqueta <iframe>.

Página HTML Embebida