logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Il box model

Nella lezione sulla classificazione degli elementi abbiamo visto che una pagina Xhtml, non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fà differenza. Tutto l'insieme di regole che gestisce l'aspetto degli elementi blocco, viene in genere riferito al cosiddetto box model, che è una delle cose più importanti introdotte con i CSS. Il box model permette di creare un layout fatto di rettangoli o di quadrati, di colonne e righe con o senza il bordo, e di impaginare i nostri dati, che possono essere testo, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina web.

Partendo dall'interno del box model troviamo:

Nel box model, le proprietÓ width ed height sono rispettivamente larghezza ed altezza dei contenuti che possono essere inseriti all'interno del contenitore: nell'es. sottostante ne possiamo notare tutte le caratteristiche.

il_box_model

In quest'altra immagine vediamo ancora meglio il box model come viene impostato. Larghezza, altezza dei contenuti, padding, dimensioni e stile del bordo, margini ecc. Ricapitoliamo: il padding Ŕ lo spazio fra i contenuti e il bordo, mentre il margine Ŕ lo spazio fra il bordo e gli altri contenuti della pagina, con la proprietÓ width invece, si specifica la larghezza del box, ma si vuole indicare precisamente la larghezza dell'area che conterrà il testo del box.

il_box_model

Purtroppo Internet Explorer 5 per Windows non ha una interpretazione corretta del box model. Questo browser, considera la larghezza specificata con width, come la larghezza del box fino al bordo. Bordo e padding vengono scalati dalla larghezza specificata, come è indicato nell'immagine successiva.

il_box_model

Quindi margini, padding e bordi devono considerarsi a tutti gli effetti parte dell'area complessiva dell'elemento. Questo esempio chiarisce anche visivamente questo aspetto però attenzione, se visualizziamo questa pagina con Explorer 5.5 su Windows non vedremo la cosa giusta, perchè come abbiamo detto poco fà, interpreta male il concetto di larghezza. Di questo problema ne parleremo meglio nella lezione dedicata alla proprietà width.

Se non si imposta alcun valore per la proprietè width o se il valore usato è auto, la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box. Vediamo l'esempio

Il valore auto pu˛ esser applicato solo a: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra. Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

Per finire, vediamo due box adiacenti in senso verticale, e notiamo come si comportano con i margini in questo esempio.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice