Apunts Pràctics HTML 4.0

Les finestres, marcs o frames són una altra forma de visualitzar les pàgines. Bàsicament consisteix en que la pantalla es divideix en dues o més finestres, verticalment o horitzontal, visualitzant cadascuna d'elles informació diferent. Un exemple típic es dividir la pantalla en 2, a l'esquerra hi anaria la pantalla del menú de continguts, i a la dreta, la pantalla d'informació del menú que hagués seleccionat l'usuari. D'aquesta forma s'aconsegueix que la pantalla de continguts o menú, sempre està visible i accesible, i la que va canviant és la pantalla de la dreta.

La realització de finestres fa servir uns elements del llenguatge HTML no oficials a la versió 3.2 però sí ja en la versió 4.0. Cada visualitzador intenta apropiar-se i deixar per a ser oficials els seus propis, tot i que són pràcticament iguals, trets d'alguns elements no compatibles entre sí.
Els elements i dissenys aquí mostrats funcionen d'igual forma amb els programes Netscape 3.0 i Internet Explorer 3.0., i amb Netscape 4.03 i Internet Explorer 4.72.

2. Definint finestres

Un document basat en FRAMES consta, a més a més de les pantalla típiques de continguts i menús, d'un document, sense continguts, però amb el disseny que es vol que tingui el conjunt de finestres. Aquest tercer document és que el fa la funció de control entre finestres.

El document que contindrà les instruccions HTML per al control de finestres, l'element BODY no existeix, i és substituit per l'element FRAMESET. Aquest element defineix el tipus de columnes i la seva grandària. La sintaxi és:

<frameset TIPUS="GRANDARIA,GRANDARIA,,," FRAMERBORDER="X" BORDER="X" BORDERCOLOR="X">

A on TIPUS pot tenir valor de ROW (per definir files) o COLS (per definir columnes). A GRANDARIA hi va el valor absolut en pixels, ó el que és més corrent, en tant per cent d'amplada de la pantalla. Per a cada finestra que es defineix, el valor va seguit del signe coma (,). A GRANDARIA també pot tenir valor *, que vol dir que la finestra agafarà el valor que queda fins arribar al 100%. No es poden definir columnes i files al mateix temps, sinó que es defineixen en 2 línies, una per cada element.

A BORDER hi va el gruix de la línia de separació de les finestres, en píxels. Valor zero equival a cap línia de separació entre finestres. Per defecte, si no es defineix BORDER, el seu valor és

