Los frames

Los frames es la herramienta que el HTML pone a nuestra disposición para presentar varias páginas en una sola. Veamos como se hace esto:

Lo primero que necesitamos es una página "madre" que dividiremos en viñetas (los frames propiamente dichos), y una serie de páginas "hijas", que serán las que ocupen esas viñetas. El código necesario para crear esta "página madre" es el siguiente:

<HTML> <HEAD> <TITLE>Página con frames</TITLE> </HEAD>

<FRAMESET ROWS="40%,60%" > <FRAME SRC="rojo.html"> <FRAME SRC="verde.html"> </FRAMESET> </HTML>

Como primera cosa curiosa vemos que nuestro viejo amigo <BODY>...</BODY> ya no está por aquí, así que no vayas a equivocarte y ponerlo.

Para crear los frames usamos la sentencia <FRAMESET>...</FRAMESET>, este tag tiene dos opciones que son mutuamente excluyentes (o sea, que solo puedes usar una de las dos) que son:

ROWS crea tantos frames como números separados entre comas hayas puesto, distribuyendolos de forma vertical.

Los números separa dos entre comas indican la parte proporcional de la ventana que utilizará cada frame, se puede representar de varias formas (Lo siguiente vale tanto para COLS como para ROWS):

ROWS="1*,2*,4*" Esto crearía tres frames, de modo que el tercero ocupara el doble que el segundo y el segundo el doble que el primero. (No te preocupes, el navegador se ocupa de calcular esto)

ROWS="10%,40%,50%" Esto crea otros tres frames, que ocupan el 10% el 40% y el 50% respectivamente. (Ten cuidado en ajustar que sumen 100%, o algunos navegadores pueden tener problemas)

Por último, puedes combinar los dos tipos anteriores entre sí y, además, usar un número para indicar el tamaño absoluto en pixels, y un arterisco para dar a ese frame el espacio restante:

ROWS="10,50%,*" crearía tres frames horizontales (uno encima de otro), el primero de 10 pixels, el segundo de la mitad del alto de la ventana, y el tercero ocuparía el espacio restante (que depende del tamaño total de la ventana).

Dentro de <FRAMESET>...</FRAMESET> puedes poner otra etiqueta <FRAMESET>...</FRAMESET> (Luego veremos esto) o poner directamente dos o más etiquetas <FRAME> (tantas como hayas indicado en COLS o ROWS). La directiva <FRAME> no tiene contenido ni etiqueta de cierre, y tiene las siguientes opciones:

SRC=URL Donde URL es la dirección de la página que quieres que aparezca en este frame.

NAME=nombre Donde nombre es precisamente eso, un nombre que le damos al frame. (Esto es muy útil, ya lo veremos luego)

FRAMEBORDER=número Donde número puede ser 1 ó 0, si es 1 (que es la opción por defecto) el frame tendrá borde, si es 0 no lo tendrá. (Algunos navegadores pueden reconocer otros números, indicando el grosor en pixels del borde, pero esto no es muy legal)

MARGINWIDTH=número Indica la distancia entre el ancho del contenido y el borde del frame en pixels.

NORESIZE Que no tiene ningún valor, indica al navegador que no es posible cambiar el tamaño del frame.

SCROLLING=valor Sirve para indicar si aparecerá una barra de scroll en el frame, valor puede ser uno de los siguientes: YES, que hace que la barra aparezca siempre (Aunque no sea necesaria), NO, que hace que no aparezca nunca (Aunque sí lo sea), y AUTO, (que es el valor por defecto) hace que solo aparezca si es necesaria.

Como comentabamos antes podemos anidar varios <FRAMESET>...</FRAMESET> unos dentro de otros. Con ello conseguimos crear frames y dividirlos a su vez en otros frames ¿Que no lo entiendes? Veamos un ejemplo:

<HTML> <HEAD> <TITLE>Página con frames anidados</TITLE> </HEAD>

<FRAMESET ROWS="40%,60%"> <FRAME SRC="rojo.html"> <FRAMESET COLS="50%,50%"> <FRAME SRC="verde.html"> <FRAME SRC="violeta.html"> </FRAMESET> </HTML>

Por defecto, si tú picas un link en un frame, la página a la que llamas te aparecerá dentro de ese mismo frame. ¿Como podemos cambiar esto? Pues con el atributo NAME que habíamos visto antes y con otro nuevo, el atributo TARGET del tag <A>...</A>, que no vimos en su momento, pero que vamos a ver ahora mismo. Se usa del siguiente modo:

No parece demasiado complicado. Evidentemente, el "nombre del frame donde se mostrará" es el que habías puesto en el atributo NAME de ese frame.

Pero ¿Y si pones un nombre que no corresponde a ningún frame? Pues en ese caso la página aparecerá en una NUEVA VENTANA, que llevará ese nombre (Esto puede ser muy útil ¿No te parece?)

¿Y si quiero eliminar todos los frames y que la página aparezca en la ventana principal? Pués para esta y otras posibilidades, tenemos toda una serie de nombres especiales:

TARGET=_top Hace lo que decíamos arriba: La página aparece en la ventana principal (La que contiene a todos los frames).

TARGET=_parent Hace que la página se muestre en la ventana que contiene a ese frame en concreto. Es decir, si tienes una página con frames, en uno de los cuales hay otra página con frames, y en uno de ellos tienes un link con TARGET=_parent, entonces la página a la que llames con ese link aparecerá en el frame que contenía a la segunda página con frames. Tras picar en el link tendrías una página con frames en uno de los cuales está la nueva página.(Si hubieras usado TARGET=_top tendrías solo la nueva página).

TARGET=_self Hace aparecer la página en ese mismo frame (Es la opción por defecto)

