Listado completo de tutoriales

Temario del Tutorial->52 - iframes


El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la página, similar a disponer una imagen en la página.

Veamos un ejemplo como disponer este tipo de frame tan particular (este tipo de iframe es el único apoyado en las versiones modernas de HTML):

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <title>prueba de iframes</title>
  <meta charset="UTF-8">
</head>
<body>
<h1>Esto es una prueba de un iframe</h1>
<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya está fuera del iframe</h2>
</body>
</html>

Como podemos ver cuando necesitamos agregar el iframe dentro de la página disponemos:

<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>

Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de la página.

La página que muestra el iframe no introduce ningún concepto nuevo:

<!DOCTYPE html>
<html>
<head>
  <title>prueba de iframes</title>
  <meta charset="UTF-8">
</head>
<body>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
</body>
</html>

El resultado de visualizar "pagina1.html" en el navegador es:


Algunas propiedades útiles aplicables a un iframe:


Retornar