4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
86<br />
A queste “scatole”, quindi si possono attribuire posizione e dimensioni a piacere. Ad esempio<br />
possiamo determinare se l'elemento è visib<strong>il</strong>e o meno e di che tipo è con la proprietà “display”<br />
(che può assumere i valori: none, block, inline).<br />
Possiamo posizionare poi i blocchi in maniera arbitraria, ut<strong>il</strong>izzando la proprietà<br />
“position:tipo”, seguita dallo spostamento nelle due direzioni indicato dalle proprietà<br />
top:valore, left:valore, bottom:valore o right:valore che indicherà una<br />
distanza (valore) espressa usualmente in pixel o <strong>per</strong>centuale dall'alto, sinistra, basso o destra<br />
rispetto alla posizione di riferimento. Questa posizione di riferimento dipenderà dal tipo di<br />
posizionamento richiesto: position:absolute; sistemerà <strong>il</strong> blocco alla distanza<br />
indicata dal punto in alto a sinistra dell'interfaccia, position:relative; sistemerà <strong>il</strong><br />
blocco alla distanza indicata dal punto in cui sarebbe stato visualizzato se non ci fosse stata<br />
indicazione di posizionamento, cioè alla posizione corrente del flusso di decodifica del codice<br />
HTML.<br />
Anche le dimensioni (proprietà width ed height) possono essere scelte a piacimento,<br />
indicate o in valore assoluto (con le differenti unità di misura ut<strong>il</strong>izzab<strong>il</strong>i) o in <strong>per</strong>centuale, l'uso<br />
di valori <strong>per</strong>centuali <strong>per</strong> posizione e dimensione consente di creare i cosiddetti layout “liquidi”<br />
in cui tutte le componenti vengono scalate in proporzione quando si ridimensiona la finestra.<br />
4.12 Regole di st<strong>il</strong>e, ereditarietà, cascata<br />
Abbiamo visto che <strong>il</strong> documento (X)HTML definisce una struttura gerarchica, dove gli elementi<br />
che includono altri elementi sono in rapporto padre-figlio con questi (es. un paragrafo che<br />
include un testo in grassetto, una sezione che include titoli, eccetera). Come si<br />
comportano le regole di st<strong>il</strong>e in relazione a queste “discendenze”?. Dipende dalle proprietà.<br />
Alcune di esse sono ereditate dal genitore, altre no. Di massima non sono ereditarie quelle che<br />
gestiscono la formattazione del “box” dell'elemento (bordi, sfondo, ecc.). Mentre lo sono, ad<br />
esempio, quelle relative al testo. Se <strong>il</strong> colore del testo è definito a livello di di colore<br />
rosso con la regola body {color:red;}, allora anche le sottoparti, se non sono inserite<br />
altre regole più specifiche <strong>per</strong> esse, avranno <strong>il</strong> testo di colore rosso.<br />
Per attribuire <strong>il</strong> corretto st<strong>il</strong>e a ciascun elemento di un documento complesso, <strong>il</strong> browser deve<br />
svolgere un processo non banale. L'interprete del markup deve trovare i valori <strong>per</strong> le proprietà<br />
di st<strong>il</strong>e (es. famiglia, dimensioni e st<strong>il</strong>e dei caratteri, colore del testo, ecc.) di ogni elemento. Per<br />
fare questo viene ut<strong>il</strong>izzato <strong>il</strong> cosiddetto meccanismo della cascata (di qui <strong>il</strong> nome “fogli di st<strong>il</strong>e<br />
a cascata”). Esso ordina in base alla loro specificità le diverse regole attribuite a ciascun<br />
elemento (tale specificità dipende, ad esempio, dall'ordine di caricamento dei fogli di st<strong>il</strong>e che<br />
contengono le regole), e determina quale applicare. Se nessuna regola specifica è disponib<strong>il</strong>e,<br />
viene verificata l'ereditarietà. Per le proprietà non ereditate si usano i valori predefiniti. Anche<br />
qui rimandiamo ai numerosi tutorial online o manuali <strong>per</strong> approfondimenti pratici e dettagli<br />
(vedi sitografia).<br />
4.13 Intermezzo pratico: creare un documento HTML<br />
Visto che le informazioni contenute nei precedenti capitoli dovrebbero mettere teoricamente in<br />
grado <strong>il</strong> lettore di realizzare le proprie pagine <strong>web</strong>, cerchiamo anche di dare qualche piccolo<br />
consiglio <strong>per</strong> creare praticamente i propri i<strong>per</strong>testi. Dato che un documento HTML è un<br />
semplice f<strong>il</strong>e di testo, <strong>per</strong> crearlo è sufficiente un qualsiasi programma di text editing (p.es.