html516
Corso html 5, lezione 16.
Roberto Abutzu su uiciechi.it, 2014-02.

Sedicesima parte: "Evidenziare il testo e data".

**********

Nota importante: Questa lezione e la successiva vanno considerate come un'unica lezione.

Affronteremo le basi per la formattazione del testo ma, dovendo operare fisicamente su due 
linguaggi diversi, HTML 5 e CSS, dividerò appunto le due lezioni, dedicandone ognuna per un 
linguaggio, anche se in entrambe troverete del codice che richiama i due linguaggi.

Questa scelta è stata doverosa farla per evitare di scrivere codice diverso nello stesso file, 
quindi, in questa lezione ci occuperemo del'HTML 5, mentre nella prossima ci occuperemo di CSS 
(Fogli di stile a cascata). In ogni caso, per molti argomenti spiegati qui, dovrete consultare 
entrambe le lezioni per avere il codice completo. Comunque, verrà indicato man mano dove reperire 
il codice.

Iniziamo questa lezione introducendo l'attributo: class.

In precedenza avevamo visto l'attributo Id, attributo che serve per dare un identificativo, per 
capirci, un nome univoco ad un elemento HTML.

Un esempio a cui ci possiamo riferire è:

In questo caso abbiamo dato un identificativo al div dei contenuti, quindi, un'area con un proprio 
nome univoco che contenesse tutti i contenuti del documento HTML. Richiamando questo elemento nel 
file CSS, è possibile dare a tutti i contenuti del div le proprietà che vogliamo per il testo, 
quali: colore, dimensioni, ubicazione nella pagina, eccetera, direttamente dal file CSS.

In questo caso, proprio con l'identificativo, possiamo operare fisicamente sempre e solo su un 
unico elemento. Infatti, le specifiche del linguaggio HTML non consentono di usare lo stesso id 
nella stessa pagina.

Chiarito questo, cosa succede se noi volessimo attribuire una modifica, la stessa modifica a più 
elementi?

Semplice: possiamo utilizzare una classe.

Questa, come l'Id, ha un suo nome univoco, ma può essere attribuita a più elementi. Significa che 
assegniamo a più elementi la stessa classe e, impostandola successivamente una volta sola nel file 
CSS, apportiamo le nostre modifiche a tutti gli elementi che usano quella classe. Per esempio, se 
volessimo dare il colore rosso solo a delle porzioni di testo non consecutive, ma distribuite nella 
pagina, basta dare a quelle porzioni di testo la classe adatta. Per farlo, non è difficile e ci 
comporteremo come segue.

Per esempio, se abbiamo una pagina dove il colore del testo è nero, impostato da noi nel file CSS, 
ma solo per alcune porzioni di testo decidiamo di impostare il colore rosso, sarà sufficiente 
inserire quelle porzioni di testo in paragrafi e creare nel CSS una classe adatta. Quindi, per ogni 
porzione di testo che vogliamo sia rossa, bisogna creare un paragrafo, e ad ognuno di essi 
assegniamo la classe.

Infine si crea la classe con il suo nome nel file CSS, dando ad essa la proprietà colore e il 
valore rosso. Quando apriremo la pagina, tutte le porzioni di testo alle quali è stata assegnata 
quella classe, saranno mostrate di colore rosso. Ecco un esempio pratico con il suo codice:

prova della classe

Importante per scrivere in rosso alcuni paragrafi

Utilizzando la classe è possibile creare dei paragrafi rossi.

Naturalmente poi si lavora nel file css.

Questi 4 paragrafi, saranno due rossi e due del colore che avete assegnato per i caratteri nel 
vostro file CSS.

Attenzione, un errore che per la fretta spesso faccio anche io, quando inseriamo un attributo, la 
tag viene chiusa col maggiore dopo l'attributo, nel nostro caso dopo la chiusura delle virgolette.

Riscriviamo il codice con l'apertura del paragrafo, e il maggiore alla fine:

