Manual de HTML - Frames

14. Frames

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante. Aunque no está incluido en el actual estándar HTML 3.2, está previsto que lo esté en el próximo (Cougar).

Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.

Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una página con dos frames. El de la izquierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presentación. Se podrá acceder también aquí a la página personal creada en los capítulos anteriores (mipag13.html), si se pulsa un enlace en el frame de la izquierda.

Documento de definición de los frames

Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas.

En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas).

Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante.

Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html).

Todo lo anterior se refleja en el siguiente documento HTML:

<HTML> 
<HEAD> 
<TITLE>
Mi pagina con frames</TITLE> 
</HEAD> 
<FRAMESET COLS="20%, 80%"> 
<FRAME SRC="mipagind.html"> 
<FRAME SRC="mipagpre.html" NAME="principal"> 
</FRAMESET> 
</HTML>

Obsérvese lo siguiente:

A este documento le vamos a llamar mipagina.html, pero todavía no lo vamos a guardar, pues falta por añadir algo que veremos más adelante.

Documentos HTML de cada frame

Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuérdese que son como páginas independientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos y que hemos aprendido hasta ahora.

Documento del frame de la izquierda

Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Además, como muestra de que se puede añadir cualquier cosa en un frame, vamos a incluir este logo animado (glogoan2.gif):

<HTML> 
<HEAD> 
<TITLE> Indice </TITLE> 
</HEAD> 
<BODY BGCOLOR="#FFBB00"> 
<P><A HREF="mipagpre.html" TARGET="principal"> Presentación </A> 
<P><A HREF="mipag13.html" TARGET="principal"> Mi página </A> 
<P><IMG SRC="glogoan2.gif"> 
</BODY> 
</HTML>

Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definición de los frames.

En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a cargar los documentos HTML.

Guardamos este documento con el nombre de mipagind.html. Además, capturamos la imagen glogoan2.gif, y la guardamos junto con el documento.

Documento del frame de la derecha

Va a tener un fondo negro, y va a contener solamente un texto. En capítulos posteriores se irán añadiendo aquí más cosas.

<HTML> 
<HEAD> 
<TITLE> Presentacion </TITLE> 
</HEAD> 
<BODY BGCOLOR="#000000" TEXT="#0000FF"> 
<CENTER> 
<FONT SIZE=+3><STRONG> 
<P>ESTA ES LA VERSION 
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT> 
<BR>DE MI PAGINA 
</STRONG> 
</FONT> 
</CENTER> 
</BODY> 
</HTML>

Guardamos este documento con el nombre de mipagpre.html

Alternativa para los navegadores que no soportan frames

Con lo visto anteriormente, ya tenemos las tres piezas que necesitamos:

En teoría no necesitamos nada más. Sólo queda un detalle: ¿Qué ocurriría con los navegadores que no soportan los frames? Pues que al desconocer las etiquetas FRAMESET y FRAME del documento de definición, no podría ejecutarlo y no podría cargar la página.

Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se colocan a continuación de las distintas etiquetas <FRAME>, quedando la estructura de esta manera:

<HTML>
    <FRAMESET ....>
        <FRAME .....>
        <FRAME .....>
        <NOFRAMES>
           <BODY>
          
[Aquí va lo que queremos que vean los usuarios con navegadores que no soportan frames]
           </BODY>
        </NOFRAMES>
    </FRAMESET>
</HTML>

Obsérvese que dentro de la etiqueta <NOFRAMES> se han colocado las etiquetas <BODY> y </BODY>, pero téngase en cuenta que esto es sólo para esa página de advertencia.

En nuestro caso, vamos a poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace normal, hacia la página mipag13.html. (También podríamos no decir nada sobre frames, y colocar aquí el código de la página de presentación, pero añadiendo un enlace a mipag13.html, para que se pueda pasar de página)

<NOFRAMES> 
<BODY>
Estas utilizando un navegador que no soporta frames. 
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>. 
</BODY>
</NOFRAMES>

