Tre metodi standard per impaginare i contenuti Web.
La costruzione di una pagina HTML equivale alla battitura di un testo con una telescrivente. Il browser costruisce la pagina leggendo in sequenza ciascuna riga, carattere per carattere. Combinando i comandi e i contenuti che trova lungo il percorso, arriva alla fine a produrre l’impianto desiderato.
Ogni cosa che si trova nella pagina è di fatto un carattere di testo che esprime un comando, indica la posizione di un’immagine e le relative dimensioni, descrive un link esterno, indica un testo da visualizzare, stabilisce la posizione dei diversi elementi. Si dice tecnicamente che ogni elemento è “inline”, vale a dire si trova inserito in una riga sequenziale e non può essere letto prima che siano stati letti gli altri caratteri che lo precedono.
Poiché nasce per visualizzare testo che fluisce in continuo, HTML non prevede alcuna funzione per “impaginare” gli elementi, ossia per collocarli in una determinata posizione nella pagina, all’interno di riquadri o colonne che abbiano proporzioni ben definite rispetto al resto. Se ci affidiamo agli strumenti base del linguaggio, l’unica forma di pagina possibile sarebbe un testo chilometrico, occasionalmente interrotto da un’immagine o da un link verso altri documenti.
Talvolta questo può anche essere sufficiente, come nei primi siti universitari e amatoriali che si sono visti sul Web. In tal caso non dovete far altro che iniziare a inserire il testo e le immagini in sequenza nella zona compresa tra il tag <body> e il suo gemello </body> che, come abbiamo detto, delimitano l’inizio e la fine del documento vero e proprio.
Nella maggior parte dei casi, però, si vuole un’impaginazione più raffinata, che divida la pagina in aree ben distinte, ciascuna con elementi propri, come ad esempio la struttura a quattro pannelli che abbiamo visto nei modelli d’impostazione della pagina. In tal caso, prima ancora di cominciare a inserire il contenuto, ci serve una struttura capace di contenerlo. Le scelte possibili sono tre: tabella, frame e form. In realtà esiste anche la possibilità di collocare gli elementi mediante le funzioni di posizionamento dei fogli di stile in cascata, CSS, ma queste ultime non sono supportate da tutti i browser e ne parleremo, più avanti, quando affronteremo il tema dei fogli di stile.
Il più diffuso e versatile dei tre sistemi sono le tabelle, perché compatibili con tutti i browser e prive di controindicazioni in materia di usabilità e di estetica. Se le configuriamo senza bordo, le tabelle diventano una specie di griglia invisibile che tiene al loro posto i vari elementi della pagina, immagini e testo. Gli unici svantaggi delle tabelle sono il non garantire l’assoluta stabilità delle dimensioni e delle proporzioni tra i componenti e la difficoltà d’implementazione.
Esempio di un'impaginazione tabellare
L'immagine che segue si riferisce a una pagina Web costruita usando una complessa griglia di tabelle nidificate che tengono al proprio posto i vari elementi.

Tabella rivelata
Qui vediamo evidenziato in modo grossolano alcune delle tabelle che compogno la pagina. Notate che esiste una tabella principale esterna che ne contiene altre che a loro volta ne contengono altre in uno schema di scatole cinesi.

Particolarità dei frame
I frame sono invece più facili da realizzare e offrono un controllo molto più rigoroso degli spazi. Tuttavia presentano importanti svantaggi di usabilità e di estetica. Dividono la finestra in diversi riquadri, ciascuno contenente una pagina Web indipendente, perciò diventa impossibile far funzionare i tasti di navigazione in avanti e all’indietro del browser. Infatti, con tre o quattro pagine contemporaneamente presenti a video, non è chiaro quale sia la pagina in cui ci troviamo esattamente e in quale dei diversi riquadri debba essere caricata quella a cui si vuole ritornare. Inoltre, anche nel definire le istruzioni di navigazione nel sito, dobbiamo sempre indicare in quale pannello inserire la pagina a cui il link è indirizzato, il che complica un poco i collegamenti ipertestuali.
In materia di stampa si può stampare un solo riquadro per volta e il browser non sa quale sia quello giusto a meno che glielo indichiamo noi usando una complessa sequenza con il tasto destro del mouse, ben poco amichevole per il navigatore comune. Infine la dimensione rigorosamente bloccata dei riquadri può anche diventare un problema quando la pagina esce dai contorni del video e diventa necessario eseguire lo scrolling verticale. In tal caso compariranno una banda di scorrimento verticale e orizzontale (a seconda della direzione in cui il contento deborda rispetto al progetto originale) che sfigurano la pagina e ne complicano l’uso.
Form per la registrazione
I form o moduli servono a formattare un particolare genere di pagina, quelle utilizzate per raccogliere informazioni dal navigatore. Hanno il tipico formato di un formulario da compilare, con una serie di caselle accompagnate dalle relative etichette esplicative, più eventuali menu a tendina da cui scegliere voci già reimpostate oppure caselle da barrare per operare scelte immediate. Sono compatibili con ogni genere di browser possono essere a loro volta incapsulati all’interno di tabelle o frame, ma non è indispensabile.
|