You are here
HTML5, Frames e Iframes Sin categoría 

HTML5, Frames e Iframes

Frames

Con los frames se pueden mostrar más de un archivo HTML en la misma ventana del navegador. Podemos hacer que los frames interactúen, por ejemplo al presionar un enlace en un frame podemos cargar una página en otro frame.

Solo se aconseja emplear frames cuando la situación lo amerita, hay que tener en cuenta que el uso de frame hace menos accesible el sitio y es mucho más difícil imprimir su contenido.

Veamos un ejemplo de implementar dos frames:

<html>

<head>

<title>prueba de frames</title>

</head>

<frameset cols=”20%,80%”>

<frame src=”pagina2.html”>

<frame src=”pagina3.html”>

<noframes>

<p>El navegador no soporta frames</p>

</noframes>

</frameset>

</html>

Esta página es la que define la ubicación de los frames dentro del navegador. La cabecera tiene una sintaxis similar a todas las páginas que hemos visto, pero no existe el body, en su lugar encontramos el elemento frameset.

En este ejemplo dividimos la ventana del navegador en dos secciones que mostrarán una página HTML cada una, mediante la propiedad cols indicamos cuanto ocupará cada ventana en porcentaje:

<frameset cols=”20%,80%”>

 

En el interior del elemento frameset definimos las dos páginas HTML que deben mostrarse mediante el elemento frame. Este tiene una propiedad llamada src (source que significa fuente) que la inicializamos con el nombre de la página a mostrar. Así definimos las dos páginas:

<frame src=”pagina2.html”>
<frame src=”pagina3.html”>

 

Otra elemento importante es el noframes donde indicamos un mensaje en el caso que el navegador no cuente con la capacidad de mostrar frames (podemos disponer enlaces a las páginas en forma individual)

<noframes>
<p>El navegador no soporta frames</p>
</noframes>

 

Las otras dos páginas son iguales a las que hemos venido haciendo.

 

40.- Frames – Actualización de un frame a partir del enlace de otro frame

Una actividad habitual con frames es disponer hipervínculos en uno de los frame y actualizar el contenido de otro frame.

Veamos con un ejemplo la sintaxis:

pagina1.html

<html>

<head>

<title>prueba de frames</title>

</head>

<frameset cols=”20%,80%”>

<frame src=”pagina2.html”>

<frame src=”pagina3.html” name=”ventanadinamica”>

<noframes>

<p>El navegador no soporta frames</p>

</noframes>

</frameset>

</html>

Podemos observar que para el frame que queremos acceder posteriormente para modificar su contenido debemos inicializar la propiedad name:

<frame src=”pagina3.html” name=”ventanadinamica”>

pagina2.html

<html>

<head>

<title>prueba de frames</title>

</head>

<body>

<h2>Enlaces.</h2>

<ul>

<li><a href=”pagina3.html” target=”ventanadinamica”>Enlace

1</a></li>

<li><a href=”pagina4.html” target=”ventanadinamica”>Enlace

2</a></li>

</ul>

</body>

</html>

Este archivo es el frame de la izquierda, que contiene los hipervínculos a dos páginas. Para indicar que frame debe mostrar las páginas de estos hipervínculos agregamos la propiedad target inicializándola con el valor del name definido para el frame (en nuestro caso es “ventanadinamica”)

Tengamos en cuenta que el frame de la derecha comienza mostrando el archivo pagina3.html y luego según que hipervínculo se seleccione mostrará el archivo: pagina3.html o pagina4.html

Los contenidos de los dos archivos pagina3.html y pagina4.html no tienen nada nuevo:

pagina3.html

<html>

<head>

<title>prueba de frames</title>

</head>

<body>

<h1>Página A</h1>

<h2>Este es el contenido de página del archivo:pagina3.html</h2>

</body>

</html>

 

pagina4.html

<html>

<head>

<title>prueba de frames</title>

</head>

<body>

<h1>Página B</h1>

<h2>Este es el contenido de página del archivo:pagina4.html</h2>

</body>

</html>

 

 

Frames – Asignación de medidas en píxeles

En los ejemplos anteriores definimos las medidas de los frames en porcentajes:

