CREARE SITI:dimensioni relative e assolute

TORNA INDIETRO

Abbiamo cominciato a gestire lo spazio mediante il ricorso all'elemento divisione. Ogni divisione ha le sue dimensioni. Queste però non sempre vengono prestabilite. Se nell'elemento di stile che definisce una divisione non vengono precisate le dimensioni orizzontale e verticale della divisione, questa tenderà a occupare tutto lo spazio orizzontale possibile, fino al massimo consentito dal box che contiene la divisione.
Facciamo un esempio.
Scriviamo con blocco note il semplice codice riportato in figura



Il codice definisce una divisione (indicata come class="contenitore") che ne contiene due (class="testo"). Per poterle ben distinguere le abbiamo distanziate con interlinee (<br />), inseriti prima, dopo e tra le due divisioni di testo. Questo è un volgare trucco da non usare mai: vedremo successivamente come distanziare i bordi dei vari box, sia verticlmente che orizzontalmente.
Il risultato di questo codice è riportato in figura:

Si osservi come le divisioni interne (quelle gialle), le cui dimensioni non sono definite, occupino tutto lo spazio orizzontale consentito, mentre invece verticalmente si sviluppano quel tanto che basta a contenere il testo.
Della divisione contenitore (il box verde) è definita solo la larghezza (width: 300px;), che quindi è assoluta, mentre l'altezza non è definita (e diremo che è relativa).

Vedremo nella prossima puntata come controllare la posizione dei box.

***

INDICE

CREARE SITI:gestire lo spazio

TORNA INDIETRO

Le divisioni

Ora ci interessa capire se e come poter suddividere lo spazio di una pagina. L'intera pagina è costituita dall'elemento corpo (body). Lo spazio eventualmente individuato da un elemento è detto box (scatola). Body è il box genitore e li contiene tutti e ogni box può contenerne altri, come delle scatole cinesi.

Uno degli elementi più comunemente usati per definire uno spazio (box)all'interno della pagina è l'elemento divisione, delimitato dai marcatori div e /div.

Un esempio dell'uso dell'elemento divisione lo si ha in figura:

dove si possono vedere due divisioni: la prima per il titolo, la seconda per il corpo. L'effetto è quello riportato qui sotto:

Notiamo le seguenti particolarità relative allo stile dei due box:

1. il testo del titolo è allineato al centro (text-align: center;), il colore di sfondo è giallo (background-color: yellow;), il colore dei caratteri è rosso (color: red;)
   
2. lo sfondo del secondo box è rosa
   
3. l'elemento p all'interno del secondo box presenta un rientro del testo sia a sinistra che a destra (padding-left: 30px; padding-right: 30px;), oltre ad essere in corsivo (italic).

Fa già una bella differenza!

Alla prossima:

***

INDICE

CREARE SITI:l'aspetto conta

TORNA INDIETRO

Un po' di stile

Diamo un'occhiata al seguente codice:

Rispetto al documento precedentemente scritto ci sono due novità

1. nell'elemento head è stato aggiunto un nuovo tipo di elemento. detto di stile, con i suoi due marcatori style e /style, al cui interno è riportata una certa informazione


2. nel primo elemento paragrafo, precisamente nel marcatore p, è stato aggiunto
   class="tit1"

Esaminiamo cosa è scritto all'interno dell'elemento di stile:

.tit1 {font-family: Arial; font-size: 16px; font-weight: bold; color: red; text-align: center; background-color: yellow;}

Si può subito notare che tit1, dopo il punto, è il valore dell'attibuto class nel marcatore dell'elemento paragrafo. Quanto indicato tra le parentesi {} si riferisce alla classe di elementi tit1. Tutti gli elementi indicati come appartenenti alla classe tit1 avranno le caratteristiche di stile riportate tra le parentesi.

Diamo uno sguardo al risultato:

Come si vede, il titolo ha cambiato notevolmente stile: tipo di carattere (font-family: Arial), dimensione (font-size: 16px, ossia 16 pixel), grassetto (font-weight: bold), colore del carattere (color: red), colore di sfondo della riga (background-color: yellow), allineamento (text-align: center).

Nel vecchio HTML, ancora accettato dai browser, molte delle informazioni di stile erano mischiate al testo, sia mediante l'uso di attributi degli elementi, che con l'uso di elementi di stile.

Adesso si tende a separare nettamente il contenuto testuale, che è compreso negli elementi contenuti nel corpo (body), dalll'informazione di stile, che è compresa nell'elemento di stile (style) , all'interno dell'intestazione (head).

Prossimamente vedremo come ordinare lo spazio della pagina.

***

INDICE