4 Creare contenuti per il web - Andrea Giachetti

Cose da fare
Dormire
Mangiare
Pranzo
Cena
Minestra
Frutta
Creare contenuti per il web: (X)HTML e CSS in dettaglio 77
Figura 36: Esempio di pagina con elenchi puntati e numerati
Per avere un elenco numerato, basta utilizzare (ordered list) invece di . Sul
browser gli elenchi appaiono visualizzati come in Figura 36. Gli elenchi, come si vede, possono
essere annidati creando livelli gerarchici, con i livelli successivi al primo che verranno
visualizzati spostati di una tabulatura a destra e diversi punti.
La numerazione degli elenchi ordinati può essere variata con gli attributi start (che stabilisce il
numero di partenza) e value (su attribuisce un numero particolare).
Altra struttura particolare in HTML sono le tabelle. Esse sono importanti in quanto consentono
di inserire dati di tipo tabulare in modo semplice. Agli albori del web in realtà, le tabelle
venivano anche usate per creare layout di pagina, cioè disporre testo e figure nelle varie caselle
per dare una struttura spaziale al documento stesso. Oggi si sconsiglia di creare il layout in
questo modo, dato che attraverso le regole di stile è possibile posizionare arbitrariamente le
varie parti della pagina ove si vuole (questo non era possibile con gli attributi e valori del
“vecchio” HTML).
La sintassi dell'elemento table è abbastanza semplice: per creare una tabella si apre e chiude un
tag . All'interno di esso l'elemento ... serve per inserire una nuova
riga, mentre elementi ... inseriti all'interno di . Per intestazioni di
colonne al posto di si può usare . Le tabelle consentono ampie possibilità di
variazione di aspetto, anche per questo sono state e sono ancora molto usate per gestire il layout
di pagine. Gli attributi possono essere inseriti a vari livelli: sull'elemento table si possono
inserire cellspacing, che consente di inserire la distanza (in pixel) tra una cella e l’altra, oppure
tra una cella e il bordo (default 1) e cellpadding, che permette di variare la distanza tra il
contenuto della cella e il bordo, inserendo un valore in pixel o anche in percentuale.
Alcuni attributi possono invece essere inseriti sia su table, che sulle sottoparti td e tr (cioè le
righe e le semplici caselle). Essi sono, ad esempio, il valore di border (lo spessore del bordo in
pixel), width, la larghezza percentuale o assoluta (pixel) dell'elemento, align, che può assumere
i valori “left”, “center” e “right” per definire la giustificazione del testo inserito nelle caselle,
bgcolor, che consente di indicare il colore dello sfondo, bordercolor che permette di definire il
colore del bordo o anche background, che permette di inserire un'immagine di sfondo
mettendone l'url come valore assegnato all'attributo stesso. Qualche esempio di effetto
dell'inserimento di attributi con valori specifici è visualizzato in Figura 37.