Skip links
Los frames requerían de una página vacía para insertar allí los marcos. Esto provocaba una ralentización para el usuario, ya que primero debía cargarse la página principal y luego ya se cargaban los marcos.
Con los iframes no pasa eso ya que la página principal, donde va albergado nuestro iframe, está lleno de contenido, por lo que el usuario recibe información desde el principio.
El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrarte el código de la estructura básica de un iframe HTML para poder explicarte sus partes.
<html>
<head>
<title>Iframes</title>
</head>
<body>
<iframe src="https://html.hazunaweb.com/"
width="600" height="400" scrolling="auto">
Texto alternativo para navegadores que no aceptan iframes
</iframe>
</body>
</html>
Como vemos, la estructura es similar a cualquier documento html que hemos visto anteriormente, con su cabecera (<head>), su título (<title>) y su contenido visual dentro de <body>.
Como vemos en el código anterior, debemos definir el tamaño del marco del iframe y definir si queremos que haya barra desplazadora o no. Ésta opción la especificamos gracias al atributo “scrolling”. Su valor por defecto es “auto”, aunque podemos definir si queremos barras desplazadoras (“yes”) o si no las queremos (“no”).
El iframe debe tener una fuente, que será la url que muestre en el marco que hemos creado. En nuestro caso hemos puesto la página de inicio de este tutorial html. ¿Quieres ver un ejemplo más claro del uso de iframes? Te recomiendo que visites el portal TerraChat.es, donde con el uso de iframes se incrustan chats en los que la gente de todo el mundo puede chatear entre ellos. Echando un vistazo a este portal, además de ver cómo incrustan los chats, vemos una aplicación práctica de los iframes dentro de una página web.
En el siguiente ejemplo podrás ver como incrustar un vídeo de Youtube usando iframe HTML:
Interacciones del lector
Comments
Deja un comentario
Oscar perez
allpeliculas dice
Gracias por compartir me sirvio de mucha ayuda
Juan dice
Buenos días, he insertado un iframe en una celda de una tabla para que aparezcan una serie de fotos en miniatura, con la cual, por medio de comportamientos hacer una galería de fotos.
Bien, mi problema es el siguiente, cuando guardo y visualizo la web, sí aparecen las fotos en la celda, pero en Dreamweber (5 y 8), en la vista diseño no aparecen las fotos, con lo cual no puedo trabajaar con ellas. ¿Sabrías indicarme el problema o lo que estoy haciendo mal?
Te copio el código por si me he equivocado.
Gracias.
Juan dice
Perdón se ve que no he copiado el código