Los Frames en el HTML

Qu son los Frames?

La llegada del HTML 4 trajo consigo una gran cantidad de nuevos elementos muy
importantes que vinieron a revolucionar la forma en que diseamos pginas WEB, uno de
ellos fueron los FRAMES.
La palabra inglesa Frame en lenguaje espaol significa Marco, y se le
denom de esta forma ya que su lgica es la de separar un sitio WEB
en varias subpginas.
Los Frames son una manera de partir la pgina en distintos espacios independientes los
unos de los otros, de modo que en cada espacio se coloca una pgina distinta que se
codifica en un archivo HTML distinto.
En el pasado muchos navegadores de Internet no era compatibles con ellos, pero en la
actualidad la gran mayora debe soportarlos (excepto por algunos dispositivos mviles que
an poseen navegadores fuera de estndar).

En la pgina de la imagen (www.mancomunidadguisayote.hn) se han utilizado frames, para que cuando se haga clic en alguno
de los links del men solo ser cargado lo que aparecen en el panel del centro, as se evita volver a cargar todo el men y el
ttulo de la pgina.
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

La Lgica de los Frames

Cada una de las reas en las que se parte la pgina con Frames son independientes y han de
ser codificadas con archivos HTML tambin independientes. Como resultado, cada frame o
marco contiene las propiedades especficas que le indiquemos en el cdigo HTML a
presentar en ese espacio. As mismo, y dado que cada marco es independiente, tendrn sus
propias barras de desplazamiento, horizontales y verticales, por separado.
Una de las principales ventajas de la programacin con frames viene
derivada de la independencia de los distintos frames, pues podemos
navegar por los contenidos de nuestro web con la barra de navegacin
siempre visible, y sin que se tenga que recargar en cada una de las
pginas que vamos visitando.
Existen en la web muchas pginas que contienen frames y seguro que todos hemos tenido
la ocasin de conocer algunas. Se suelen utilizar para colocar en una parte de la ventana
una barra de navegacin, que generalmente se encuentra fija y permite el acceso a
cualquier zona de la pgina web.
Un ejemplo de las reas que se pueden construir en una construccin de frames se puede
ver en las imgenes:

Explicacin Bsica de los Frames

Las pginas web que estn hechas con frames se componen de una declaracin de los
marcos y tantas pginas en formato HTML corriente como distintas divisiones hemos
definido. La declaracin o definicin de frames es la nica pgina que realmente debemos
aprender, puesto que las pginas que se van a visualizar en cada uno de los cuadros son
archivos HTML de los que hemos venido aprendiendo anteriormente en este manual.
Dicha definicin est compuesta por etiquetas <FRAMESET> y <FRAME>, con las que se
indicamos la disposicin de todos los cuadros. La etiqueta <FRAMESET> indica las
particiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los
cuadros donde colocaremos una pgina independiente.
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Las particiones que se pueden hacer con un <FRAMESET> son en filas o columnas. Por
ejemplo, podramos indicar que deseamos hacer una divisin de la pgina en dos filas, o
dos columnas, tres filas, etc. Para indicar tanto la forma de partir la ventana -en filas o
columnas- como el nmero de particiones que pretendemos hacer, se ha de utilizar los
atributos:
1. COLS: Sirve para indicar una particin en columnas
2. ROWS: Sirve para indicar una particin en filas
Es importante indicar que no se puede hacer una particin en filas y
columnas a la vez, sino que debemos escoger en partir la ventana en
una de las dos disposiciones. Ms adelante indicaremos cmo partir la
ventana tanto en filas como en columnas, que se hace con la
anidacin de frames.
En el atributo COLS o ROWS -slo podemos elegir uno de los dos- colocamos entre comillas
el nmero de particiones que deseamos realizar, indicando de paso el tamao que va a
asignarse a cada una. Un valor tpico de estos atributos sera el siguiente:

cols = "20%,80%"
Indica que se deben colocar dos columnas, la de la izquierda tendra un 20% del espacio
total de la ventana y la de la derecha un 80%.

rows = "15%,60%,25%"
As indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del
medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total
suman el 100% del espacio de la ventana. Adems del porcentaje para indicar el espacio de
cada una de las casillas, tambin podemos indicarlo en pixeles. De esta manera.