Per chi utilizza uno Screen-reader, navigare questa stringa per carattere con la vocalizzazione 
della punteggiatura attivata. Questo è importante perché è un errore che succede spesso soprattutto 
per la fretta. Tornando al codice, la stessa classe può essere utilizzata nella stessa pagina anche 
per altre personalizzazioni del testo. Per esempio, si può decidere che una intestazione 
particolare sia rossa. Sarà sufficiente inserire nel codice della intestazione la stessa stringa 
che indica la classe.

Ecco il codice di esempio:
Questa intestazione sarà rossa

Attenzione, inserendo l'Attributo: class="rosso", stiamo soltanto indicando che esiste una classe, 
il suo nome è "rosso" ed è un attributo dell'elemento dove viene inserita. Con questo codice, non 
abbiamo ancora detto al browser che quel testo deve essere rosso. In pratica, manca ancora il 
codice del colore, quindi, la classe nel file CSS. Questo codice che indica la classe, con le 
proprietà della stessa, verrà assegnata direttamente nel file Css, quindi, vi rimando alla prossima 
lezione, dove verrà fisicamente assegnato il codice della classe del colore rosso.

Vi anticipo solo che il codice CSS per la classe è lo stesso dell'attributo id, l'unica differenza 
è che prima del nome della classe viene inserito un punto. Vi ricordo che prima dell'attributo Id, 
nel file CSS, si inserisce un cancelletto.

Spiegata la classe, e esortandovi a provarla nella vostra pagina, andiamo oltre nella lezione.

Vedremo ora come dare un po' di personalizzazione ai caratteri nelle nostre pagine direttamente col 
codice, cercando di abbellire e rendere gradevole il risultato. Alle persone non vedenti, consiglio 
vivamente di far consultare a una persona vedente il lavoro concluso. Non esageriamo mai con la 
personalizzazione, anche se divertente, ma cerchiamo di rendere le nostre pagine pulite e ben 
leggibili da tutti.

Evidenziare del testo.

Vediamo come utilizzare delle tag per evidenziare del testo all'interno delle nostre pagine web.

Mettere in risalto dei termini particolari o delle porzioni di testo, aiuta il visitatore a 
focalizzare la propria attenzione nei punti dove il programmatore lo ritenga necessario. E' 
importante però comprendere che evidenziare ha lo scopo di dar risalto a qualcosa di importante, 
non deve servire per abbellire e basta. Bisogna soprattutto evitare di evidenziare troppo o si 
otterrà l'effetto contrario.

Il non riuscire a dare l'attenzione voluta su un termine, una frase, un concetto. Per spiegarvi 
questa lezione, ho modificato la versione della lezione precedente.

Comunque, man mano che escono le lezioni nel giornale, io le aggiungo on line sul mio sito. 
Attenzione che non c'è tutto il corso completo, ripeto che vengono aggiunte le lezioni 
contemporaneamente ad ogni uscita nel giornale.

Questo è l'indirizzo: www.disabilivisivisardegna.it/corso/

Con questa URL, troverete il sito che stiamo costruendo e le lezioni. Entrateci e portatevi alla 
lezione 15 che è quella precedente a questa. Ho aggiunto delle evidenziazioni un po' ovunque di 
modo che possiate verificare.

Per chi utilizza uno Screen-reader, utilizzate il comando di lettura della formattazione del 
carattere, per verificare gli attributi. Jaws e anche NVDA usano Insert più F. Sono i due 
Screen-reader che utilizzo, quindi, per chi usasse altri Screen-reader, deve verificare qual è il 
comando ed usarlo.

Ovviamente, non potevo inserire le tag direttamente nella lezione in testo perché non funzionano 
fino a quando non avremo modificato il file CSS.

Ho evidenziato in 3 modi diversi: Corsivo, grassetto e con un colore giallo.

L'evidenziazione gialla viene assegnata anch'essa utilizzando il file CSS e Jaws legge questo 
colore utilizzando il comando insert più 5 della tastiera estesa.

