Html 2

INTRODUZIONE AI FOGLI DI STILE

HTML soffre di limiti propri di un sistema di contrassegno ideato per scopi molto lontani da quelli attualmente richiesti dal Web design. Se questi limiti appaiono marginali agli occhi dei neofiti, risultano fastidiosi, e molto spesso immobilizzanti, per i professionisti formatisi nella grafica tradizionale. Posizionare un'immagine, creare una banda laterale, giustificare del testo in HTML diventa un problema risolvibile esclusivamente con strumenti nati per tutt'altro scopo (le tabelle, per esempio, nel 90% dei casi vengono utilizzate per posizionare elementi nella pagina, invece che per ordinare dati).
Il problema, in termini minimamente più tecnici, riguarda la classica separazione SGML tra stile, contenuti e struttura. HTML "tradizionale" non soddisfa questa condizione, ma anzi, ne esaspera la confusione.

Ma cosa significa separare lo stile dai contenuti? Consideriamo un sito Web mediamente complesso, con un numero di pagine HTML pari a 100. Poniamo che il testo adottato per l'esposizione degli argomenti sia un "arial" corsivo. Con gli strumenti classici di HTML il codice per ottenere questo risultato e':

<FONT FACE="ARIAL"><I>Testo della pagina</I></FONT>

ripetuto in tutte le 100 pagine del sito, a chiusura e apertura del testo da formattare. Semplice, ovvio e per molti versi banale. Ma cosa succede nel momento in cui scegliamo di modificare il tipo di carattere a tutte le pagine? Non c'e' altra soluzione che aprire le 100 pagine e procedere ad altrettante modifiche, che sostituiscano il nome "arial" con il nuovo font scelto. Un webmaster di medie capacita' puo' impiegare solo qualche decina di minuti, che diventano ore per siti di grandi dimensioni. Bene, questa perdita di tempo e' diretta conseguenza della promiscuita' tra stile e contenuto, laddove il primo (il tag FONT) non e' separato dal secondo (il testo della pagina).
Viene da se' che la soluzione a questo problema e' nella separazione tra i due elementi sopracitati, che nella pratica si risolve adottando i Cascading Style Sheets. D'ora in poi ci serviremo dell'acronimo CSS per richiamare questi "fogli di stile a cascata" che da tempo sono stati introdotti nel Web publishing, ma che solo negli ultimi tempi hanno conosciuto una grande diffusione.