Lo incluimos dentro del documento de definición de los frames, que hemos visto antes, y que queda de esta manera:

<HTML> 
<HEAD> 
<TITLE>
Mi pagina con frames</TITLE> 
</HEAD> 
<FRAMESET COLS="20%, 80%"> 
<FRAME SRC="mipagind.html"> 
<FRAME SRC="mipagpre.html" NAME="principal"> 
<NOFRAMES> 
<BODY>
Estas utilizando un navegador que no soporta frames. 
<P>
Pulsa para visitar mi <A HREF="mipag13.html"> página</A>. 
</BODY>
</NOFRAMES> 
</FRAMESET> 
</HTML>

Ahora sí podemos guardar este documento con el nombre de mipagina.html.

Si lo cargamos, este es el resultado con frames (para los navegadores que los soportan). Se puede comprobar cómo cambiamos de página en el frame de la derecha, según el enlace que pulsemos en el frame de la izquierda.

Los que no los soportan verían esto otro (Está forzado para que lo vean todos los navegadores, incluso los que soportan frames).

Con este ejemplo práctico hemos aprendido la estructura básica de los frames, pero no hemos utilizado todas sus posibilidades. A continuación se detallan los distintos atributos que se pueden añadir a las etiquetas.

Atributos de la etiqueta <FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

<FRAMESET COLS="xx, yy, zz, .."> 
<FRAMESET ROWS="xx, yy, zz, ..">

Frames sin bordes

Si se desea que no haya un borde de separación entre los frames, se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan.

Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta completa quedaría:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">

Atributos de la etiqueta <FRAME>

Esta etiqueta define las cararacterísticas de un frame concreto, no del conjunto de los frames, como era el caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>:

El atributo TARGET

En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:

TARGET="nombre_dado_a_otro_frame".

Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condición que el primer carácter sea alfanumérico (letra o número).

Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas (blank, self y top) en minúsculas.

TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.

TARGET="_self". Hace que el enlace se cargue en el propio frame.

TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados, la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro sitio del Web, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de las etiquetas de los enlaces.

Frames anidados dentro de otros frames

Hasta ahora hemos contemplado sólo la posibilidad de tener una distribución de los frames bien en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez.

Se pueden obtener distribuciones más complejas anidando filas dentro de una columna, o a la inversa, columnas dentro de una fila.

Supongamos que queremos la siguiente distribución:

Vemos que, en realidad, esto equivale a la siguiente distribución:

El documento de definición de las dos filas (olvidémonos de momento que la de abajo está subdividida), sería:

<HTML> 
<HEAD> 
<TITLE>
Pagina con dos filas</TITLE> 
</HEAD> 
<FRAMESET ROWS="15%, *"> 
<FRAME SRC="documento_fila_superior"> 
<FRAME SRC="documento_fila_inferior"> 
</FRAMESET> 
</HTML>

Como la fila inferior, en realidad, son dos columnas (con una distribución del 20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC="documento_fila_inferior"> por:

<FRAMESET COLS="20%, *"> 
<FRAME SRC="documento_columna_izqda"> 
<FRAME SRC="documento_columna_dcha"> 
</FRAMESET>

Con lo que queda el documento definitivo así:

<HTML> 
<HEAD> 
<TITLE>
Pagina con fila superior y dos columnas inferiores</TITLE> 
</HEAD> 
<FRAMESET ROWS="15%, *"> 
<FRAME SRC="documento_fila_superior"> 
<FRAMESET COLS="20%, *"> 
<FRAME SRC="documento_columna_izqda"> 
<FRAME SRC="documento_columna_dcha"> 
</FRAMESET> 
</FRAMESET> 
</HTML>

La distribución quedaría así 
(Se han omitido los distintos documentos de cada frame)


WebMaestro: http://wmaestro.com/webmaestro - © Francisco Arocena