Un iframe es usado para mostrar una página web dentro de una página web.
Sintaxis de iframe
La etiqueta <iframe> especifica un marco en línea. Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.
Ejm
<iframe src="url" title="description"></iframe>
Sugerencia: es una buena práctica incluir siempre un atributo title para el <iframe>. Los lectores de pantalla lo utilizan para leer cuál es el contenido del iframe.
Iframe – Establecer alto y ancho
Utiliza 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>
También puedes utilizar el atributo style y usar las propiedades width y height dentro del mismo.
Ejm
<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 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: destino de un enlace
Un iframe se puede utilizar como marco de destino para un enlace. El atributo target debe hacer referencia al atributo de nombre del iframe.
Ejm
<!DOCTYPE html> <html lang="es"> <head> </head> <body> <h2>Iframe</h2> <iframe src="https://sutilweb.com" name="mys" height="80%" width="80%" title="iframe"></iframe> <p><a href="https:/musicaysonido.es" target="mys">Música y Sonido</a></p> <p>Un iframe</p> </body> </html>