html512
Corso html 5, dodicesima lezione.
Roberto Abutzu su uiciechi.it, 2013-09.

Dodicesima parte: il linguaggio Css, i link e le pseudo-classi.

**********

Il concetto delle pseudo classi.

Questa notazione è più complessa di quel che sembra, perché varia a seconda dello stato 
dell'elemento stesso. In questo caso, andremo a parlare delle pseudo classi dei selettori. Infatti, 
si intende una modifica dello stile, non per un singolo elemento, ma per lo stato che questo 
elemento può assumere e anche per le sue variazioni.

Applichiamo questa teoria direttamente ai link, semplificandone così la comprensione. Un link, 
oltre al suo colore assegnato dal programmatore, può variare a seconda che sia stato già visitato, 
che il puntatore del mouse sia posizionato sopra di esso, che ci sia il focus della tastiera, oltre 
a variare anche nel momento in cui viene attivato.

Quindi, in pratica il colore di un link varia a seconda dei suddetti stati ed è il programmatore 
che ne decide i vari colori, utilizzando le pseudo-classi.

Per una buona, pratica e fluida navigazione in una pagina web, è necessario che i link già visitati 
siano contrassegnati, quindi, a tale scopo ne viene cambiato il colore.

Nota bene: si fa presente che questi dati di formattazione degli elementi di una pagina web, 
quindi, anche i dati che contrassegnano il link già visitato, vengono salvati nella memoria dei 
file temporanei del browser. Quindi, se si pulisce la cronologia e i file temporanei del browser, 
questi dati vengono persi, quindi, dopo una pulizia del browser, è come se la pagina web la 
visitassimo per la prima volta.

Per iniziare il discorso e vedere quali sono i codici da inserire nel file CSS, cominciamo con 
l'inserire il codice che assegnerà i vari colori ai link a seconda dello stato in cui si trovano. 
Poi, di seguito, ne spiegheremo il significato. Apriamo il nostro file style.css e portiamoci in 
fondo alla pagina con control più fine.

Andiamo a capo premendo invio e inseriamo questo codice:

