HTML Iframe
Un iframe HTML se utiliza para mostrar una página web dentro de una página web.
HTML Iframe Sintaxis
La etiqueta HTML <iframe> especifica un marco en línea.
Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.
Sintaxis
<iframe src="url" title="descripción"></iframe>
Consejo: Es una buena práctica incluir siempre un atributo title para <iframe>. Los lectores de pantalla lo utilizan para leer cuál es el contenido del iframe.
Iframe - Establecer altura y ancho
Utilice los atributos height y width para especificar el tamaño del iframe.
La altura y el ancho se especifican en píxeles de forma predeterminada:
Ejemplo
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
O puede agregar el atributo style y usar el CSS propiedades de height y width:
Ejemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Iframe - Quitar el borde
De forma predeterminada, un iframe tiene un borde alrededor.
Para eliminar el borde, agregue el atributo style y use la propiedad CSS border:
Ejemplo
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Con CSS, también puedes cambiar el tamaño, estilo y color del borde del iframe:
Ejemplo
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Iframe — Destino de un enlace
Se puede utilizar un iframe como marco de destino para un enlace.
El atributo target del enlace debe hacer referencia al atributo name del iframe:
Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Ejemplo"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Inténtalo tú mismo »
Resumen del capítulo
- La etiqueta HTML
<iframe>especifica un marco en línea - El atributo
srcdefine la URL de la página a insertar - Incluya siempre un atributo
title(para lectores de pantalla) - Los atributos
heightywidthespecifican el tamaño del iframe - Utilice
border:none;para eliminar el borde alrededor del iframe
HTML Ejercicios
HTML iframe Etiqueta
| Etiqueta | Descripción |
|---|---|
| <iframe> | Define un marco en línea |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
