Il tag DIV

Il tag <div> definisce semplicemente una qualunque sezione, parte o divisione del documento, ma, a differenza di altri tag specifici, come quelli per i paragrafi, le tabelle o le intestazioni, non ha una sua precisa caratteristica e, se non diamo alla divisione uno stile specifico, non ci accorgiamo nemmeno che nel documento c'è una divisione.

div.esempio1 {margin:10px; padding:5px;
    background-image:url(image/reticpiccolo.gif);
    text-align: left; height:50px;
    width: 300px; color: #666633; font-family: Arial;}

div.esempio2 {width: 200px; padding:20px;
      background-color:blue;
      text-align: center;
      color: white; font-family: lucida console;} 

Se nel codice css si scrive semplicemente .esempio1 o .esempio2 (invece di div.esempio1 o div.esempio2) la classe di stile si può applicare anche ad altri elementi della pagina (per esempio paragrafi o caselle di una tabella).

Qualche informazione in più su alcune proprietà di stile:

• La proprietà margin definisce lo spazio intorno alla divisione.
• La proprietà padding (già vista per le tabelle) definisce lo spazio tra il bordo e il contenuto della divisione.
• La proprietà height definisce l'altezza della divisione.
• La proprietà width definisce la larghezza della divisione.

Se vuoi saperne di più

L'attributo id (come identifier)

In una pagina possono esserci più divisioni della stessa classe: per esempio più di una divisione di classe esempio1 o di classe esempio2.
Al contrario di class, l'attributo id, caratterizza una particolare divisione unica nella pagina web.

Osservate la divisione con sfondo rosso che vedete posizionata in un punto preciso della pagina. Essa è stata definita nel modo seguente:

#esempio3 { position:absolute; left:800px; top:800px;
            background-color:red; padding:5px;
            height:100px; width: 100px;}

Nota che nel codice css il simbolo # caratterizza l'identificatore.

La posizione della divisione nella pagina web è stata fissata con la proprietà position, accompagnata da left (quanti pixel devono esserci a sinistra) e da top (quanti pixel devono esserci sopra).

Questa proprietà non è molto facile da gestire perché non tutti i browser la interpretano nello stesso modo.
E' meglio fare delle prove e verificare cosa si vede con browser diversi.

Perché nella pagina dovrebbero esserci elementi unici? Non certo per appendere qua e là divisioni stravaganti e disordinate.
Una pagina bene organizzata dovrebbe essere progettata con carta e matita prima di mettersi a editare del codice. La pagina dovrebbe avere delle sezioni o divisioni specifiche che guidino l'utente nella navigazione.

Ecco le divisioni fondamentali del body di una tipica pagina web: Una testata dove mettere il titolo della pagina o il logo del sito. Un menu per la navigazione tra le pagine del sito. Un contenuto che dovrebbe avere la maggior parte dello spazio a disposizione. Un piede per gli autori del sito o per gli indirizzi email. (Scusate, ho trovato un'immagine in cui le divisioni del body sono solo 3!)

Ecco un esempio di organizzazione della pagina web (sezione body):

 
body  {font-family:Verdana; background-color:white; color:blue}
#testata { margin:10px; background-color:#ff9933; width: 100%;
           text-align: center; height:80px; }
#menu {background-color:yellow; padding:10px; width: 100%;
       text-align: center; height:20px;}
#contenuto  { margin: 10px; background-color:white; 
              width: 100%; text-align: left; } 
#piede  { background-color:#ccffff;  width: 100%;
          text-align: right; height:40px;	 } 

Attenzione!! E' abbastanza semplice dividere la pagina in sezioni orizzontali, ma c'è qualche problema per dividerla in sezioni verticali! Qualche browser può ancora interpretare il codice css in un modo differente!