Manual de HTML

Frames en HTML

Una de las ms modernas caractersticas de HTML son los frames, que se aadieron,
tanto en Netscape Navigator como en Internet Explorer, a partir de sus versines
2.0. Los frames -que significan en castellano marcos- 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 fichero HTML
distinto.

Al principio se crearon como etiquetas propietarias del navegador Netscape y
rpidamente la potencia del recurso hizo que el uso de frames se extendiera por toda
la web. Poco tardara Internet Explorer en incluirlos, para que no se le escapase una
novedad tan popular de su competidor. Finalmente, como respuesta a la popularidad
entre los desarrolladores de los frames, el estndar HTML 4.0 incluy estas etiquetas
dentro de las permitidas.

Los frames, como decamos, nos permiten partir la ventana del navegador en
diferentes reas. Cada una de estas reas 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.

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

Un ejemplo de las reas que se pueden construir en una construccin de frames se
puede ver en las imgenes siguientes.


Para el que no haya tenido oportunidad de conocer los frames y su funcionamiento,
ofrecemos un enlace a una pgina cualquiera de Internet que los utiliza. Adems,
podemos ver uno de los ejemplos del tema de frames que simula la pgina de una
carnicera.


Frames - Explicacin bsica

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 ficheros HTML de los que venimos 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.

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 el atributo COLS o ROWS. El primero sirve para indicar una particin en
columnas y el segundo para una particin en filas.
Nota: 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 porque 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.

En la prctica podemos mezclar todos estos mtodos para definir los marcos de la
manera que deseemos, con pocentaje, 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.

Frames - Creacin de una estructura simple

Para ilustrar todo lo que venimos explicando podemos ver el ejemplo sobre cmo se
creara la definicin de frames de la imagen que podemos ver a continuacin.



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



Adems tenemos algunas consideraciones que hacer para terminar de comprender
este ejemplo:
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 carnicera pepe
sera mejor titular a la definicin de frames algo como "Carnicera Pepe, las
mejores carnes en Madrid".
La pgina que define los frames no tiene body. HTML puede arrojarnos un
error si lo incluimos.
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 especificamos una ruta para acceder al archivo
podemos colocarlo en el directorio que deseemos.
Los colores de cada uno de los frames los hemos colocado con el atributo
bgcolor colocado en la etiqueta <BODY> de cada una de las pginas que se
muestran en los marcos.

Frames - Una pgina en cada marco

Las pginas que mostraremos en cada marco son documentos HTML iguales a los
que venimos creando anteriormente. Podemos colocar cualquier elemento HTML de
los estudiados en este manual, como etiquetas de prrafo, imgenes, colores de
fondo, etc.

Cada documento, como ya hemos indicado, se escribe por separado en su propio
archivo HTML. Para el ejemplo del captulo anterior podemos definir los archivos
HTML de la siguiente manera.

pagina1.html
Es la pgina que contiene el titular de la web. Simplemente se trata de una etiqueta
<H1> de titular. La pgina tiene su propio ttulo, con la etiqueta <TITLE>, que no
se podr visualizar por ningn sitio a no ser que se muestre esta pgina sin los
frames, ya que las pginas dentro de los marcos heredan el ttulo de la definicin de
los frames.

<html>
<head>
<title>Titulo Carnicera Pepe</title>
</head>

<body bgcolor="#DECC09">
<h1 align=center>Carnicera PEPE</h1>
</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>
<head>
<title>Portada de Carnicera PEPE</title>
</head>

<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br>
<br>
La carnicera PEPE, con ms de 100 aos de experiencia, es la mejor fuente de carnes
de vacuno y cerdo de la comunidad.
<br>
<br>
Tanto en invierno como en verano puede encontrar nuestras ofertas de temporada
de primera calidad.
</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>
<head>
<title>Barra de navegacin de carnicera PEPE</title>
</head>

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


Frames - Dirigir los enlaces

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>

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>


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.
_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.
_self
Se actualiza el frame donde est situado el enlace. Es el valor por defecto.
_parent
El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si
es que no hay un padre.
_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.guiarte.com" target="_top">Acceder a guiarte.com</A>


