I frame

Altri esercizi sulle tabelle

Esercizio 1 Scrivere una tabella con 3 righe e tre colonne con l'ultima riga avente una cella che occupa il posto di due colonne

Esercizio 2 Scrivere una tabella con 3 righe e tre colonne con l'ultima colonna avente una cella che occupa il posto di due righe.

Esercizio 3 Scrivere una tabella con 3 righe e tre colonne con l'ultima riga avente una cella che occupa il posto di due colonne e due righe.

Uso delle mappe sensibili

In HTML è possibile definire delle mappe sensibili sulla superficie di una immagine, in modo tale da assegnare un collegamento ipertestuale per ogni zona di una singola immagine.

Per definire una mappa sensibile occorre compiere alcuni passi:

Includere l'immagine, si usa il solito tag <img> in cui occorre specificare l'attributo USEMAP:
Definire la mappa usando il tag <map>:

Nell'immagine si deve specificare che si userà una mappa sensibile da sovrapporre alla immagine stessa; le si deve attribuire un nome.

Successivamente si deve definire la mappa usando il nuovo tag <MAP> che supporta l'attributo NAME con il quale si definisce il nome della mappa.

All'interno dei tag di apertura/chiusura (obbligatori!) si definiscono le aree sensibili della mappa, usando il tag <AREA> che supporta i seguenti attributi:

HREF

Definisce il collegamento ipertestuale: cliccando con il mouse su questa area, il server ritornerà il documento che ha come URL quello specificato in questo attributo.

SHAPE

è la forma dell'area sensibile; questo attributo può assumere i seguenti valori:

CIRCLE: l'area sensibile è un cerchio
RECT: l'area sensibile è un rettangolo
POLY: l'area sensibile è un poligono liberamente definito.

COORDS

Sono le coordinate che specificano le dimensioni dell'area sensibile, in relazione al tipo di forma scelto con l'attributo SHAPE:

x, y, R: sono i valori delle coordinate del centro e del raggio;
x₁, y₁, x₂, y₂: sono i valori delle coordinate del vertice in alto a sinistra e in basso a destra;
x₁, y₁, ... , x_n, y_n: sono i valori delle coordinate di ciascun vertice del poligono con n lati.

Le coordinate si intendono misurate sulla superficie dell'immagine: l'origine degli assi coincide con il vertice in alto a sinistra dell'immagine.

Esempio: nella seguente immagine (che è 167 x 250 pixel) definiamo due zone:

una superiore (167 x 125)
una inferiore (167 x 125).

Definiamo la mappa:

<map NAME="mia1"> <area coords="0,0,167,125" shape="rect" href="http://www.ferrari.it"> <area coords="0,125,167,250" shape="rect" href="http://www.adobe.com"> </map>

Mappe client e server side

Nei vecchi navigatori esisteva la possibilità di costruire delle mappe sensibili che però venivano processate dal lato server (server side).

Al click del mouse venivano inviate le coordinate relative all'immagine ad un programma che girava sul server e al quale occorreva dire com'era fatta la mappa; questo programma ritornava il link corretto. Per questo tipo di mappe occorreva specificare in <IMG> l'attributo ISMAP.

Nelle mappe dal lato client (client side maps), invece, è il browser che calcola il link in base alle coordinate del mouse al momento del click, e occorre specificare, come abbiamo visto, l'attributo USEMAP; questo è un notevole miglioramento, è per così dire, una politica "federalista" nell'uso delle risorse di rete: se è possibile, è meglio fare il maggior numero di cose in locale, sollevando il server da tutte le incombenze inutili.

I frame

Un'altra delle grosse innovazioni delle ultime versioni dell'HTML sono i frame (supportate da Netscape - ver. 2 e successive - e Internet Explorer - ver. 3 e successive -);