`` a:link {color: #0000FF; }``

`` a:visited {color: #FF0000; }``

`` a:focus {color: #00FF00; }``

`` a:hover {color: #00FF00; }``

`` a:active {color:#FF00FF; }``

Ecco cosa abbiamo inserito e cosa significa:

•Come si evince dal codice, all'interno delle parentesi graffe, troviamo il codice dei colori 
assegnati.
•Prima delle parentesi graffe, per ogni codice, il selettore che viene spiegato di seguito.
•a: link non visitato e senza nessun altro stato attivo. Gli è stato assegnato il colore blu 
(#0000FF).
•a:visited: Link già visitato dal browser. Gli è stato assegnato il colore Rosso (#FF0000).
•a:focus: Questo selettore indica il focus della tastiera, quello che spostiamo con il tasto Tab. 
Gli è stato assegnato il colore verde (#00FF00).
•a:hover: Questo selettore indica quando il puntatore del mouse si posiziona sopra il link. Gli è 
stato assegnato ugualmente il colore verde (#00FF00).
•a:active: Indica lo stato di attivazione del link quando viene attivato dal mouse per aprire la 
nuova pagina. Gli è stato assegnato il colore Viola (#FF00FF).
Note importanti:

•I colori che sono stati assegnati in questo esempio sono semplificati con l'unico scopo di 
apprendere il più possibile questi concetti.
•Nei nostri siti possiamo assegnare i colori che ci servono, anche in funzione degli altri colori 
utilizzati in generale per il sito e non solo per come ci aggradano.
•Per queste cose di layout, conviene fare delle prove, cambiando i colori a piacimento, ma facendo 
verificare sempre da un occhio amico.
•L'ordine di questi codici di stato deve seguire esattamente lo stesso ordine inserito sopra, 
quindi, non è possibile, per esempio, mettere il link visitato per primo. Nel caso fossero inseriti 
questi codici in modo errato, non funzioneranno i cambiamenti dello stile e non verrà quindi letto 
lo stato del link.
La proprietà text-decoration.

C'è bisogno di introdurre questa proprietà in quanto ci potrebbe servire, anche se c'è l'esigenza 
per gli ipovedenti di non sottolineare i link, togliendo l'effetto della sottolineatura. Questo 
effetto di sottolineatura appare al momento in cui il mouse passa sopra il link stesso e l'effetto 
evidenzia immediatamente il link. Le persone vedenti si sono abituate a questo effetto, quindi, 
ritengo importante inserire questa proprietà nella eventualità in cui vogliate far analizzare il 
lavoro da una persona vedente. Tra l'altro, questa proprietà fa parte degli effetti del testo che 
analizzeremo in seguito.

Questa proprietà deve essere inserita in questo modo:

a:link {text-decoration: none; }

a:hover {text-decoration: underline; }

Anche se non cambia nulla a inserire delle linee di codice distinto all'interno del file CSS, si 
può inserire anche la proprietà del colore all'interno delle stesse parentesi graffe, inserendo una 
unica linea di codice.

Testo e codice di formattazione.

Ora, cerchiamo di dare un aspetto piacevole al nostro sito, quindi, introduciamo le prime nozioni 
sui caratteri che compongono i nostri testi e la loro formattazione.

Il codice html che, in passato, permetteva di assegnare il font e la sua formattazione direttamente 
nel codice della pagina stessa, in questa nuova versione 5 di questo linguaggio, non lo permette 
più, demandando al solo file css la formattazione di tutti i caratteri del testo del sito.

Tutti i Browser hanno dei loro caratteri predefiniti, quindi, l'assenza della dichiarazione di 
formattazione nel file CSS non significa che il sito ne rimanga privo. Ovviamente è importante 
saper inserire la formattazione e saperla personalizzare, anche a seconda dell'elemento a cui 
vogliamo assegnarla.

Tramite i fogli di stile, possiamo assegnare una formattazione personalizzata e specifica per ogni 
elemento html del sito, oltre che poter decidere di impostare due formattazioni diverse per 
elementi uguali ma in posizioni diverse nella pagina.

Quindi, si capisce benissimo che le possibilità sono illimitate e possiamo decidere quello che 
vogliamo e come meglio crediamo, sempre nell'ottica che ci serve un occhio in prestito per valutare 
contrasti e colori, nonché le posizioni del testo nel contesto della pagina e dei suoi oggetti. Nel 
concreto, possiamo stabilire i caratteri, le dimensioni e i colori per ogni paragrafo, magari 
diversi tra i vari paragrafi, le varie intestazioni, per i collegamenti, e per tutti gli altri 
oggetti di programmazione. Per esempio, possiamo decidere che all'interno di una o più liste, il 
carattere deve essere diverso da quello delle etichette dei link. Inoltre, utilizzando gli 
identificativi (id), tutte le intestazioni dello stesso livello potranno avere formattazioni 
diverse. Il tutto può essere applicato a qualsiasi altro oggetto di programmazione che lo consente.

Nel caso si volesse assegnare una regola di stile ad un elemento html, sarà sufficiente utilizzare 
l'elemento stesso come selettore, ricordandosi di non inserire i segni di maggiore e minore del tag.

Invece, per dare uno stile particolare ad un elemento univoco, dopo avergli assegnato 
l'identificativo nella pagina html, basterà inserire questo identificativo preceduto dal simbolo 
del cancelletto. Ora, passiamo alla pratica, spiegando di seguito il codice da utilizzare:

h1, h2, h3 {font-family: Tahoma, Geneva, sans-serif; color: #0000FF; }

Guardando la riga di codice sopra, la prima cosa che notiamo sono i selettori. Infatti, come 
spiegato in precedenza, stiamo dando una regola di stile alle intestazioni h1, h2 e h3. All'interno 
delle parentesi graffe, troviamo le coppie Proprietà-Valore. La prima che incontriamo è:

font-family: Tahoma, Geneva, sans-serif;

Notiamo che abbiamo inserito dopo la proprietà, tre valori, ossia tre tipologie di font, simili tra 
loro. A questo punto sarà spontaneo chiedersi: "Per quale motivo non possiamo assegnare solo il 
carattere che scegliamo?".

Il motivo è semplice. Non possiamo avere la certezza che nei browser o nei computer di tutti quelli 
che visiteranno il sito ci sia il carattere scelto, quindi, ne sceglieremo tre. Il primo è quello 
che preferiamo, mentre gli altri due, saranno quelli che sono i più usati in generale. Ad esempio, 
anche se è stato scelto il carattere (font) Taoma, non si ha la certezza che questo carattere sia 
poi installato nei computer di chi visita il sito.

Se inseriamo dei caratteri che i browser non utilizzano, il browser utilizzato dal visitatore del 
sito assegna quelli di default. In questo caso, si rischia di stravolgere totalmente l'aspetto 
delle pagine del sito.

Tornando a ritroso nella creazione dei font, gli si può assegnare una alternativa, un font più 
datato e diffuso, ma simile e appartenente alla stessa famiglia: il Geneva. Però, anche questo 
potrebbe non garantire un risultato corretto, sempre per lo stesso motivo, quindi, andando ancora 
più indietro, si può assegnare sans-serif.

Si rimanda alla rete i curiosi che volessero fare una scelta particolare del font per il proprio 
sito. Comunque, sia che la scelta cada sul geneva, sul Verdana, sul sans-serif, eccetera, sia ben 
chiaro che il font che noi scegliamo, lo inseriamo per primo, mentre a seguire, ne inseriamo altri 
che risulteranno alternativi a quello scelto.

Se il browser non trova il primo font, tenta di usare il secondo, poi cerca il terzo e così via. 
Per maggior sicurezza, alla fine della scelta dei font, inseriamo anche la famiglia del font 
principale scelto.

Ecco di seguito l'elenco delle famiglie più utilizzate:

•Serif: font con elementi decorativi alla fine dei tratti delle lettere (ad esempio Times New 
Roman).
•Sans-serif: senza elementi decorativi (ad esempio, Arial).
•Mono caratteri a spaziatura fissa. Ogni carattere, indipendentemente dalle sue dimensioni, occupa 
lo stesso spazio.
Ecco alcune delle combinazioni di font più utilizzate:

•Arial, Helvetica, sans-serif.
•Times New Roman, Times, serif.
•Courier New, Courier, mono.
•Georgia, Times New Roman, Times, serif.
•Verdana, Arial, Helvetica, sans-serif.
•Geneva, Arial, Helvetica, sans-serif.
Ovviamente, non c'è alcun obbligo nell'utilizzare queste combinazioni, l'importante è cercare una 
coerenza grafica tra i caratteri scelti. E anche qui, le prime volte che usiamo queste combinazioni 
di caratteri, se non vogliamo copiare dalle combinazioni più diffuse, basta farsi dare un occhio in 
prestito.

"font-size": è la proprietà che consente di assegnare le dimensioni ai caratteri del testo.

Esistono varie misure o tipologie di valori per le dimensioni ma, sempre per il fatto che non siamo 
a conoscenza del pc che visiterà il sito, spesso si rischia di avere anche in questi casi delle 
spiacevoli sorprese. Si possono utilizzare i pixel (px), le dimensioni dei punti assegnati dai 
programmi di videoscrittura (pt) o altre unità di misura come i pollici o i centimetri che 
affronteremo in una apposita lezione. Queste misure sono tutte da considerarsi relative e si 
intende che possono variare in alcune condizioni specifiche.

L'esempio che più ci fa capire qual è il problema da affrontare, è il Pixel. Usando questa unità di 
misura, il font può variare a seconda della risoluzione del monitor utilizzato, oltre al fatto che 
non tutti i browser ridimensionano correttamente i caratteri.

Inoltre, e questo caso a noi interessa per uno script futuro, assegnare pixel, significa forzare a 
mantenere quelle dimensioni. Prossimamente inseriremo uno script che permetterà di ingrandire tutto 
lo schermo in tre valori. Io inserisco questo script in tutti i miei siti in quanto utilissimo per 
le persone ipovedenti o gli anziani. Nel caso inserissi un font col valore delle dimensioni in 
pixel, questo script non funzionerebbe.

Altra considerazione va fatta per l'accessibilità dei siti: se non si usano correttamente le 
dimensioni nelle unità di misura che consentono alle tecnologie assistive di variare le dimensioni 
stesse, rischiamo di fare un sito inaccessibile per gli ipovedenti.

Qualsiasi unità di misura viene utilizzata, è necessario che il numero e l'unità siano attaccati 
così: {font-size: 14pt;}

Di solito è bene lasciare assegnare ai browser le dimensioni e quando serve utilizzare il valore 
della dimensione in em.

Quindi, per renderci conto di cosa stiamo parlando, è bene dire che un em (em-height) è l'unità di 
misura e che un em corrisponde all'altezza base di un carattere per un determinato font.

Per esempio, per portare un carattere al doppio della sua misura dobbiamo scrivere 2em.

un esempio pratico: h1 {font-size: 2em; }

Ecco anche un esempio per agevolare la lettura dei file css. Notate che andrò a capo per ogni 
coppia Proprietà-valore. Questo rende molto più semplice la lettura del CSS, soprattutto per le 
persone non vedenti. Altro accorgimento per chi utilizza uno screen-reader con sintesi vocale, sarà 
bene leggere dopo aver impostato la punteggiatura su tutto. Infatti, in questo modo, vengono letti 
tutti i simboli e i segni grafici in modo corretto, senza perdere nulla. Così facendo, avremo nella 
lettura del testo in un file CSS, una lettura fluida, con un susseguirsi delle impostazioni che 
possono essere identificate senza alcun problema di comprensione.

Vediamo il codice:

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 14pt;

color: #000000;

}

h1, h2, h3 {

font-family: Tahoma, Geneva, sans-serif;

color: #0000FF;

}

h1 {

font-size: 18pt;

}

a:link {

text-decoration: none;

color: #0000FF;

}

a:visited {

color: #FF0000;

}

a:focus {

color: #00FF00;

}

a:hover {

text-decoration: underline;

color: #00FF00;

}

a:active {

color:#FF00FF;

}

Ovviamente, non è necessario e tanto meno obbligatorio scrivere in questo modo, riportando a capo 
ogni coppia proprietà-valore, ma è consigliabile e utile quando il file css inizia a diventare 
lungo.

In queste lezioni sui css, ho voluto rendere la teoria molto semplificata puntando per lo più a 
farvi mettere in pratica i primi rudimenti direttamente lavorando sul sito.

Tutti questi argomenti verranno ripresi nello specifico e spiegati di nuovo, considerando tutte le 
proprietà e tutti i valori che è possibile assegnare agli oggetti di programmazione nei fogli di 
stile.

Spesso mi accade di imbattermi in manuali dove all'inizio si parla solo di teoria, senza riportare 
nessun esempio come ho fatto nelle parti di questa guida fin qui pubblicata. Per le guide fatte in 
questo modo, realmente si inizia a fare concretamente qualcosa a partire dalla decima lezione. 
Puntualmente, poi, non avendo fatto nulla di concreto, si finisce per dimenticare tutto quello che 
si è letto.

Ovviamente, non è mia intenzione criticare altri manuali o altre metodologie di studio, ma avendo 
pensato questo corso prevalentemente per le persone non vedenti come me, ho cominciato da subito a 
mettere la pratica assieme alla teoria, proprio perché avendolo sperimentato sulla mia pelle, ho 
notato che, così facendo, si memorizzano meglio i concetti proprio perché vengono applicati 
immediatamente.

I fogli di stile, come anche il linguaggio html 5, sono complessi e pieni di codice, quindi, 
proprio perché complesso, è bene imparare il tutto poco alla volta, in modo che tutti i concetti 
rimangono ben fissati ed in modo che possiamo usare a nostro piacimento qualsiasi modalità di 
programmazione e stabilire a priori cosa mettiamo nelle pagine del nostro sito.

Vi rimando alla prossima lezione per approfondire i concetti sin qui trattati e per approfondire il 
discorso man mano che costruiremo il nostro sito.

***********

Per ulteriori spiegazioni, scrivere a: Roberto Abutzu