Iframes HTML

Un iframe HTML se usa para mostrar una página web dentro de una página web.

Sintaxis

La etiqueta HTML <iframe> especifica un marco en línea. Se usa un marco en línea para incrustar otro documento dentro del documento HTML actual.

Sintaxis

<iframe src="url" title="description">

Consejo: es una buena práctica incluir siempre el atributo title para el <iframe>. Los lectores de pantalla lo usan para leer cuál es el contenido del iframe.

Iframe – Establecer altura y ancho

Usa los atributos height y width para especificar el tamaño del iframe. height y width se especifican en píxeles de forma predeterminada.

Ejm

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example">
</iframe>

O puedes agregar el atributo style y usar las propiedades height y width CSS:

Ejm

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Remover el borde

Por defecto, un iframe tiene un borde alrededor.

Para quitar el borde, añadir el atributo style y utilizar la propiedad CSS border.

Ejm

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

Con CSS, también puedes cambiar el tamaño, el estilo y el color del borde del iframe.

Ejm

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Iframe: objetivo de un enlace

Se puede usar un iframe como marco objetivo para un enlace.

El atributo de destino del enlace debe hacer referencia al atributo de nombre del iframe.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>

Resumen

  • La etiqueta HTML <iframe> especiffica un cuadro en linea.
  • El atributo src define la URL de la página a insertar.
  • Siempre incluir el atributo title (para lectores de pantalla).
  • Los atributos height y width especifican el alto y ancho del marco respectivamente.
  • Utilizar border:none para eliminar el borde alrededor del marco.