In pratica si tratta di documenti divisi al loro interno in sotto documenti totalmente indipendenti fra loro, i frame dividono infatti la finestra del documento in più aree logiche, contenenti files HTML, aggiornabili separatamente, permettendo perciò la creazione di documenti molto complessi e spesso molto funzionali (sempre che l'utente disponga di un browser adatto alla loro visualizzazione). Per rendere il tutto ancora più versatile, si possono includere dei FRAMESET al FRAMESET principale

I documenti contenenti frames son di un tipo un po' particolare in quanto all'interno del loro sorgente non è più presente il tag <BODY>..</BODY>, ma un sostitutivo <FRAMESET>...</FRAMESET>, il documento base si presenterà quindi così:

<HTML> <HEAD> </HEAD> <FRAMESET> ... </FRAMESET> </HTML>

All'interno del tag frameset potranno essere presenti solo questi tag: <FRAME>, <FRAMESET>, <NOFRAMES>.

Sintassi

<FRAMESET> viene personalizzato seguendo questo schema:

<FRAMESET ROWS='value' COLS='value' BORDER='value' BORDERCOLOR='#xxxxxx' FRAMEBORDER='value'>

i cui attributi corrispondono a:

ROWS è una lista di valori separati da virgole, che definiscono la dimensione delle divisioni verticali della pagina, i valori possono essere espressi in percentuale, in pixel, ed un * (detto frame relativa), che occuperà il restante spazio se la somma dei pixel non è sufficiente a coprire l'ampiezza della pagina o la somma precentuale e' inferiore a 100%;
COLS funziona come rows, ma divide la pagina in colonne;
BORDER definisce lo spessore del bordo in pixel (Solo Netscape)
BORDERCOLOR definisce il colore del bordo (Solo Netscape)
FRAMEBORDER definisce lo spessore globale per i bordi che separano i frame (Solo Netscape)

Una volta definito il frameset si inseriscono all'interno vi si definiscono le varie frame e le loro caratteristiche con il tag <FRAME>

<FRAMESET> <FRAME...> </FRAMESET>

L'esatta sintassi per il tag <FRAME> è:

<FRAME SRC="url" NAME="nome" MARGINWIDTH="value" MARGINHEIGHT="value" SCROLLING="yes-no-auto" NORESIZE FRAMEBORDER="value" FRAMESPACING="value" BORDERCOLOR="#xxxxxx">

SRC l'url del file che verrà mostrato nella frame;
NAME il nome a cui riferirsi come target se si dovesse usare un link, per aggiornare una unica frame;
MARGINWIDTH e MARGINHEIGHT è la distanza che il documento HTML contenuto nella frame avrà dai bordi della frame stessa;
SCROLLING identifica la presenza di barre di scorrimento (si, no oppure automatiche);
NORESIZE permette alla frame di non essere ridimensionabile (attraverso il trascinamento dei bordi);
FRAMEBORDER è supportato da Explorer in base al valore (0 non mostra bordi), mentre Netscape lo interprata come yes|no, Netscape inoltre lo accetta anche nel <FRAMESET>;
FRAMESPACING è accettato solo da Explorer, e definisce lo spazio in pixel che si deve trovare attorno alla frame;
BORDECOLOR è accettato solo da netscape (anche nel <FRAMESET>) e definisci il colorre del brodo della frame in base al codice esadecimale.

Dopo aver inserito le varie frames è possibile utilizzare il tag <NOFRAMES>...</NOFRAMES>, al cui interno andrà digitato il documento alternativo per quei browser che ancora non supportano i frame.

<html> <head>...</head> <frameset> <frame> <frame> ... </frameset> <noframes> <body> Questo brwoser non supporta l'estensione dei frame. </body> </noframes> </html>

Esercizio 4: pagina multiframe In questo esercizio si costruisce una pagina con un frame di navigazione a sinistra e nel frame di destra un frame superiore (per esempio destinato ad un sotto menu) e la pagina vera e propria in basso.

Copyright @ 2000-2017 Marco Barbato htttp://www.betaingegneria.it

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.