Ojo, estos nombres deben ir, necesariamente, en minúsculas y, como te puedes imaginar, no puedes usarlos para ponerselos a tus frames.

Posiblemente te estés preguntando que para qué demonios sirve el TARGET=_self si esa es precisamente la opción por defecto. Pués la solución es muy simple: Porque podemos cambiar esa opción por defecto y hacer que todos los links de una página aparezcan en un frame o página en concreto. Para ello tenemos el siguiente tag:

(En realidad <BASE> hace más cosas, pero a nosotros nos basta, por ahora, con esto.)

<BASE> no tiene contenido ni etiqueta de cierre, se coloca dentro del a cabecera (es decir, entre <HEAD> y </HEAD>) y la opción TARGET puede ser el nombre de un frame, un nombre nuevo (para una nueva ventana), o cualquiera de los nombres especiales que hemos indicado arriba.

O sea, que si en una página pones <BASE TARGET=_blank>, todos los links de esa página se abrirán en nuevas ventanas, en lugar de hacerlo en esa misma.

Si alguien visita tu página con un nvegador que no sea capaz de reconocer frames ¿Qué verá?

Es por ello que existe otra etiqueta que pueede agregarse a nuestra página de frames:

<NOFRAMES>
Lo que pongas aquí solo se verá en los navegadores que no soporten frames.
</NOFRAMES>

Los navegadores que soporten frames ignorarán el contenido de noframes, pero aquellos que no los soporten mostrarán el contenido de esta etiqueta. De este modo te aseguras de que nadie se pierda lo que tienes que decirles en tu página.

De este modo, una página con frames bién hecha tendrá una estructura parecida a la de este ejemplo:

<HTML> <HEAD> <TITLE>Página con frames anidados y NOFRAMES</TITLE> </HEAD> <FRAMESET ROWS="40%,60%"> <FRAME SRC="rojo.html"> <FRAMESET COLS="50%,50%"> <FRAME SRC="verde.html"> <FRAME SRC="violeta.html"> </FRAMESET> <NOFRAMES> <H1>INDICE</H1> <P><A HREF="rojo.html">rojo</A> <BR><A HREF="verde.html">verde</A> <BR><A HREF="violeta.html">violeta</A></P> </NOFRAMES> </HTML>

Fijate bién en que lo que hay contenido entre <NOFRAMES> y </NOFRAMES> solo se verá si el navegador no reconoce los frames. Un navegador que si los soporte mostrará la página de frames normalmente.

Algunos webmasters se limitan a poner en la sección NOFRAMES un texto del tipo de "Su navegador necesita frames para ver esta página". Esto es, además de una muestra de mal estilo de diseño, una tontería. Es mucho mejor usar la etiqueta NOFRAMES para construir un menú alternativo con el que permitir el acceso a tu página a los navegadores que no reconozcan frames.

NOFRAMES tiene, además, otro uso. Se podría poner una sección NOFRAMES en una página cualquiera, aunque no fuese de frames, de modo que su contenido solo se mostrase si esa página no aparece en un frame. D este modo se podrían poner, por ejemplo, links en cada una de las páginas, que solo se verían en un navegador que no pudiese acceder a una barra de menús en otro frame. Desafortunadamente, ningún navegador reconoce ese uso de NOFRAMES.

Y, para terminar, existe un tipo especial de frame que sirve para mostrar dentro de una página normal una ventana con otra página dentro. Lo malo es quemuy pocos navegadores la soportan (a la hora de escribir este capítulo, solo Internet explorer es capaz de reconocerlos).

<IFRAME SRC="archivo.html" NAME="nombre" HEIGHT="altura" WIDTH="ancho" MARGINWIDTH="margen ancho" MARGINHEIGHT="margen alto" FRAMEBORDER="borde" ALIGN="alineación" SCROLLING="scroll">
Contenido alternativo
</IFRAME>

Los atributos SRC y NAME funcionan exactamente igual que los que hemos visto en los frames normales.

HEIGHT y WIDTH sirven para declarar, respectivamente, el alto y el ancho de la ventana del frame. Puede ser un valor en pixels o un procentaje.

MARGINHEIGHT y MARGINWIDTH se usan para poner los márgenes entre el contenido de la ventana y su borde. El primero para los márgenes superior e inferior y el segundo para el izquierdo y el derecho.

Con FRAMEBORDER especificamos si queremos que aparezca un borde o no. Pondremos un 1 para que aparezca y un 0 para que no se vea ningún borde.

SCROLLING se usa para indicar si queremos que aparezca una barra de scroll con la que despalzar el contenido del frame. Pondremos YES para que aparezca siempre, NO para que no se muestre, y AUTO (que es la opción por defecto) para que solo se muestre si es necesaria (es decir, si el contenido del frame es más grande que la ventana.

Entre las etiquetas de apertura y cierre puedes poner un contenido alternativo, que solo se mostrará en un navegador que soporte IFRAMES.

<HTML> <HEAD> <TITLE>Página con un IFRAME</TITLE> </HEAD> <H1>Página con un IFRAME</H1> <P>Esta página tiene un IFRAME</P> <IFRAME SRC="rojo.html" HEIGHT="200" WIDTH="200" FRAMEBORDER="1"> <P>Tu navegador no soporta IFRAMES, usa el siguiente link para acceder a la página. <BR><A HREF="rojo.html">rojo</A></P> </IFRAME> </HTML>

Quizás este capítulo haya sido un poco más denso, pero en realidad no es tan dificil, solo te recomiendo que practiques un poco y hagas tus propios ejemplos. Nos vemos en la próxima entrega de este curso de Edición Extremadamente Simple de HTML.

CAPITULO 9(Los frames)

CAPITULO 9
(Los frames)