MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

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 src define la URL de la página a insertar
  • Incluya siempre un atributo title (para lectores de pantalla)
  • Los atributos height y width especifican el tamaño del iframe
  • Utilice border:none; para eliminar el borde alrededor del iframe

HTML Ejercicios

Ponte a prueba con ejercicios

Ejercicio:

Cree un iframe con una dirección URL que vaya a https://www.w3schools.com.

<iframe ="https://www.w3schools.com"></iframe>


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.



Comentarios