cols = "200,600"
Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la
derecha 600. Esto est bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene
por qu ser as en todos los monitores de los usuarios, por lo que este modo de expresar los
marcos es importante que se indique de la siguiente manera.

cols = "200,*"
As indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio
disponible -que ser mayor o menor dependiendo de la definicin de la pantalla del
usuario- se le asignar a segunda columna.
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

En la prctica podemos mezclar todos estos mtodos para definir los marcos de la manera
que deseemos, con porcentaje, con pixels o con el comodn (*). No importa cmo se
definan, la nica recomendacin es que uno de los valores que indiquemos sea un
asterisco, para que el rea correspondiente a dicho asterisco o comodn sea ms o menos
grande dependiendo del espacio que tenga la ventana de nuestro navegador. Otros
mtodos de definir filas y columnas, atendiendo a este consejo, seran los siguientes:

rows = "100,*,12%"
Definimos tres filas, la primera con 100 pixels de ancho, la segunda con el espacio que
sobre de las otras dos, y la tercera con un 12% del espacio total.

cols = "10%,50%,120,*"
Estamos indicando cuatro columnas. La primera del 10% del espacio de la ventana, la
segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pixels y la ltima
con la cantidad de espacio que sobre al asignar espacio a las dems particiones.
Una vez hemos indicado el nmero de filas o columnas y el espacio reservado a cada una
con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la procedencia
de cada uno de los frames en los que hemos partido la ventana.
Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o
columnas. De esta manera.

<FRAME src="marco1.html">
As queda indicado que el frame que estamos definiendo debe mostrar la pgina
marco1.html en su interior.
Un consejo muy importante es que en pgina que define los frames no
debe haber un tag para el BODY. HTML puede arrojarnos un error si lo
incluimos.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Ejemplo de un Frame Simple

Vamos a detallar un ejemplo sobre cmo se creara la definicin de frames de la imagen
que podemos ver a continuacin:

El cdigo de dicho Frame es el siguiente:

index.html

<html>
<head>
<title>Definicin de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
</html>
Para terminar de comprender este ejemplo:
1. El ttulo de la definicin de frames es el que hereda toda la pgina web, por ello, no
es buena idea titular como "definicin de frames" por ejemplo, ya que entonces toda
nuestra pgina se titulara as y seguramente no sea muy descriptivo. Si estuvisemos
haciendo una pgina para la Proyectos UTH sera mejor titular a la definicin de
frames algo como "Proyectos de la UTH".
2. La pgina que define los frames no tiene BODY. HTML puede arrojarnos un error si lo
incluimos.
3. Las pginas "pagina1.html", "pagina2.html"y "pagina3.html" han de escribirse en
archivos independientes con el nombre indicado. En este ejemplo, dichas pginas
deberan encontrarse en el mismo directorio que la declaracin de frames. Si
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

especificamos una ruta para acceder al archivo podemos colocarlo en el directorio

que deseemos.
A continuacin coloco el cdigo HTML para las tres pginas que se utilizan para este
ejemplo:
pagina1.html
Es la pgina que contiene el titular de la web. Simplemente se trata de una etiqueta <H1> y
una imgen de titular:

<html>
<body bgcolor="#DECC09">
<center>
<h1 align=center><img src=uth.png height=50
align=top> Proyectos de la UTH</h1>
</center>
</body>
</html>
pagina2.html
Es la pgina que se presentar en el rea principal de la definicin de frames, es decir, la
pgina que tiene ms espacio para visualizarse y donde pondremos los contenidos de la
web. En este caso muestra un mensaje de bienvenida a la web, que har las veces de
portada.

<html>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br/>
<br/>
Aqu encontraras muchos de los proyectos que hemos
desarrollado en la Universidad Tecnolgica de Honduras
y que estn disponibles para que los puedas descargar.
<br/>
<br/>
No olvides que puedes hacer tus aportes envindolos a
estudiante@uth.hn para que los publiquemos aqu.
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

</body>
</html>
pagina3.html
En esta pgina se mostrar la barra de navegacin por los contenidos del sitio. Contiene
enlaces que deberan actualizar el contenido del rea principal de la declaracin de frames,
para mostrar los distintos contenidos del sitio, por ejemplo, la portada, los productos, la
pgina de contacto, etc.