Frames - Anidar frames

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 parcicin 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>

Nota: hemos colocado un margen en cada una de las lneas de esta definicin de
frames para conseguir un cdigo ms entendible visualmente. Estos mrgenes no
son en absoluto necesarios, simplemente nos sirven para ver en qu nivel de
anidacin nos encontramos.

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>


Hasta aqu hemos visto la parte ms bsica de la creacin de frames. En los
siguientes captulos podremos aprender a configurar los marcos para variar su
apariencia y, entre otras cosas, eliminar las barras que separan cada uno de los
distintos frames.



Frames - Atributos avanzados

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.

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.

bordercolor="#rrggbb"
Con este atributo podemos modificar el color del borde de los frames, tambin de
manera global a todo el frameset.

frameborder="yes|no|0"
Sirve para mostrar o no el borde del frame. Sus posibles valores son "yes" (para que
se vean los bordes) y "no" o "0" (para que no se vean). En la prctica elimina el
borde, pero permanece una lnea de separacin de los frames.

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.

Atributos para la etiqueta <frame>

Para esta etiqueta hemos sealado en captulos anteriores los atributos src, que sirve
para indicar el archivo que contiene el marco y name, para darle un nombre al marco
y luego dirigir los enlaces hacia el. Veamos ahora otros atributos disponibles.

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 del 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 10 pixels.

marginheight="nmero de pixels"
Lo mismo que el anterior atributo, pero para el margen vertical.

scrolling="yes|no|auto"
Sirve para indicar si queremos que haya barras de desplazamiento en los distintos
marcos. Si indicamos "yes" siempre saldrn las barras, si indicamos "no" no saldrn
nunca y si colocamos "auto" saldrn slo si son necesarias. 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 declaracin de frames demasiado rgida, que puede
verse mal en algn tipo de pantalla.

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.

frameborder="yes|no|0"
Este atributo permite controlar la aparicin de los bordes de los frames. Con este
atributo igualado a "0" o "no" los bordes se eliminan. Sin embargo, quedan los feos
mrgenes en el borde. Por lo que hemos podido comprobar funciona mejor en
Netscape que en Internet Explorer. De todos modos, tenemos una nota un poco ms
adelante para explicar los frames sin bordes.
Nota: los atributos de frames no funcionan siempre bien en todos los navegadores.
Es recomendable que hagamos un test sobre lo que estamos diseando en varios
navegadores para comprobar que nuestros frames se ven bien en todas las
plataformas.

bordercolor="#rrggbb"
Permite especicicar el color del borde del marco.



Ventajas e inconvenientes del uso de frames

El diseo con frames es un asunto bastante controvertido, ya que distintos
diseadores tendrn unas u otras opiniones.
En mi caso, pienso que es preferible no utilizarlos, aunque eso depende del tipo de
sitio web que ests construyendo, ya que en algunos casos s que sera muy
adecuado su uso.
Voy a colocar unas ventajas e inconvenientes del uso de marcos (frames). Siempre
es a mi entender, otros pueden tener otras opiniones.
Ventajas de usar frames
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.
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.
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.
Estas mismas partes visibles constantemente, si contienen enlaces,
pueden servir muy bien para mejorar la navegacin por el sitio.
Mantienen una identidad del sitio donde se navega, pues los elementos
fijos conservan la imagen siempre visible.
Inconvenientes de usar frames
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. En
definiciones de pantalla pequea o dispositivos como Palms, este problema
se hace ms patente.
Fuerzan al visitante a entrar por la declaracin de frames. Si no lo hacen as,
slo se vera una pgina interior sin los recudros. Estos recuadros podran
ser insuficientes para una buena navegacin por los contenidos y podran no
conservar una buena imagen corporativa.
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, creandose el problema descrito
en el punto anterior.
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.
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.
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.
Puede que el botn de atrs del navegador no se comporte como deseamos.
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.
Conclusin
El trabajo con frames puede ser ms bueno o ms malo dependiendo de las
caractersticas de la pgina a desarrollar, es tu tarea saber si en tu caso debes
utilizarlos o no.