Il termine "a cascata" (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e' possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull'altro.

I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer, e parzialmente supportati da Netscape soltanto dalla quarta versione dell'omonimo browser. Chi accede con un browser obsoleto ad un documento formattato con fogli CSS, si trovera' di fronte una pagina gestita dalle opzioni di default del browser (lo sfondo, per esempio, sarà grigio; il tipo di testo "times new romans" ecc).
I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni "CSS1" prima, e "CSS2" poi. Si rimanda a questi documenti ufficiali per ulteriori approfondimenti.

Un'ultima nota in conclusione riguarda i dubbi sull'adozione di un sistema, i fogli di stile, riconosciuti solo dalle ultime versioni dei browser e che quindi rischiano di tagliare fuori parte dei visitatori. Si Ritene che allo sviluppo del Web debba coincidere un costante aggiornamento del software da parte dei navigatori, soprattutto oggi che i due maggiori browser sono gratuiti (addirittura di pubblico dominio il sorgente di Netscape).
Rammentiamo, infine, che i fogli di stile sono compatibile con:
MS Internet Explorer 3 (parzialmente)
MS Internet Explorer 4
MS Internet Explorer 5
Netscape navigator 4 (parzialmente)

CSS IN LINEA

I fogli di stile in linea sono concettualmente molto vicini alle regole dell'HTML classico, in quanto agiscono su singole istanze all'interno della pagina. Semplificando il concetto, i fogli di stile in linea agiscono su singole parti del documento, senza influenzare il resto della pagina. Se per esempio si vuole che una sola parte del testo di un documento abbia un certo carattere o una certa formattazione, si useranno campi standard di HTML, quali <SPAN> o <DIV>, per assegnare quello stile. Eccone un esempio:

<DIV STYLE="font-size:18px; font-family:arial; color:red">
Questo testo ha colore blue
</DIV>

Guardare: ESEMPIO: CSS in linea.htm

In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag <DIV> e non per tutto il documento. In particolare abbiamo indicato come grandezza del carattere (font-size) 18 pixel; come tipo di carattere (font-family) il classico arial e come colore (color) il rosso. Il risultato che otteniamo e' il seguente:
Questo testo ha colore rosso

La marcatura usata per ottenere questo effetto e' <DIV> o in alternativa <SPAN>. L'uso dell'una o dell'altra e' lasciato alla discrezionalita' del progettista, anche se la prima marcatura e' consigliata per lunghi blocchi di testo, mentre <SPAN> e' consigliata per brevi frasi, proprio come quella dell'esempio.

Un siffatto sistema di stile e' certamente funzionante ma non rispondente alle peculiarita' tipiche dei CSS. Assegnare stili alle singole marcature, infatti, non risponde ai criteri di separazione tra stile e contenuti dei quali i CSS si fanno portatori. I fogli di stile in linea in un certo senso negano la vera natura di questi strumenti, nati per assegnare stili a intere pagine o addirittura a gruppi di documenti. Il nostro consiglio e' di servirsi dei fogli di stile in linea esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website.

CSS INCORPORATI

Prima di passare alla trattazione dei fogli di stile incorporati, ci preme sottolineare la diversa sintassi che regge questi attributi (e anche i successivi "css esterni") rispetto ad HTML classico:
· gli attributi sono inseriti tra parentesi graffe { }
· al posto del segno = vengono usati i due punti :
· gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola ,
· Gli attributi composti da piu' termini sono separati da un trattino -
· Quando un attributo e' considerato proprieta' di un oggetto i trattini si eliminano e le iniziali dei termini diventano maiuscole (per esempio: font-style diventa FontStyle)

Premesso questo passiamo a trattare approfonditamente i fogli di stile incorporati. Banalizzando, si tratta di stili a meta' strada tra i gia' esaminati CSS in linea e i successivi CSS esterni. La peculiarita' fondamentale di questi attributi di stile e' di venire assegnati all'intero documento e non a singole istanze come l'HTML classico. Si tratta, dunque, di un insieme di definizioni di stile inserite tra marcature <STYLE> e posizionate tra i tag <HEAD> del documento e il <BODY> dello stesso.

Un esempio di foglio di stile incorporato e' il seguente:

H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }

</style>

</HEAD>
<BODY>

<H1>Questo testo e' di colore verde, impostato su verdana di 17 pixel</H1>
<H2>Questo testo e' di colore rosso, impostato su arial di 18 pixel</H2>

</BODY>

</HTML>

Guardare: ESEMPIO: CSS incorporati.htm

In questo esempio abbiamo impostato un foglio di stile incorporato tra i tag <HEAD> del documento, stabilendo due diversi tipi di carattere:
· verdana verde di 17 pixel per il primo identificato dal marcatore <H1>
· arial rosso di 18 pixel per il secondo, identificato dal marcatore <H2>

I marcatori H1 e Hx in generale possono sostituirsi con altri marcatori di paragrafo quali <P>. Impostato il CSS incorporato all'interno del documento gli stessi stili vengono assegnati raccogliendo porzioni di testo tra marcatori <H1></H1> e <H2></H2>.
In questo modo cambiando i valori dei soli attributi impostati nel foglio di stile (aumentando la grandezza o modificando il colore, per esempio), il testo del documento marcato da <H1> e <H2> viene automaticamente aggiornato al nuovo stile.

L'attributo TYPE del tag <STYLE> definisce il linguaggio in formato MIME del foglio di stile. In altre parole questo attributo indica al browser il tipo di foglio di stile supportato, altrimenti ignorato. Ms Internet Explorer supporta i CSS solo in formato MIME, ma esistono i CSS in formato text/jass, cioe' accessibili in javascript.
Se l'attributo TYPE viene omesso, il browser lo identifica di default con text/css.
Anche Netscape communicator supporta questo attributo.