<html>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portada</a> |
<a href="productos.html">Productos</a> |
<a href="contacto.html">Contacto</a>
</b>
</div>
</body>
</html>
El problema con este ultimo Frame (de los links) es que aun no est cargando las pginas en
el Frame del centro, eso lo aprenderemos en la pgina siguiente.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Dirigir los Enlaces a un Frame Determinado

La nica particularidad destacable en el ejemplo del captulo anterior, y en el manejo de
frames en general, se trata de que cada uno de los enlaces que colocamos en las pginas
actualizan el frame donde est colocado este enlace. Por ejemplo, si tenemos enlaces en la
parte inferior de la ventana, en el espacio correspondiente al tercer marco, actualizarn los
contenidos del tercer frame, que es donde estn situados los enlaces.
Este efecto que comentamos se puede observar en el ejemplo de la pgina de la carnicera,
tal como quedara al incluir los cdigos de las distintas pginas.
Lo lgico es que al pulsar sobre un enlace de la barra de navegacin actualicemos el frame
principal, que es donde habamos planeado colocar los contenidos, en lugar del frame
donde colocamos la barra de navegacin, que debera mantenerse fija. Para conseguir este
efecto debemos hacer un par de cosas:
1. Darle un nombre al frame que deseamos actualizar dicho nombre se indica en la
etiqueta <FRAME> de la definicin de frames. Para ello utilizamos el atributo NAME,
igualado al nombre que le queremos dar a dicho marco.
2. Dirigir los enlaces hacia ese Frame Para ello debemos colocar en el atributo target de
los enlaces -etiqueta <A>- el nombre del frame que deseamos actualizar al pulsar el
enlace.
Despus de darle un nombre al frame principal, nuestra declaracin de frames quedara de
la siguiente manera:

<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html" name="principal">
<frame src="pagina3.html">
</frameset>
Observe que al Frame correspondiente a pagina2.html le pusimos por nombre principal.
Adems, deberamos colocar el atributo target a los enlaces, tal como sigue.
<a href="pagina2.html" target="principal">Portada</a> <a href="productos.html" target="principal">Productos</a> <a href="contacto.html" target="principal">Contacto</a>

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Valores para el atributo target

Como hemos visto, con el atributo target de la etiqueta <A> podemos indicar el nombre del
frame que deseamos que actualice ese enlace. Sin embargo, no es este el nico valor que
podemos aplicarle al atributo. Tenemos algunos valores adicionales que podemos asignar a
cualquier enlace en general.
1. _blank
Para hacer que ese enlace se abra en una ventana a parte. Nuestros ejemplos en este
manual se suelen abrir en una ventana a parte, colocando este valor en el target de los
enlaces que llevan a los ejemplos.
2. _self
Se actualiza el frame donde est situado el enlace. Es el valor por defecto.
3. _parent
El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si es
que no hay un padre.
4. _top
La pgina se carga a pantalla completa, es decir, eliminando todos los frames que
pudiera haber. Este atributo es muy importante porque si colocamos en nuestra pgina
con frames un enlace a una pgina externa, se abrira en uno de los frames y se
mantendran visibles otros frames de la pgina, haciendo un efecto que suele ser poco
agradable, porque parece que estn evitando que nos escapemos.
La sintaxis de uno de estos valores de atributos colocados en un enlace sera la siguiente.
<A href="http://www.uth.hn" target="_top">Acceder a uth.hn</A>

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Anidar Frames
Ejemplo 1 sobre Frames Anidados:
Para crear estructuras de marcos en las que se mezclen las filas y las columnas debemos
anidar etiquetas <FRAMESET>. Empezando por la particin de frames ms general,
debemos colocar dentro las particiones de frames ms pequeas. La manera de indicar esto
se puede ver fcilmente con un ejemplo:

Los pasos para definir la anidacin se pueden encontrar a la derecha. Los

distintos frames vienen numerados con el orden en el que se escriben en el
cdigo.

En la imagen se puede ver el resultado final acompaada de la representacin sobre la

manera de definirlos. En primer lugar definimos una estructura de frames en dos columnas
y dentro de la primera columna colocamos otra particin de frames en dos filas. El cdigo
necesario es el siguiente:
<frameset cols="200,*">
<frameset rows="170,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
<frame src="pagina3.html">
</frameset>

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Ejemplo 2 sobre Frames Anidados:

