IFRAMES HTML
Los iframes son cuadros que te permiten mostrar de forma incrustada o embebida contenido o información de otro servidor o recurso web, como es el caso de los videos de YouTube, presentaciones de Google, revistas digitales de ISSUU, presentaciones de Prezi, Powtoon, entre otros elementos web.
Estas etiquetas crean un cuadro que muestra un contenido, a diferencia de una Frame, que estructura la página los iframe permiten embeber en la página web contenido de otra página web y colocarlos libremente en la página web al igual que una imagen.
La etiqueta <iFrame></iframe> tiene los siguientes atributos:
src= "ruta_del_recurso": atributo obligatorio para indicar la página que se debe cargar en esta ventana, puede ser una imagen, presentación, video.
height ="altura": altura en píxeles de la ventana donde se muestra el iframe.
width ="anchura": anchura en píxeles de la ventana donde se muestra el iframe.
El valor de Height y width se puede asignar también en porcentaje %. Si no se ponen los atributos de anchura y altura, el documento se mostrará en una pequeña ventana cuyas medidas pueden variar dependiendo del navegador*1.
scrolling = "yes | no | auto": Barras de desplazamiento. El valor yes las muestra siempre, el valor no nunca las muestra, y el valor auto las muestra sólo si son necesarias. El valor por defecto es auto. *1.
name="nombre" Este atributo da un nombre a la etiqueta, y es imprescindible, si queremos direccionar los enlaces hacia la ventana del iframe. Para ello se utiliza el mismo mecanismo que para los frames (atributo target="nombre" en el enlace, y atributo name="nombre" en el iframe).
marginwidth: Para definir el margen a izquierda y derechar que debe tener la página que va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecerá el margen que pueda tener asignada la página web que mostremos en el frame flotante. *2
marginheight: lo mismo que marginwidth, pero en este caso para el tamaño del margen por la parte de arriba y abajo. *2
margin: para especificar alineación del frame, igual que se especifica para las imágenes. *2
style y class: los atributos para definir el aspecto del iframe por medio de hojas de estilo css. *2
id: Para indicar el identificador del iframe, y poder referirnos a él desde javascript. *2
frameborder: para definir si queremos o no que haya un borde en el frame. Los valores posibles son 0 | 1. frameborder=0 indicaría que no queremos borde y frameborder=1 que sí. *2
Ejemplo de aplicación
<html lang="es">
<head> <title>TABLA 3X3</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<br><center>Codigo generado de una presentacion de Google<br><br>
<iframe width="300" height="254" src="https://docs.google.com/presentation/d/15i3IrdQM9T3hcOEIeWENOY3t9SUENxlhcv-RkK26hD0/embed?start=false&loop=false&delayms=3000"
frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
<br><br><br><br>Video de youtube<br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qwdU5IRD10I" frameborder="0" allowfullscreen></iframe>
</center><br><br>
</body></html>
Esta etiqueta la puedes utilizar dependiendo de la necesidad para mostrar algún recurso propio de tu página como imágenes, videos, entre otros, pero generalmente se utiliza para reproducir recursos de fuentes o páginas externas.
Fuentes
*1. http://aprende-web.net/html/html9_4.php
*2. https://desarrolloweb.com/articulos/etiqueta-iframe.html
