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
titleatributo 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 heighty widthpara 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 styleatributo y usar el CSS heighty 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 styleatributo y use la
borderpropiedad 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 targetatributo del enlace debe hacer referencia al nameatributo 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
srcatributo define la URL de la página para incrustar - Incluir siempre un
titleatributo (para lectores de pantalla) - Los atributos
heightywidthespecifican 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 .