El ejemplo anterior se puede complicar un poco ms si incluimos ms particiones. Vamos a
ver algo un poco ms complicado para practicar ms con las anidaciones de frames:

Los pasos para definir la anidacin se pueden encontrar a la derecha. Los

distintos frames vienen numerados con el orden en el que se escriben en el
cdigo.

En la imagen se observa que el primer frameset a definir se compone de dos filas.

Posteriormente, dentro de la segunda fila del primer frameset, tenemos otra particin en
dos columnas, dentro de las que colocamos un tercer nivel de frameset con una defincin
en filas en los dos casos. El cdigo se puede ver a continuacin:
<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="200,*">
<frameset rows="*,150">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<frameset rows="*,60">
<frame src="pagina4.html">
<frame src="pagina5.html">
</frameset>
</frameset>
</frameset>

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Atributos Avanzados del Tag FRAME

Aparte de la creacin de los marcos propiamente dicha, existen muchos
atributos con los que configurar su apariencia. Para ello, tanto la etiqueta
<frameset> como <frame> admiten diversos atributos que permiten especificar
la forma de elementos como los bordes de los frames, el margen, la existencia o
no de barras de desplazamiento, etc.
Atributos para la etiqueta FRAMESET
Ya hemos conocido el atributo cols y rows, que sirven para indicar si la distribucin en
marcos se har horizontalmente o verticalmente. Slo se puede utilizar uno de ellos y se
iguala a las dimensiones de cada uno de las divisiones, separadas por comas:
1. border="nmero de pixels"
Permite especificar de manera global para todo el frameset el nmero de pixels
que ha de tener el borde de los frames.
2. bordercolor="#rrggbb"
Con este atributo podemos modificar el color del borde de los frames, tambin de
manera global a todo el frameset. El color puede definirse en valor hexadecimal
(#FF00FF) o en valor de constante (Maroon por ejemplo.).
3. frameborder="valor"
Sirve para mostrar o no el borde del frame. Sus posibles valores son:
"yes" (para que se vean los bordes)
"no" (para que no se vean los bordes, en la prctica elimina el borde, pero
permanece una lnea de separacin de los frames.)
4. framespacing="nmero de pixels"
Para determinar la anchura de la lnea de separacin de los frames. Se puede
utilizar en Internet Explorer y junto con el atributo frameborder="0" sirve para
eliminar los bordes de los marcos.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Atributos para la etiqueta FRAME

1. src
Sirve para indicar el archivo HTML que contedr el Frame
2. name
Sirve para darle un nombre al marco y luego dirigir los enlaces hacia l a travs de los
target en los links.
3. marginwidth="nmero de pixels"
Define el nmero de pixels que tiene el margen del frame donde se indica. Este margen
se aplica a la pgina que pretendemos ver en ese marco, de modo que si colocamos 0,
los contenidos de la pgina en ese marco estarn pegados por completo al borde del
margen y si indicamos un valor de 10, los contenidos de la pgina estaran separados del
borde en 10 pixels.
4. marginheight="nmero de pixels"
Lo mismo que el anterior atributo, pero para el margen vertical.
5. scrolling="valor"
Sirve para indicar si queremos que haya barras de desplazamiento en los distintos
marcos. Sus posibles valores son:
"yes" siempre saldrn las barras de desplazamiento
"no" no saldrn nunca
"auto" saldrn slo si son necesarias (cuando el contenido de la pgina en el
FRAME es mas grande que la pantalla del navegador)
Auto es el valor por defecto.
Consejo: hay que tener cuidado si eliminamos los bordes de los
frames, puesto que la pgina web puede tener dimensiones distintas
dependiendo de la definicin de pantalla del visitante. Si el espacio de
la ventana se ve reducido, podra verse reducido el espacio para el
frame y puede que no quepan los elementos que antes si que caban y
si hemos eliminado las barras de desplazamiento puede que el
visitante no pueda ver todo el contenido del marco.
Este mismo consejo se puede aplicar al redimensionamiento de
frames, que veremos en el siguiente atributo. Si hacemos que los
marcos no sean redimensionables probablemente tengamos una
Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

declaracin de frames demasiado rgida, que puede verse mal en

algn tipo de pantalla.
6. noresize
Este atributo no tiene valores, simplemente se pone o no se pone. En caso de
que est presente indica que el Frame no se puede redimensionar. Como hemos
podido ver, al colocar el ratn sobre el borde de los marcos sale un cursor que
nos seala que podemos mover dicho borde y redimensionar as los frames. Por
defecto, si no colocamos nada, los marcos si se pueden redimensionar.
7. frameborder="valor"
Este atributo permite controlar la aparicin de los bordes de los frames. Los
posibles valores son:
"yes" siempre saldrn los bordes del FRAME
"no" no saldrn bordes en el FRAME
8. bordercolor="#rrggbb"
Permite especificar el color del borde del marco.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

Ejemplo de un FRAME sin Bordes

El siguiente ejemplo muestra como crear una pgina WEB basada en Frames pero sin
mostrar los molestos bordes entre cada Frame:

<html>
<head>
<title>Definicin de Frames</title>
</head>
<frameset cols="200,*" border="0" frameborder="0" framespacing="0">
<frameset rows="170,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
<frame src="pagina3.html">
</frameset>
</html>

Ventajas y Desventajas del Uso de Frames

El diseo con frames es un asunto bastante controvertido, ya que distintos diseadores
tendrn unas u otras opiniones, a continuacin se numera ventajas y desventajas sobre el
uso de los mismos:

Ventajas de usar frames

1. La navegacin de la pgina ser ms rpida. Aunque la primera carga de la pgina sera
igual, en sucesivas impresiones de pginas ya tendremos algunos marcos guardados,
que no tendran que volverse a descargar.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)

