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.
<strong>Creare</strong> <strong>contenuti</strong> <strong>per</strong> <strong>il</strong> <strong>web</strong>: (X)HTML e CSS in dettaglio 79<br />
mediante attributi e valori. Questo non è un modo ideale in quanto codifica simultaneamente<br />
contenuto logico ed aspetto grafico. Inoltre le possib<strong>il</strong>ità di modifica dell'aspetto grafico erano<br />
limitate: la visualizzazione degli elementi era <strong>per</strong>lopiù standard e fissata dal browser.<br />
Da HTML 4.01 si è cercato di separare <strong>il</strong> contenuto dal layout e di ampliare le possib<strong>il</strong>ità di<br />
variazioni st<strong>il</strong>istiche. Il risultato sono state le cosiddette regole di st<strong>il</strong>e, che vengono in genere<br />
codificate in documenti separati dalla pagina stessa detti fogli di st<strong>il</strong>e o fogli di st<strong>il</strong>e a cascata<br />
(Cascading Style Sheets o CSS) .<br />
La prima versione di questa codifica risale al 1996, la versione attuale 2.1 è del 2004 e si sta<br />
lavorando alla versione 3.0.<br />
Questa codifica separata fornisce numerosi vantaggi: innanzitutto consente di controllare in<br />
maniera più semplice l'aspetto grafico della pagina, generando codice più compatto. In un sito si<br />
possono inserire molte pagine che fanno riferimento ad un solo foglio di st<strong>il</strong>e e questo st<strong>il</strong>e può<br />
essere variato senza dover toccare <strong>il</strong> codice delle pagine. Si possono anche ut<strong>il</strong>izzare fogli di<br />
st<strong>il</strong>e differenti <strong>per</strong> supportare differenti strumenti di visualizzazione che necessitano di<br />
adattamenti di blocchi e caratteri alle diverse dimensioni (monitor, stampanti, palmari, ecc.). In<br />
tale modo si può anche supportare l'accessib<strong>il</strong>ità (creando fogli appositi <strong>per</strong> lettori bra<strong>il</strong>le, ecc.),<br />
sempre senza riscrivere i documenti.<br />
Vediamo quindi la codifica dei CSS in maggior dettaglio. La sintassi delle regole di st<strong>il</strong>e è<br />
separata da quella dell'HTML/XHTML e viene collegata al documento HTML/XHTML in uno<br />
dei seguenti modi:<br />
• Mediante inserimento “inline” all'interno della pagina, inserendo l'apposito elemento<br />
dentro , come nell'esempio sotto:<br />
<br />
<br />
Inserire i fogli di st<strong>il</strong>e in un documento<br />
<br />
body { background: #FFFFCC; }<br />
<br />
…<br />
• Ut<strong>il</strong>izzando uno o più documenti di st<strong>il</strong>e associati (fogli di st<strong>il</strong>e) contenenti le regole e<br />
collegati alla pagina in uno dei due seguenti modi:<br />
<br />
<br />
Inserire i fogli di st<strong>il</strong>e in un documento<br />
<br />
<br />
@import url(st<strong>il</strong>e.css);<br />