Ejemplos de iframe

Una de las etiquetas que podemos usar cuando estamos haciendo por ejemplo una página web es la de iframe, que sirve para crear un marco dentro de nuestra web. Son muchos los ejemplos entonces que podemos encontrar para iframe, algunos de los cuáles os mostramos a continuación. Estos son, Los mejores ejemplos de iframe.

Qué es iframe

El lenguaje HTML maneja miles de etiquetas, entre las que podemos encontrar la etiqueta iframe, la cual sirve para crear un espacio dentro de la página web en donde se puede incrustar otra web. En general, se trata de un cuadrado cuyas dimensiones las debe especificar el propio desarrollador en la propia etiqueta iframe, la cual tiene asociada una página web que se carga en dicho espacio. La página web que se crea tendrá sus propios contenidos y estilos, muy independiente del contexto donde se muestre.

A continuación vamos a ver unos cuantos ejemplos de iframe. Iframe es utilizada en muchos contextos. Dentro de un iframe tenemos la posibilidad de mostrar contenidos de otras webs, como si estuvieran en la nuestra, por lo cual nos sirven de ejemplos como:

• Códigos de banner, el cual se invoca mediante un iframe pidiendo los datos del banner, lo cual ocurre generalmente a un servidor de banners, el cual puede estar en otra red.
• Para crear interfaces de usuario, en las cuales ciertas actividades se realizan de forma autónoma y el procesamiento en otra web.

Actualmente la etiqueta iframe se utiliza más a menudo que la etiqueta frame, porque no nos da tantos problemas como esta. La diferencia principal está basada en que la etiqueta iframe no necesita una declaración de los espacios de los frames, porque se incrusta en el código HTML de la página. El iframe, por tanto, no provoca problemas en la navegación, como los que ocurren con los frames normales si no se entra correctamente a través del frameset.

Por decirlo de alguna manera, trabajar con un iframe flotantes suele ser tan fácil como hacer una tabla, la cual se codifica dentro de la maqueta HMTL, con su espacio ya disponible dentro de la página.

Ahora vamos a ver en uno de los ejemplos de iframe, como dijimos anteriormente se coloca de forma directa en el código HTML, en el lugar donde queremos que justo aparezca. Para esto debemos tener definidos los parámetros de localización del iframe, estos parámetros son las mismas etiquetas en las cuales se basa el lenguaje HTML. Ahora bien, para la elaboración de un iframe, se debería colocar un código como el siguiente:

<iframe src=”pagina_fuente.html” width=290 height=250>Texto para cuando el navegador no conoce la etiqueta iframe</iframe>

Como nos podemos dar cuenta, no maneja etiquetas o parámetros tan complicados y podemos construir un iframe de la forma mas fácil.

Cambios en la etiqueta iframe

Como ya hemos mencionado, anteriormente frame era la etiqueta usada para crear marcos en HTML, dejando paso ahora a iframe que además se configura como hemos visto en el ejemplo específico anteriormente mostrado como utiliza diversos atributos.

Aquí hay una lista de atributos para personalizar el iframe, incluidas algunas características nuevas que se introdujeron con HTML5

Lo que sigue a continuación es una lista de atributos obsoletos , o abolido por HTML5:

Ejemplos de iframe

Ahora podemos hacer un ejemplo práctico y, por simplicidad, omitimos insertar un texto alternativo. La etiqueta IFRAME siempre debe insertarse en la sección BODY de la página principal. 

El iframe invoca el contenido de otra página Web (página-b) y se visualiza n la página principal (página-a) en un tamaño de la ventana igual a 300pixel de largo por 300 píxeles de alto.

El iframe me permite mostrar el contenido de la página-b dentro de la página -a. De esta manera puedo proporcionarle al usuario el contenido de dos páginas web a la vez.

Advertencia . El contenido de la página-b, el uno dentro del marco flotante, debe estar preparado para adaptarse a la pantalla dentro de una ventana 300 pixel. De lo contrario, solo se vería parte de su contenido.

Por otro lado, podemos añadir que el nivel de código HTML , un conjunto de iframes no tiene cuerpo sino solo referencias a páginas que completan la “composición”. Veamos un ejemplo simple:

<html>
<head>
  <title>I frame HTML</title>
</head>

<frameset rows="100,*">
  <frame src="intestacion.html" name="intestacion">
  <frameset cols="200,*">
    <frame src="resumen.html" name="resumen">
    <frame src="contenido.html" name="contenido">
  </frameset>
</frameset>

</html>

Es posible observar que en este HTML falta la etiqueta <body> dado que un conjunto de marcos (iframe) no se necesita un cuerpo, ya que es una página que contiene otras páginas. Específicamente en nuestro ejemplo, la página consta de tres documentos HTML diferentes organizados a través de dos conjuntos de marcos anidados. Con ello se da como resultado que pueda tener varios marcos agrupados de manera consecuente sin que el contenido dentro de ellos se mezcle.

Con iframe podemos crear no solo marcos, sino que es una etiqueta realmente útil cuando por ejemplo queremos organizar varias columnas dentro de una página web.

Artículo de interés:

Ejemplos de formularios HTML