A BORDERCOLOR hi va el color del BORDER, es a dir, de la línia de separació de les finestres. Per defecte és gris. El color ha de ser en format hexadecimal (#rrggbb). Aquest element també pot estar definir a una finestre concreta, dins de l'element FRAME. El color definit a FRAMESET té preferència al que hi pugui haver a FRAME.

A FRAMEBORDER hi va la definició dels BORDER de forma global de la totalitat de les finestres que hi ha a FRAMESET, i que pot tenir els valor de "no" i "yes". Per defecte, el valor és "yes".

Un cop definit el tipus i la grandaria de les finestres amb FRAMESET, cal definir el contingut de la finestra amb quin document a incloure, amb l'element FRAME. La sintaxi és:

A on a NAME hi va el nom que volguem donar a la pantalla, de forma que pugui ser referenciada per enllaços a d'altres documents. A SRC hi va l'adreça absoluta o relativa del document HTML que hi volguem visualitzar . A SCROLLING, que defineix si la finestra tindrà barres de desplaçament, amb auto fa que el visualitzador d'encarregui de quan fan falta i les hi posi, amb no, no les hi posa, i amb yes, sí les hi posa. Per defecte si no es defineix res, és auto. A NORESIZE, que va sense atributs, si s'hi posa aquest element voldrà dir que les finestres l'usuari no les podrà redimensionar. Si no s'hi posa aquest element, les finestre sí es podran redimensionar.

A títol de resum de FRAMESET i FRAME: Amb FRAMESET es defineix el tipus de columna o fila. I a continuació hi anirà la pantalla que la conté amb FRAME. Si aquesta pantalla es vol tornar a partir en finestres, tornarà a haver-hi l'element FRASEMESET.

Exemples de finestres: La primera columna hi ha una exemple gràfic de com quedarien les finestres, la segona columna hi ha el codi HTML complet i la tercera hi ha un link per a provar en el visualitzador com quedarien les finestres. Per a tornar endarrera, cal que pitjeu la tecla ENDARRERA o BACK del vostre visualitzador.
Les finestres estan fetes sense incloure NORESIZE, la qual cosa vol dir que es poden moure.

Dues columnes al 50%.

<HTML>
<HEAD>
<TITLE>Prova A </TITLE>
</HEAD>
<frameset cols="50%,50%">
<frame name="Pant1" src="pant1.htm">
<frame name="Pant2" src="pant2.htm">
</frameset>
</HTML>

Prova A

Dues files al 50%.

<HTML>
<HEAD>
<TITLE>Prova B </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name="Pant1" src="pant1.htm">
<frame name="Pant2" src="pant2.htm">
</frameset>
</HTML>

Prova B

<HTML>
<HEAD>
<TITLE>Prova C </TITLE>
</HEAD>
<frameset cols="50%,50%">
<frame name="Pant1" src="pant1.htm">
<frameset rows="50%,50%">
<frame name="Pant2" src="pant2.htm">
<frame name="Pant3" src="pant3.htm">
</frameset>
</frameset>
</HTML>

Prova C

<HTML>
<HEAD>
<TITLE>Prova D </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name="Pant1" src="pant1.htm">
<frameset cols="50%,50%">
<frame name="Pant2" src="pant2.htm">
<frame name="Pant3" src="pant3.htm">
</frameset>
</frameset>
</HTML>

Prova D

<HTML>
<HEAD>
<TITLE>Prova E </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame name="Pant1" src="pant1.htm">
<frame name="Pant2" src="pant2.htm">
</frameset>
<frameset cols="50%,50%">
<frame name="Pant3" src="pant3.htm">
<frame name="Pant4" src="pant4.htm">
</frameset>
</frameset>
</HTML>

Prova E

<HTML>
<HEAD>
<TITLE>Prova F </TITLE>
</HEAD>
<frameset rows="33%,33%,34%">
<frame name="Pant1" src="pant1.htm">
<frameset cols="50%,50%">
<frame name="Pant2" src="pant2.htm">
<frame name="Pant3" src="pant3.htm">
</frameset>
<frame name="Pant4" src="pant4.htm">
</frameset>
</HTML>

Prova F

Si el visualitzador no permet l'element FRAME, es a dir, no es poden veure finestres, tots els elements de definició de finestres de les saltarà, i no visualitzarà res. Per a evitar aquests casos, hi ha l'element NOFRAME, que els que poden visualitzar FRAMES no en fan cas, però els que no, permet posar-hi algun text i link donant informació de com visualitzar la pantalla. La sintaxi completa és:

3. Definint links entre finestres

La següent pantalla d'exemple, frame.htm, hauria de tenir la següent aparença:

La primera definició, <frameset rows="20%,80%">, defineix 2 files, 1 del 20% per a posar el títol, i la segona del 80%, que contindrà l'índex i els continguts.
A continuació, amb <frame name="titol" src="portada.htm scrolling="no" noresize>", es defineix el nom intern de la finestre, que serà titol, i l'arxiu que mostrarà, que és portada.htm, el qual conté només el títol en sí mateix. (Quatre coses sobre HTML). L'element scrolling="no" serveix per que no apreixi cap barra desplaçament, i l'element noresize serveix per a que la línia de separació de la finestre no es pugui moure de mida.

A continuació ja vindria la segona fila, però com que hi ha dues finestres a la segona fila, abans les hem de definir, amb <frameset cols="25%,75%">, a on li indiquem que la primera columna (de la segona fila) té una amplada del 25%, per a encabir-hi el menú, i la segona columna té una amplada del 75%, per a encabir-hi els continguts.
Ara ja podem definir els arxius de les 2 columnes. La primera amb <frame name="menu" src="index00.htm">, a on li diem que la primera columna té el nom intern de menu, i l'arxiu que hi va a dins és el index00.htm, que és el menú a on l'usuari pot anar visualitzant opcions. La segona columna es defineix amb <frame name="continguts" src="html1.htm">, a on el nom intern és continguts i l'arxiu d'inici que es visualitzarà és html1.htm.

Per altra banda, cal que els links de l'arxiu de menu, els que estan a la fila 2, columna 1, tinguin com a destinació la pantalla dels continguts. Això s'aconsegueix amb l'element TARGET i el nom intern de la pantalla a on la volem visualitzar. En el cas, per exemple, del link de l'opció 2, la codificació seria:
<a href="html2.htm" target="continguts">2- Estructura d'una pàgina Web</a>
Target és igual a "continguts" perquè en la definició de frame.htm li hem donat aquest nom.

TARGET="nom_de_la_finestra": Nom de la finestra a on es visualitzarà l'arxiu html. Si no existeix, n''obrirà una de nova.
TARGET=_TOP: Suprimeix totes les finestres de la pantalla i mostra l'arxiu a pantalla completa.
TARGET=_SELF: Carrega l'arxiu en la pròpia finestra que està activa.
TARGET=_PARENT: Mostra l'arxiu a la finestra definida anteriorment amb FRAMESET. Si no existeix, es mostra a pantalla completa suprimint totes les finestres.
TARGET=_BLANK: Carrega l'arxiu en una nova finestra, sense nom.

4. Una finestra a dins del mateix document

Amb aquesta opció, amb l'element IFRAME (inline frames) es pot crear una finestra en mig mateix del document. En el següent exemple, es mostra com es pot visualizar una altra pàgina, en concret la "html0.htm", que és l'índex de tots els elements, de forma activa. Aquest element pot anar a qualsevol lloc d'un document, en mig dels elements <body> i </body>.

Es defineixen 2 files	<frameset rows="30%,70%">
Es defineixen 3 columnes, la segona amb l'amplada que quedi fins arribar al 100% (que és del 20%).	<frameset cols="30%,*,50%">

9 - Finestres

1. Introducció

2. Definint finestres

3. Definint links entre finestres

4. Una finestra a dins del mateix document

*© Melcior Oliveras 1998 melcior@intercom.es*