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