TEMA14: Marcos interiores (inline frames o iframes)

Los marcos interiores o IFRAMES nos permiten mostrar una página html directamente dentro otra.

Por supuesto a algunos autores les parece la solución de todos sus problemas y a otros, en cambio, les parece que presentan demasiados inconvenientes.

Esta etiqueta, introducida por iExplorer 3, ha sido añadida a las especificaciones de HTML en la versión 4.0. Se ve en Netscape 6 y en Opera 4 y siguientes.

LA ETIQUETA BÁSICA

Los marcos interiores o flotantes nos permiten introducir en mitad de un documento html, otro documento html, como si fuera una imagen o una tabla. Vamos a ver un ejemplo simple.

<html>
<head>
<title>colores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor=”#FFCC99″ text=”#CC3300″ link=”#666633″ vlink=”#669999″ alink=”#FF6600″>
Vamos a ver un ejemplo estupendo de cómo se pone un iframe,  exactamente en mitad de
nuestra página.<br />

<iframe src=”externo.html” width=”70%” height=”90″></iframe> <br /><br />
Y seguimos tranquilamente escribiendo en nuestra página.

</body>
</html>

Ver el resultado

ATRIBUTOS

src=”archivo”: establecemos la ubicación del archivo externo que queremos incluir.

width: Establecemos el ancho del iframe, en píxeles o en tantos por ciento.

height: Establecemos el alto del iframe, en píxeles o en tantos por ciento.

frameborder=”0″ Determinanos si queremos que tenga borde nuestro iframe o no.

marginwidth=”x” Añade un margen a los lados del iframe.

marginheight=”x” Añade un margen encima y debajo del iframe.

scrolling=”no” Establecemos si aparece o no la barra de scroll.

align=”right” Alineamos el iframe a un lado o a otro. Se comporta exactamente igual que en el caso de las imágenes, es decir cuando utilizamos align=”right|left” el texto externo se ordena a su alrededor.

hspace=”x” Establece un margen a los lados.

vspace=”x” Establece un margen encima y debajo del iframe.

NOTA: Cómo siempre, repetimos: las características visuales deben establecerse con CSS y no con HTML.

<html>
<head>
<title>IFRAME</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor=”#FFCC99″ text=”#CC3300″ link=”#666633″ vlink=”#669999″ alink=”#FF6600″>
<iframe src=”externo1.html” width=”20%” height=”100%” border=”0″ align=”left” hspace=”10″ vspace=”0″></iframe>Los marcos interiores o IFRAMES nos permiten mostrar una página html directamente dentro otra.

Por supuesto a algunos autores les parece la solución de todos sus problemas y a otros, en cambio, les parece que presentan demasiados inconvenientes.

Esta etiqueta, introducida por iExplorer 3, ha sido añadida a las especificaciones de HTML en la versión 4.0. Se ve en Netscape 6 y en Opera 4 y siguientes.

LA ETIQUETA BÁSICA

Los marcos interiores o flotantes nos permiten introducir en mitad de un documento html, otro documento html, como si fuera una imagen o una tabla. Vamos a ver un ejemplo simple.

Y seguimos tranquilamente escribiendo en nuestra página.
</body>
</html>
Ver el resultado

LOS ENLACES

Los enlaces en los iframes funcionan exactamente igual que en los frames, tal y cómo vimos en el tema 13.

Esto nos permite jugar con los distintos iframes, si incluimos varios, veamos un ejemplo. Os propongo un ejercicio. Tenéis que hacer un documento html que contenga 2 iframes, uno encima de otro. En el iframe superior tenéis que poner dos enlaces con los que controlaréis lo que sucede en el iframe inferior, imitando este efecto

Necesitaréis dos imagenes: discovinillo.jpg y vinilo2.gif

Suerte!

13 Marcos (atributos) –  Indice – Fin

5 responses to “TEMA14: Marcos interiores (inline frames o iframes)

  1. como puedo poner un iframe en un blog preinstalado de wordpress ? gracias

  2. No entiendo bien qué quieres decir con “preinstalado”, no sé si te refieres a uno de worpress.com (como éste), si ese es el caso: No puedes. En otro caso, entras por FTP te bajas el archivo de la plantilla en la que quieras poner el iframes, modificas el código y lo vuelves a subir. Salu2

  3. me refiero a un wordpress como este claro, que no tiene hosting propio.

    Pues yo habia leido que si se podia poner un iframe.
    De todas formas a ver si me podeis ayudar, necesito poner un contador de cuenta atras, de los que dan los dias que quedan para tal evento. Entonces encontre uno muy chulo en springwidgets.com, que te da un codigo para wordpress, pero lo pegas en una entrada o en un widgets de texto y te borra la mitad del codigo y no funciona.
    Entonces pense en un iframe desde otro servidor, pero tampoco puedo.
    Alguien me puede ayudar a poner el contador ??? gracias

  4. Vaya, yo estaba mirando como meter frames a una de las páginas secundarias de un blog de wordpress… Que mala noticia que no se pueda😦

    Sabes si hay otros blogs que lo permitan? Puesto que todavia estoy empezando ya puestos lo empezaria en uno que me permita hacer lo que quiero.

    Gracias!

  5. ligeras

    Tengo un problemilla, cada vez que meto el iframe en html de wordpress en la parte visual desaparece todo, y si antes de ver visual lo apruebo para que se publique, se publica un enlace pues transforma “<iframe" en "<a"…

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s