Lettura del colore del carattere e dello sfondo.

Nella lezione 15 ho messo le tag contenute nelle frasi col grassetto. I termini, non tag contenute 
nelle frasi, sono in carattere corsivo. Le parole in Inglese sono in corsivo ma non le tag. Quelle 
sono tutte in inglese ma mai scrivere una tag in corsivo.

In questa pagina dimostrativa della lezione 15 ho evidenziato anche troppo, ma lo scopo è quello di 
permettere di provare con lo Screen-reader.

Comunque, con gli esempi sottostanti, potrete verificare queste tag anche in locale sul vostro pc. 
Torniamo al codice html. Vedremo immediatamente il corsivo e il grassetto. Entrambe sono delle tag 
html e le inseriremo direttamente nella pagina HTML nella parola o nella porzione di testo che 
interessa.

La tag è: e si chiude aggiungendo una barra dopo il minore come sempre: .

Quindi, la tag "minore, em, maggiore", serve a dare una enfasi al testo, e significa dare 
rilevanza, mettere in evidenza. Il browser lo fa visualizzando il testo in corsivo.

Un esempio:

Queste lezioni vengono corrette da: Nunziante Esposito

Copiate e incollate questo testo in una delle vostre pagine e verificate che Nunziante Esposito sia 
visualizzato in corsivo Per chi non si ricordasse il comando, posizionarsi su una delle due parole 
e premere insert più F.

Volendo dare ancora più rilevanza a qualche termine, potremmo decidere di farlo in grassetto e la 
tag corretta è la seguente:

Apertura tag: e chiusura tag:

Un esempio pratico:

Questo corso viene scritto da: Roberto e Nunziante.

Inserite questo codice in una pagina e verificate che Roberto e Nunziante siano in grassetto.

Ovviamente, è possibile anche creare porzioni di testo con queste enfasi, per esempio:
Questo corso viene scritto da: Roberto e Nunziante

Attenzione: è meglio evitare di annidare queste tag perché non ha un senso visivo e logico 
evidenziare del testo e poi, al suo interno, evidenziare ancora di più una parte di esso. Un 
annidamento di queste tag, più che aiutare, confonde il navigatore.

I motori di ricerca, molto spesso, utilizzano le tag em e strong per indicizzare porzioni di siti 
web e li mostrano nei risultati di ricerca.

Continuiamo il nostro discorso aggiungendo altre tag. La tag che vedremo ora, a detta di alcuni 
programmatori, potrebbe anche diventare un altro strumento per indicizzare un sito. Attenzione: non 
è una specifica e, quindi, potrebbe cambiare a seconda del motore di ricerca. In parole semplici, 
quando facciamo una ricerca con Google o altro motore, nei risultati compaiono delle porzioni di 
testo. Se evidenziamo una o più parole, il motore nei risultati metterà la frase con la parola 
evidenziata. Vero anche che, se qualcuno fa una ricerca con il motore di ricerca, nei risultati 
comparirà la frase contenente la parola evidenziata, che corrisponde alla parola cercata nel 
motore. Comunque, non è una regola fissa, quindi, attualmente, dobbiamo pensare solo alla 
gradevolezza del sito e non ai motori di ricerca.

La tag

Questa tag, nuova del linguaggio html 5, consente di creare uno sfondo di un colore a nostra 
scelta, su una parola o una porzione di testo. Ecco il codice per un esempio pratico:

Testo evidenziato in giallo, vi ricordo che questo corso viene creato da:
Roberto e Nunziante

Notate che è stata inserita la tag e la sua chiusura riscrivendola inserendo la barra dopo il 
minore, quindi, ``

Con questa tag, nella quale è stato racchiuso del testo, agendo dal foglio di stile (CSS), verrà 
scritto il codice per assegnare il colore che darà lo sfondo a questa porzione di testo.