2. Crear pginas del sitio sera ms rpido. Como no tenemos que incluir partes de cdigo
como la barra de navegacin, ttulo, etc. crear nuevas pginas sera un proceso mucho
ms rpido.
3. Partes de la pgina (como la barra de navegacin) se mantienen fijas y eso puede ser
bueno, para que el usuario no las pierda nunca de vista.
4. Estas mismas partes visibles constantemente, si contienen enlaces, pueden servir muy
bien para mejorar la navegacin por el sitio.
5. Mantienen una identidad del sitio donde se navega, pues los elementos fijos conservan
la imagen siempre visible.

Desventajas de usar frames

1. Quitan espacio en la pantalla. El espacio ocupado por los frames fijos se pierde a la hora
de hacer pginas nuevas, porque ya est utilizado. (por ejemplo cuando desarrollen para
telfonos celulares)
2. Fuerzan al visitante a entrar por la declaracin de frames. Si no lo hacen as, slo se vera
una pgina interior sin los recuadros. Estos recuadros podran ser insuficientes para una
buena navegacin por los contenidos y podran no conservar una buena imagen
corporativa.
3. La promocin de la pgina sera, en principio, ms limitada. Esto es debido a que slo se
debera promocionar la portada, pues si se promocionan pginas interiores, podra darse
en caso de que los visitantes entrasen por ellas en lugar de por la portada, crendose el
problema descrito en el punto anterior.
4. A mucha gente les disgustan pues no se sienten libres en la navegacin, pues entienden
que esas partes fijas estn limitando su movilidad por la web. Este efecto se hace ms
patente si la pgina con frames tiene enlaces a otras pginas web fuera del sitio y, al
pulsar un enlace, se muestra la pgina nueva con los marcos de la pgina que tiene
frames.
5. Algunos navegadores no los soportan. Esto no es muy habitual, pero si estamos
haciendo una pgina que queramos que sea totalmente accesible deberamos
considerarlo importante.
6. Los bookmarks o favoritos no funcionan correctamente en muchos casos. Si queremos
incluir un favorito a una pgina de un frame que no sea la portada podemos encontrar
problemas.
7. Puede que el botn de atrs del navegador no se comporte como deseamos.
8. Si quieres actualizar ms de un frame con la pulsacin de un enlace debers utilizar
Javascript. Adems los scripts se pueden complicar bastante cuando se tienen que
comunicar varios frames entre si.

Material facilitado por Ing. Gerardo Josu Portillo (gerardo.portillo@uth.hn)