Parlando di tabelle e in particolare di tabelle nascoste, abbiamo visto come sia possibile utilizzarle per posizionare gli elementi di una pagina html. In pratica si crea una specie di "griglia" formata da tabelle nascoste (e perciò invisibili) magari annidate una dentro l'altra e la si usa per ordinare la struttura della pagina:
Questo metodo di posizionamento, sebbene ancora largamente diffuso, è attualmente sconsigliato in quanto fa un uso improprio dell'elemento TABLE. Inoltre la sua utilità è stata superata dall'avvento dei fogli stile CSS, i quali consentono un posizionamento molto più preciso e raffinato di quello offerto dalle semplici tabelle nascoste.
Abbiamo già accennato alla distinzione esistente fra elementi di blocco ed elementi inline. In quella sede abbiamo detto che gli elementi di blocco sono quelli che creano un blocco separato dal resto del documento (es. paragrafi, liste, tabelle), mentre gli elementi inline si inseriscono all'interno della pagina senza separazioni (es. link, immagini, grassetti etc.).
Approfondendo ora ulteriormente l'argomento, possiamo dire che gli elementi di blocco (block level element) hanno le seguenti proprietà:
- Un elemento di blocco può contenere altri elementi block-level e elementi inline
- Ad un elemento di blocco si possono attribuire delle dimensioni.
- Un elemento di blocco di dimensioni non specificate occupa tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto
Per quanto riguarda invece gli elementi inline abbiamo:
- Un elemento inline può contenere solo altri elementi inline, ma non elementi di blocco.
- Ad un elemento inline non si possono attribuire delle dimensioni.
- Un elemento inline occuperà sia in orizzontale che in verticale l’altezza necessaria al suo contenuto
Facciamo un semplice esempio per capire la differenza di comportamento fra i due tipi di elementi. Si consideri il codice seguente:
<tr>
<td>
<p>Primo paragrafo: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p style="width:30%">Secondo paragrafo: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</td>
</tr>
<tr>
<td>
<p>Paragrafo contenente al proprio interno un'immagine
<img alt="" src="../../immagini/indice.gif" width="42" height="36" />. Si osservi come l'immagine si inserisca all'interno del paragrafo senza interruzioni (elemento inline)</p>
</td>
</tr>
</table>
che produce la seguente visualizzazione:
|
Primo paragrafo: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Secondo paragrafo: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla |
|
Paragrafo contenente al proprio interno un'immagine
|
. Si osservi come l'immagine si inserisca all'interno del paragrafo senza interruzioni (elemento inline)Si noti come il primo paragrafo (elemento di blocco) utilizzi in orizzontale tutto lo spazio della tabella. Il secondo paragrafo invece ha delle dimensioni specificate e dunque occupa in orizzontale solo il 30% della tabella. Si osservi anche come l'immagine (elemento inline) si inserisce all'interno di un paragrafo.
Un elemento di blocco molto importante è l'elemento <div>. Lo abbiamo già incontrato in precedenza, ma ora vogliamo approfondirne l'uso. Diciamo che <div> consente di creare un blocco "neutro", senza nessuna altra particolare funzione a parte quella, appunto, di creare un blocco. Per essere più chiari, un blocco si può creare con un paragrafo <p>, con un header <h1>, con una lista <ol> etc etc, ma tutti questi blocchi sono connotati da una particolare funzione logica all'interno di una pagina (oltre che, in molti casi, da una particolare visualizzazione.
Invece <div> crea un blocco e basta, senza nessun altro significato. In pratica, dal punto della visualizzazione, un elemento <div> senza ulteriori specifiche viene visualizzato come un normale paragrafo. Si consideri a questo proposito il codice seguente:
<p> Questo è un altro paragrafo</p>
<div> Questo invece è un blocco realizzato con un elemento div </div>
<div> Questo è un altro blocco realizzato con un elemento div </div>
<p> Questo è ancora un paragrafo</p>
che produce questa visualizzazione:
Questo è un normale paragrafo realizzato con un elemento p.
Questo è un altro paragrafo
Questo è ancora un paragrafo
A differenza però dei paragrafi, <div> non introduce una separazione (andata a capo) fra un <div> e quello successivo (come si vede dall'esempio qui sopra). Inoltre mentre non è corretto annidare un paragrafo <p> dentro un altro <p>, un blocco <div> può benissimo contenere altri blocchi <p> al suo interno.
Usando l'elemento <div> e gli altri elementi di blocco, la struttura di una pagina può essere pensata come suddivisa in una serie di blocchi uno dentro l'altro.
Si consideri per esempio la pagina seguente, dove i singoli blocchi sono messi in evidenza con riquadri rossi:
In pratica abbiamo un blocco esterno (che contiene tutti gli altri) che corrisponde al <body> della pagina. All'interno di questo super blocco si dispongono tutti gli altri blocchi. Questa suddivisione in blocchi di una pagina viene detta modello a blocchi o a scatole (box model) della pagina.
Si osservi la figura seguente che mostra una pagina suddivisa in blocchi e sottoblocchi:
L'idea è quella di usare 4 blocchi principali (due DIV, un TABLE e un P), un blocco DIV annidato dentro un altro e due immagini IMG (elementi inline) racchiuse dentro altri elementi di blocco, allo scopo di organizzare in modo ordinato la struttura e la visualizzazione della pagina.
Il problema è che, se proviamo a realizzare una pagina html fatta così, probabilmente otterremo una visualizzazione di questo tipo:
La figura seguente mostra più chiaramente la struttura della pagina mediante l'aggiunta di margini colorati e di etichette che identificano i singoli blocchi:
Il risultato ottenuto mostra i
blocchi disposti semplicemente uno sotto l'altro e gli elementi inline
posizionati all'interno dei blocchi. Questo tipo di posizionamento, che
segue la naturale distribuzione degli elementi nella pagina, è detto statico
(static) ed è quello che viene usato per default, cioè in automatico.
Ovvero: per disporre i blocchi all'interno di una pagina in modo un po' più
creativo bisogna utilizzare in modo più sofisticato le funzioni di
posizionamento offerte dagli stili. E questo è appunto l'argomento che
affronteremo nelle prossime lezioni.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