Rispetto ai fogli di stile in linea i CSS incorporati consentono il controllo di un intero documento, ma per interi siti non sono sufficienti a fornire il supporto tecnico necessario. Se per esempio per il testo del documento e' stato usato un certo font e improvvisamente si decide di modificarlo, sara' necessario agire su tutti i documenti del sito perche' le modifiche si estendano all'intero Website.

CSS ESTERNI

I fogli di stile esterni (o collegati) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarita' dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo. Sulla scorta di quanto finora esposto si presentano tre casi:
· il sito e' costruito in HTML classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle 1000 pagine;
· il sito e' costruito adottando fogli di stile in linea, per cui anche in questo caso sara' necessario agire su tutte le singole marcatura di ognuna delle 1000 pagine;
· il sito e' costruito con i fogli di stile incorporati, per cui si dovra' comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovra' agire sui singoli attributi della pagina che rimangono identici

Seppure l'ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti.
La soluzione a questo problema e' che gli stili dei singoli marcatori vengano raggruppati in un documento indipendente dal resto delle pagine, e da queste semplicemente richiamati con una semplice riga di codice. In questo modo una modifica sul file "centralizzato" genera automaticamente la stessa modifica su tutti i documenti che lo richiamano. Sulla scorta di questa ovvia considerazione si basano i fogli di stile esterni esaminati in questa lezione.

Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice e consta di 5 fasi:
· apri una pagina senza alcuna intestazione HTML con blocco notes di Win95-98 o il tuo editor HTML e inserisci al suo interno il seguente codice:

H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }
· Se stai usando blocco notes di Win95-98 vai su FILE/SALVA CON NOME nella prima voce di menu in alto a sinistra. A questo punto si apre una finestra di salvataggio con due campi da riempire: nome file e salva come. Nel primo campo inserisci il nome style.css e nel secondo imposta come "tutti i file" e finalmente premi il tasto "salva".
· Creato il file style.css (.css e' l'estensione assegnata ai file di stile esterni, mentre il nome "style" puo' essere modificato a proprio piacimento) copialo nella cartella principale del tuo sito Web.
· Apri i documenti HTML del tuo sito e inserisci al loro interno, tra i tag <HEAD> il seguente codice:

La marcatura link identifica un file esterno al documento HTML che comunque lo riguarda direttamente. L'attributo rel indica che il file collegato e' un foglio di stile (stylesheet). href richiama il percorso del file .css esterno (in questo caso il file si intende depositato nella stessa cartella in cui e' presente il documento HTML; se cosi' non fosse andrebbe inserito il percorso del file, per es.: href="css/style.css"). L'attributo type ha la funzione vista in precedenza per i fogli di stile incorporati.
· All'interno del documento identifica gli stili da assegnare usando i marcatori <H1> e <H2>. Per esempio i titoli potrebbero essere stabiliti da <H1> e il testo delle pagine da <H2>, in questo modo:

<H1>Titolo della pagina</H1>

<H2>Testo della pagina di prova, Testo della pagina di prova, Testo della pagina di prova, </H2>

Il risultato di questo esempio e' di stabilire per tutte le pagine del sito uno stile comune per i marcatori <H1> e <H2>, in modo tale che modificando il solo file esterno tutti i documenti HTML collegati saranno contestualmente aggiornati. Nell'esempio del sito di 1000 pagine, se l'esigenza fosse quella di modificare grandezza e stile dei titoli di pagina, sarebbe sufficiente agire sul marcatore <H1> del file esterno style.css.

In chiusura di questa disamina ci preme sottolineare la grandissima utilita' dei fogli di stile esterni che consigliamo di usare il piu' possibile. A fronte di una impostazione iniziale piu' complessa degli altri stili, nel lungo periodo e per siti di grandi dimensioni ripagano ampiamente gli sforzi, oltre a consentire un inedito controllo di pagina e di stile.