HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni.
Un sito web deve avere uniformità di colori, di font e dimensioni dei caratteri e di struttura.
A partire dalla fine degli anni '90 si è pensato di ridurre al minimo gli attributi e i tag HTML e di dare uniformità di stile a tutte le pagine di un sito.
Un problema enorme può essere rappresentato con il seguente esempio:
Immaginiamo di aver dato a tutte le tabelle delle 100 pagine del nostro sito il colore di sfondo giallo utilizzando per tutte le tabelle di tutte la pagine del sito l'attributo bgcolor="yellow" nel tag table.
Un "brutto" giorno ci viene richiesto di dare a tutte le tabelle il colore di sfondo verde!
Il paziente programmatore dovrebbe, a questo punto, modificare tutti gli attributi bgcolor di tutte le tabelle delle 100 pagine del sito. Un lavoro incredibilmente faticoso!
th { color: white; background-color: black; text-align: left; }
.evidenza { color: red; background-color: yellow; font-size: 20pt; }Nelle pagine html potremmo utilizzare la classe .evidenza in questo modo:
... <p class="evidenza">paragrafo con caratteri molto evidenziati</p> ... ... <td class="evidenza">colonna di tabella con caratteri molto evidenziati</td> ...
#piede { position: absolute; top: 85%; left: 5%; width: 90%; height: 10%; background-color: gray; }Nella pagina HTML la sezione sarà utilizzata nel seguente modo:
... <div id="piede"> ... </div>
Il modello a scatole è oggi molto più facile da realizzare e da gestire con i fogli di stile a cascata (.css = cascade style sheet) e l'utilizzo del tag div con attributo id.
Negli anni '90 si rimediava con le tabelle ma il lavoro risultava molto lungo e dispendioso.
Nello schema del paragrafo precedente il box principale lo abbiamo chiamato cornice (1 livello).
Esso raggruppa i box alto e basso (2 livello).
Il box alto contiene i box titolo e logo (3 livello).
Il box basso contiene i box menu1, menu2, e contenuto (3 livello)
Per realizzare concretamente lo schema si procede cosė:
#cornice { position:absolute; top:5%; left:5%; width:90%; height:90%; background-color:pink; border-style:solid; border-width:1px; } #alto { position: absolute; top:1%; left:5%; width:90%; height:20%; background-color:yellow; } #logo { position:absolute; top:5%; left:80%; width:15%; height:90%; text-align:center; font-size:20pt; border-style:dashed; border-width:2px; background-color:transparent; } #titolo { position: absolute; top:25%; left:25%; width:50%; height:50%; text-align:center; font-size:20pt; background-color:white; } #basso { position: absolute; top:22%; left:5%; width:90%; height:76%; background-color:white; } #menu1 { position:absolute; top:5%; left:2%; width:25%; height:80%; background-color:#8A8AE7; } #menu2 { position:absolute; top:5%; left:28%; width:60%; height:10%; background-color:#EEFF88; } #contenuto { position:absolute; top:18%; left:28%; width:60%; height:66%; border-style:solid; border-width:1pt; background-color:#EEFFEE; overflow:auto; }
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stile.css" /> </head> <body> <div id="cornice"> <div id="alto"> <div id="logo"> </div> <div id="titolo"> </div> </div> <div id="basso"> <div id="menu1"> </div> <div id="menu2"> </div> <div id="contenuto"> </div> </div> </div> </body> </html>