<frameset cols=”20%,80%”>

 

Cuando lo indicamos en porcentajes al redimensionar la ventana del navegador el tamaño de los frame se redimensiona en forma proporcional.

Hay situaciones donde queremos que un frame no se redimensione, por ejemplo que el frame de la izquierda donde ubicaríamos un menú de opciones siempre permanezca inalterable. Esto lo logramos indicando un valor absoluto para dicho frame.

Veamos un ejemplo donde definimos 3 frames dividiendo la ventana en tres columnas. Luego queremos que el frame de la izquierda y la derecha tengan medidas inalterables, para esto lo definimos de la siguiente forma:

<frameset cols=”200,*,200″>

Veamos que significa el asterisco para la segunda columna. Como sabemos una ventana puede redimensionarse y las tarjetas gráficas tienen distintas resoluciones en píxeles (640×480, 800×600, 1024×768 etc.), con esta sintaxis indicamos que la primer columna ocupe siempre 200 píxeles, lo mismo la tercer columna, pero la segunda tendrá un ancho de los píxeles que restan (es decir el ancho de ventana menos 400).

 

Frames – Propiedades del elemento frame

Hasta ahora hemos utilizado y definido las propiedades para la marca de inicio del elemento frame: src y name.

Otras propiedades que pasaremos a ver, comprender y probar su funcionamiento son:

noresize Esta propiedad no requiere que se le asigne un valor. Si se encuentra presente el frame no podrá ser redimensionado con el mouse por el visitante del sitio.
Por ejemplo si disponemos un menú de enlaces en un frame ubicado a la izquierda es muy probable que definamos la propiedad noresize ya que poca utilidad tiene agrandar o contraer esta región de pantalla.

frameborder Esta propiedad puede tomar los valores 1 o 0. Por defecto un frame aparece con borde es decir esta propiedad por defecto tiene el valor 1. Si queremos que el borde no aparezca debemos inicializarla con 0.
Hay que tener en cuenta que por más que los bordes no existan si se puede redimensionar el frame con el mouse.

scrolling Los valores posibles de esta propiedad son: “auto”,”yes”,”no”. Por defecto está inicializada con el valor “auto”. El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del frame no se ve. Si definimos el valor “yes” estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor “no” estaremos indicando que nunca debe aparecer la barra de navegación para dicho frame.

Resolvamos el siguiente problema:

Confeccionar una ventana con dos frame verticales. No permitir redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento.

pagina1.html

<html>

<head>

<title>prueba de frames</title>

</head>

<frameset cols=”200,*”>

<frame src=”pagina2.html” frameborder=”0″ noresize>

<frame src=”pagina3.html” frameborder=”0″ scrolling=”yes”

noresize>

<noframes>

<p>El navegador no soporta frames</p>

</noframes>

</frameset>

</html>

 

Frames – Anidamiento de frameset

El lenguaje HTML nos permite definir un frameset en la ubicación de un frame, esto se logra anidando frameset.

Vamos a crear una página que contenga dos columnas. La segunda columna la dividimos en dos filas:

Para resolver este formato de página tenemos que plantear los frameset de la siguiente manera:

pagina1.html

<html>

<head>

<title>prueba de frames</title>

</head>

<frameset cols=”200,*”>

  <frame src=”pagina2.html” noresize>

  <frameset rows=”70,*”>

    <frame src=”pagina3.html” noresize>

    <frame src=”pagina4.html” noresize>

  </frameset>

<noframes>

<p>El navegador no soporta frames</p>

</noframes>

</frameset>

</html>

 

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:

pagina1.html

<html>

<head>

<title>prueba de iframes</title>

</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.

Algunas propiedades útiles aplicables a un iframe:

src: Archivo a mostrar dentro del iframe.
width: Ancho en píxeles.
height: Alto en píxeles.
frameborder: Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra.
scrolling: Los valores posibles de esta propiedad son: “auto”,”yes”,”no”. Por defecto está inicializada con el valor “auto”. El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del iframe no se ve. Si definimos el valor “yes” estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor “no” estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.
name: Nombre del iframe si queremos acceder desde otra página. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra página.

 


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*