Per chi può utilizzare la vista, sul monitor risulterà come utilizzare un evidenziatore colorato. 
Per noi che usiamo uno Screen-reader, utilizzando la combinazione di tasti appropriata, possiamo 
leggere il colore della nostra evidenziazione. Per Jaws la combinazione di tasti è insert più 5 
della tastiera estesa.

La tag:

Potremo voler dare una formattazione diversa da quella di default a qualsiasi altra porzione di 
testo in qualsiasi posizione della pagina. Utilizzando questa tag, ricordandosi di chiuderla sempre 
dopo il testo con la tag di chiusura, , racchiudiamo in questa tag una porzione di testo e, dal 
file css, gli assegniamo una formattazione diversa.

Importante: quando si parla di formattazione o personalizzazione, non si intende solo il colore, le 
dimensioni dei caratteri o il loro stile. Stiamo affrontando questi parametri, perché il corso è 
arrivato a questo punto, ma dal foglio di stile css è possibile assegnare a tutti gli elementi 
tutto quello che si vuole.

Anche con la tag è possibile dare altre informazioni al browser. Infatti, ipotizziamo di dover 
scrivere un paragrafo in Inglese, all'interno di un testo in Italiano, questa tag è l'ideale. Ecco 
il codice, prima solo con la tag :

English text

Tradotta:

testo in Inglese

Ecco un esempio di codice completo:

la tag span

numero di telefono: +39.123.456.789
telephone number: +39.123.456.789

Per chi utilizza lo Screen-reader Jaws, dopo aver copiato e incollato questo codice nel codice di 
una pagina HTML, se si vuole far leggere la porzione di testo in inglese, attivate il rilevamento 
della lingua automatica. Verificherete che appena il cursore si posiziona sulla stringa in inglese, 
la sintesi cambierà lingua, parlando in Inglese.

Questo è un esempio molto semplice, ma spiega bene il concetto, anche se, in questo caso, abbiamo 
agito solo sul codice HTML. Infine, c'è solo da dire che la tag , una volta richiamata nel foglio 
di stile (CSS), serve prevalentemente per diversificare la formattazione di una porzione di testo. 
E' stato fatto questo esempio semplice, solo ed unicamente per spiegare il concetto.

Nota importante: attenzione che la tag span, in quanto tale, è soggetta all'utilizzo degli 
attributi. Con questo voglio indicare che, se inseriamo una sola tag in tutto il sito, non serve 
aggiungere nessun attributo. Però, se di span ne abbiamo più di una, allora bisogna inserire gli 
attributi che servono, come l'identificativo (id), oppure, qualora la span servisse per più 
porzioni, è necessario usare anche una classe. Facciamo un esempio:

questo è il testo che precede il testo racchiuso nella tag span Questo testo è di colore rosso ed è 
una porzione di tutto il testo. questo è il testo che segue la porzione di testo racchiusa nella 
span.

Ovviamente, fino a quando non si inserisce la classe nel file CSS, non è possibile evidenziare in 
rosso il testo della porzione racchiusa nella span.

Il sottolineato.

Per sottolineare una porzione di testo, dobbiamo agire dal file css. A parte che non esiste più una 
tag per questa funzione, oggi dal file css possiamo personalizzare questa sottolineatura in 
centinaia di modi diversi: tratteggiata, lampeggiante, con scoppiettii vari, eccetera. Graficamente 
si può fare di tutto, quindi, sarebbe limitato usare una singola tag HTML.

Tornando al concetto, volevo specificare che, qualora si deve assegnare formattazioni diverse a più 
porzioni di testo, dobbiamo assegnare ad ogni span un identificativo (id) o una classe (class)per 
le porzioni di testo che, pur essendo come testo uguali, vogliamo differenziarne la formattazione.

Voglio sottolineare questo discorso, solo perché spesso mi capita di sentire amici che non si 
spiegano per quale motivo In tutto il sito si trovano delle sottolineature, anche dove non vogliono 
che ci siano.

