Marcos flotantes HTML
Un iframe HTML se utiliza para mostrar una página web dentro de una página web.
Sintaxis de marco flotante HTML
La <iframe>
etiqueta HTML 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="description"></iframe>
Sugerencia: es una buena práctica incluir siempre un
title
atributo para el archivo <iframe>
. Los lectores de pantalla lo utilizan para leer cuál es el contenido del iframe.
Iframe - Establecer alto 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 Example"></iframe>
O puede agregar el style
atributo y usar el CSS height
y las width
propiedades:
Ejemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Eliminar el borde
Por defecto, un iframe tiene un borde alrededor.
Para eliminar el borde, agregue el style
atributo y use la
border
propiedad CSS:
Ejemplo
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
Con CSS, también puede cambiar el tamaño, el estilo y el color del borde del iframe:
Ejemplo
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe: destino de un enlace
Un iframe se puede utilizar como marco de destino para un enlace.
El target
atributo del enlace debe hacer referencia al name
atributo del iframe:
Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Resumen del capítulo
- La
<iframe>
etiqueta HTML especifica un marco en línea - El
src
atributo define la URL de la página para incrustar - Incluir siempre un
title
atributo (para lectores de pantalla) - Los atributos
height
ywidth
especifican el tamaño del iframe - Úselo
border:none;
para eliminar el borde alrededor del iframe
Ejercicios HTML
Etiqueta de marco flotante HTML
Tag | Description |
---|---|
<iframe> | Defines an inline frame |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .