Anche se la regola fondamentale del linguaggio HTML è che l'autore debba controllare il contenuto di un documento mentre il browser ha il compito di curarne la forma, esistono comunque alcuni tag che consentono agli autori di controllare in qualche misura l'aspetto dei testi. In questa pagina affronteremo i tag orientati al testo e, in particolare, esporremo le basi concettuali dei fogli di stile, argomento quest'ultimo introdotto solo con l'ultima versione del linguaggio HTML.
Il termine stile è utilizzato per indicare una serie di attributi che permettono di distinguere un blocco di caratteri dai testi circostanti. Esistono due tipi di stili: logici e fisici.
Gli stili logici descrivono il modo in cui i testi devono essere utilizzati e non il modo in cui devono essere visualizzati. Quando si usano i tag per stili logici, è il browser a determinare il modo in cui il testo contenuto in questi tag dovrà essere presentato (in grassetto, in corsivo o in qualche altra maniera). Quindi non si può essere certi che il testo racchiuso fra questi tag sarà sempre in grassetto oppure in corsivo o nella modalità che si è scelta.
I più importanti tag per stili logici sono:
Oltre ai tag per stili logici, vi sono anche quelli per gli stili fisici: questi sono stati appositamente ideati per modificare effettivamente l'aspetto del testo, visualizzandolo in grassetto, in corsivo o con un carattere a spaziatura fissa.
Grassetto: <B> Questo tag fisico rappresenta in grassetto (bold) tutti i testi che contiene.
Corsivo: <I> L'effetto di tale tag è simile all'attributo corsivo (italic) che si trova in molti word processor.
Testi a spaziatura fissa: <TT> Spesso, quando si presentano le istruzioni da inserire da tastiera per un certo programma o si vogliono evidenziare gli stessi tag del linguaggio HTML (come in questo corso) si usa il tag <TT> (TeleType o telescrivente) per generare un font a spaziatura fissa. In un tale tipo di font ogni carattere occupa la stessa quantità di spazio: diversamente nei font a spaziatura proporzionale lo spazio occupato dai caratteri è proporzionale alla forma del carattere (la lettera m richiede, per esempio, più spazio della lettera i).
Sottolineato: <U> Un altro tag fisico è <U>...</U> (Underline) il cui effetto è sottolineare i testi che racchiude.
Se si decide di utilizzare un tag di stile fisico, si deve sempre considerare che l'effettiva formattazione dei testi dipende dal browser e pertanto, se questo non fosse in grado di gestire uno degli stili fisici, potrebbe visualizzare il testo con un altro stile. Inoltre, poiché non esiste una specifica standard che definisca come i browser debbano rappresentare le combinazioni che si possono fare tra più stili fisici (attivata per esempio in tal modo: <b><i>testo in grassetto e corsivo</i></b>, testo in grassetto e corsivo), si dovrà, se possibile, scrivere documenti HTML che usino tag logici.
Il controllo fornito dal linguaggio HTML sugli stili dei testi è evidentemente molto limitato e rudimentale. D'altra parte, con l'estendersi del Web sono emerse con forza esigenze di formattazione sempre più precise: oggi il controllo degli aspetti anche più sofisticati degli stili è una cosa naturale e necessaria.
La versione 3.2 del linguaggio HTML metteva a disposizione il tag <FONT> per poter controllare l'uso di effetti speciali come il colore, le dimensioni e il tipo di font da utilizzare per i testi ma, con l'avvento della versione 4, questo stesso tag è stato reso obsoleto (e quindi il suo uso è sconsigliato) da un nuovo e più generale approccio, quello che fa uso dei fogli di stile in sequenza ossia dei Cascading Style Sheets.
Con l'uso dei fogli di stile in sequenza il progettista di una o più pagine HTML ha di fronte a se la possibilità di definire importanti aspetti degli stili, come la scelta del font, il suo stile, la sua dimensione. Il controllo si estende anche ad alcune funzioni di base tipografiche, come i margini, l'indentazione, il colore, la grafica e molte altre opzioni. Di questa tecnica, importante se si intende approfondire la propria conoscenza dell'HTML, daremo qui alcune nozioni di carattere sintetico. Anche qui comunque, la vecchia regola rimane confermata: usare attenzione e prudenza verificando ogniqualvolta è possibile i risultati del proprio lavoro su diversi browser.
Ci sono tre modi fondamentali di usare gli stili:
Metodo in linea. Questo approccio sfrutta marcature HTML già esistenti nel linguaggio e aggiunge aspetti specifici dello stile all'informazione controllata da queste marcature. Un esempio potrebbe essere quello del controllo dell'indentazione di un singolo paragrafo con l'attributo style="ValoreAttributo" all'interno della marcatura <P>.
Metodo dello stile incorporato. Questo metodo consente all'autore di controllare le singole pagine tramite il tag <STYLE> e l'associato </STYLE>. Questa informazione è posta tra <HTML> e <BODY>; gli attributi di stile sono inseriti all'interno della sezione <STYLE>.
Stile esterno collegato. In un file esterno viene memorizzato lo stile, usando la stessa sintassi considerata per il metodo dello stile incorporato. Questo file avrà estensione .css. Pertanto rimane solo da assicurarsi che le pagine che usano questo stile siano collegate a questo file.
Uno stile in linea è specificato all'interno del marcatore cui si riferisce e non influisce su alcun altro marcatore della pagina, a prescindere dal fatto che questi marcatori siano dello stesso tipo o meno. Per esempio se si imposta uno stile corsivo all'interno di un paragrafo e quindi nel marcatore <P>, lo stile non avrà alcun effetto sugli altri paragrafi. Difatti,
Possiamo ora definire uno stile per questo paragrafo attivando il tasto 
posto alla destra della cella Style. Viene aperta di conseguenza la finestra dello Style Editor che presenta tutte le numerose opzioni di stile valide. Per esplorarle basta trascinare la barra a destra. Volendo comunque semplicemente ottenere un paragrafo in corsivo
: fatto un altro clic su di esso diventa possibile
L'editor inserisce gli opportuni attributi entro il tag e la successiva visualizzazione mostra come l'intero paragrafo venga reso in corsivo. Notiamo pure che il secondo paragrafo ha mantenuto le sue caratteristiche originarie e che quindi, come detto, l'applicazione dello stile si limiti al solo tag entro il quale appare l'attributo STYLE: l'effetto è perciò strettamente locale.
Vediamo un secondo esempio di stile in linea: intendiamo dare risalto ad una qualsiasi parola del paragrafo precedente assegnando al testo un colore e allo sfondo un altro. A tal fine va usato il tag <SPAN>...</SPAN> utile per applicare uno stile a elementi di testo (lettere, parole, gruppi di parole) che non giochino un ruolo strutturale nella pagina. Poiché HomeSite non prevede l'inserimento automatico di questo marcatore dovremo inserire manualmente la coppia <SPAN>...</SPAN> attorno ad una qualsiasi parola del paragrafo. Fatto ciò andiamo ad aggiungere lo stile
.
ci permette di definire il colore del testo.
Come risultato, dovremmo aver ottenuto un testo a colori disposto su uno sfondo a sua volta colorato come quello seguente: testo dimostrativo.
Vediamo ora come sia possibile creare uno stile incorporato. Definito
foglio di stile come un insieme di definizioni di stile inserite tra i marcatori <STYLE>...</STYLE>, posizionato tra l'intestazione e il corpo del documento,
intendiamo assegnare uno stile all'intera pagina in modo che questa abbia un margine sinistro di 2 cm e che le intestazioni di livello due abbiano un colore di sfondo. A tal fine aggiungiamo altri due o tre paragrafi a quelli già presenti e alcune intestazioni di livello due (tag <H2>...</H2>). Successivamente,
Possiamo ora attivare l'editor di stile già visto
Avendo già inserito i due marcatori per i quali intendiamo definire degli stili si tratta di ricercare nell'elenco gli opportuni attributi. Per il tag <BODY> scorrendo l'elenco incontriamo margin-left:
In sostanza dovremmo aver ottenuto l'inserimento del seguente codice (che potrebbe essere disposto in modi diversi e con colori, ovviamente, diversi):
<style> body {margin-left : 2cm;}
H2 {background-color : #00FFFF;}
</style>
Come si può vedere la sintassi per definire uno stile non è particolarmente difficile. Scelto un tag per il quale si vuole definire uno stile (lo si può fare anche all'interno dello Style Editor tramite il tasto 
), si elencano entro parentesi graffe le caratteristiche stilistiche desiderate e i relativi parametri. Tutte le volte che verrà utilizzato quel tag il browser visualizzerà il testo compreso nello stile definito entro la marcatura <STYLE>.
Quando si cominciano ad usare i fogli di stile, la tecnica più usata è quella dello stile incorporato. Il suo controllo pagina per pagina permette di modificare l'aspetto di ogni pagina di un sito. Però se è richiesta una rigorosa uniformità per un gruppo di pagine o per tutto un sito, è necessario un aggancio ad un foglio di stile esterno di riferimento. Ciò è quanto si è fatto anche per le pagine di questo corso, tutte collegate ad un unico foglio di stile dal nome stileAsiago2.css e reperibile nella medesima cartella contenente le pagine HTML.
Creare un foglio di stile che può essere agganciato a un numero qualunque di pagine è un compito davvero semplice. È chiamato foglio di stile collegato perché tutte le definizioni dello stile sono in un file, e la vera pagina HTML crea un collegamento a quel file quando viene caricata.
Creare uno stile collegato è del tutto simile alla creazione vista nella sezione precedente di uno stile incorporato. Innanzitutto va creato un file con i passi seguenti:
va perciò attivato lo Style Editor e, decisi i tag da modificare, si dovranno definire i rispettivi attributi. Nel nostro esempio, vogliamo ottenere un testo scritto di color bianco su una pagina con sfondo nero: allora
Ora, invece di salvare il tutto come file HTML, dovremo salvarlo con l'estensione obbligatoria .css. I passi sono:
,
Non rimane che integrare il file di stile con la pagina HTML. Passiamo alla pagina HTML che avevamo abbandonato precedentemente facendo un clic sulla linguetta inferiore. Dobbiamo ora cancellare tutto quanto è compreso tra i marcatori <STYLE>...</STYLE> altrimenti questo stile avrebbe la precedenza su quello definito esternamente.
L'editor inserisce il seguente codice
<link href="provastile.css" rel="STYLESHEET" type="text/css">
che evidentemente identifica un foglio di stile che si trova nella stessa cartella della pagina Web attuale (il solo nome del file è indicativo della sintassi delle URL relative). Dopo aver salvato il file, tutte le marcature coinvolte nella pagina verranno interpretate secondo il nuovo stile a parte quei tag che contengono al loro interno, uno stile in linea. In effetti è possibile mettere in sequenza i fogli di stile in quanto il browser segue le seguenti regole:
Queste regole, sufficientemente ordinate e predicibili, permettono di definire un singolo foglio di stile per tutto un sito, modificare singole pagine per particolari compiti con uno stile incorporato, e usare gli stili in linea per adattare i dettagli di specifiche zone della pagina (appunto, fogli di stile in sequenza).
Presentiamo di seguito un elenco dei principali attributi riguardanti il testo e utilizzabili in tutti i metodi di inserimento dei fogli di stile.
font-family: Questo attributo controlla il tipo di carattere definendo uno dei seguenti parametri.
Nei fogli di stile sono riconosciute le seguenti famiglie.
font-size. Nei fogli di stile è possibile definire la dimensione in base a cinque tipi di unità (presentiamo solo le prime quattro):
font-style. Questo attributo definisce lo stile richiesto per il font, come il corsivo. La sintassi è {font-style: italic}. Gli altri valori legali per questo attributo sono normal e oblique. normal riporta lo stile ai valori normali, e oblique è simile al corsivo ma viene realizzato dal sistema inclinando il font normale invece di usare un altro font specifico come il corsivo.
font-weight. Lo spessore delle linee di un carattere viene chiamato peso. Come per i tipi di carattere, la disponibilità di pesi diversi varia al variare della macchina. Ad ogni modo i due valori più usati sono normal e bold e sono sempre disponibili: quest'ultimo in particolare permette di ottenere il carattere in grassetto.
 |
 |
 |