Nel tempo, capita che oggi si aggiunge uno span per sottolineare, domani un altro per fare un 
paragrafo verde, un altro giorno creiamo un effetto grafico, eccetera, e tutto inserendo il codice 
nel file CSS.

Se quando si effettuano queste aggiunte non si sta attenti e non vengono dati gli identificativi o 
le classi a questi span con proprietà diverse, tutti avranno tutte le proprietà assegnate a tutti 
gli span. Il risultato sarà un testo sottolineato verde con gli effetti grafici.

Quindi, per non avere detti inconvenienti, dobbiamo ricordare di assegnare identificativi e classi 
ogni qualvolta se ne crea uno nuovo, verificando che, quello che ci serve, non esiste già nel file 
CSS.

Comunque, anche se ne rimanesse uno solo di questi span solitario, assegnare anche ad esso un 
identificativo, non crea certamente un problema al programmatore.

La tag

Questa tag l'abbiamo già incontrata in precedenza, ma sarà meglio ricordarla. In sostanza, serve 
per visualizzare il testo con un tipo di carattere più piccolo e, a suo modo, lo differenzia dal 
testo usato nella pagina. Si apre e si chiude come tutte le tag e generalmente si usa spesso per il 
copyright.

Ecco il codice di esempio: Copyright

La tag

Nelle specifiche html 5 è stata introdotta questa tag per indicare un orario di 24 ore nel 
calendario gregoriano. Con questa tag è possibile, quindi, assegnare un tempo con il computer e che 
risulta poi leggibile correttamente dai browser. Questo può anche permettere di interagire con 
applicazioni che utilizzano un calendario, ad esempio in una web application che memorizzi 
compleanni, anniversari, ecc. Infatti, con questa tag è possibile indicare un'ora esatta, una data 
esatta e la differenza del fuso orario.

Non è possibile utilizzare questa tag per indicare periodi approssimativi, come ad esempio, 
"intorno al Gennaio 2050". Insomma, viene utilizzata solo quando la data è ben definita e non è 
possibile indicare date che si riferiscono a periodi prima dell'introduzione del calendario 
gregoriano.

Come si fa per tutte le tag, anche per questa dobbiamo rispettare le specifiche e il corretto modo 
di scriverla. La stringa corretta è: "ANNO-MESE-GIORNO-ORE:MINUTI:SECONDI.MILLISECONDI-FUSO 
ORARIO". Ecco un esempio: 30 Gennaio 2014

Nota che essendo una data, è stata specificata inserendo l'attributo datetime. In questo caso, è 
stata inserita solo la data, ma nel caso si volesse specificare anche l'ora, attenersi alla stringa 
corretta indicata sopra.

Se vi ricordate, nelle lezioni precedenti abbiamo visto la tag
. Spesso questa tag viene utilizzata nei blog, per pubblicare gli articoli e, inserire la data, 
anche per eventuali commenti, è molto importante dal punto di vista cronologico.

Ecco il codice per un esempio:

Giovedì 13 Febbraio 2014

Nunziante ha scritto:

Cerchiamo di studiare il linguaggio html 5 che facciamo noi i siti e risolviamo il problema 
dell'accessibilità.

Nunziante

La tag time, se inserita in un articolo, indica la pubblicazione di quell'articolo. Se invece viene 
inserita nella pagina, di solito indica l'ultimo aggiornamento. Nella versione on line di questo 
corso, aggiorno nel footer la data ogni qualvolta inserisco una nuova lezione.

Come esempio pratico, vi riporto il codice che ho inserito a fondo pagina nel corso on-line, una 
lista di definizione:

Created by:

EvyWeb

WebMaster

Roberto@evyweb.it
ultimo aggiornamento

30 Gennaio 2014

Vi rimando alla prossima lezione, dove, utilizzando il linguaggio CSS, rivedremo le tag 
sopraindicate, per completare il loro codice e per apportare dei cambiamenti allo stile dei 
caratteri.

***********

Per ulteriori spiegazioni, scrivere a: Roberto Abutzu