html517
Corso html 5, lezione 17.
Roberto Abutzu  su uiciechi.it, 2017-03.

Diciassettesima parte: "Evidenziare del testo".

**********

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

Evidenziare del testo.

Nella lezione precedente, la 16, abbiamo visto come assegnare delle tag in linguaggio html 5 per 
personalizzare il testo delle nostre pagine con delle
evidenziazioni.

Il corsivo, il grassetto, l'evidenziato di colore diverso, permettono di mettere in risalto una 
parola, una frase, un concetto a cui il programmatore ritiene
di dover dare più importanza.

Il corsivo e il grassetto vivono di vita propria nella pagina html ma molte di queste 
personalizzazioni, come l'evidenziato, utilizzano entrambi i linguaggi
per operare.

Quindi, come già rimarcato nella lezione precedente, in questa lezione verrà spiegato del codice 
css che necessita del codice html già analizzato nella
lezione precedente.

Ecco perché la lezione 16 e la 17 di questo corso vanno considerate come un'unica lezione.

Anche qui, voglio rimarcare il concetto che la formattazione delle pagine e l'evidenziato devono 
comunque rendere un risultato pulito nelle pagine.

Il troppo uso di queste personalizzazioni, rende esattamente l'effetto contrario confondendo il 
visitatore del sito più che aiutarlo.

Si parla molto di accessibilità, dimenticando un'altra prerogativa delle pagine web: L'usabilità.

Un sito che è confusionario, stufa l'utente che non lo visiterà più.

Gli effetti speciali lasciamoli al cinema di Hollywood, noi qui facciamo siti.

Conclusa la premessa, ora iniziamo col codice css.

"id e class".

Questi sono attributi che possiamo assegnare agli elementi html in una pagina web.

L'Id, identificativo univoco, assegna un nome a una qualsiasi tag html e, grazie al suo nome 
proprio, consente di richiamare nel file css questa tag per
personalizzarla.

La “class” funziona in modo simile, ma a differenza dell'attributo id, questa può essere applicata 
a più elementi della stessa pagina.

Ovviamente, anche la class ha un suo nome proprio e con questo viene richiamata nel file css.

In una pagina web è possibile inserire più id e più classi, ricordandosi di assegnare nomi univoci.

Di seguito, con degli esempi, vediamo come richiamarli nel file css, considerando che questi esempi 
hanno lo scopo di spiegare il codice e non sono realmente
da applicare al nostro sito, quello che stiamo costruendo nel corso.

"id".

ecco il codice:

#content {color: #FF0000; }

oppure:

#content {color: red; }

Entrambi questi codici assegnano il colore rosso ai caratteri contenuti nella tag chiamata 
"content".

Se vi ricordate, avevamo assegnato nella nostra pagina questo nome a un Div che racchiudeva i 
nostri contenuti, escludendo quindi menu, footer ecc.

Da cosa comprendiamo che questo è un identificativo (id)?

Dal fatto che prima del selettore, "content" in questo caso, viene messo un cancelletto.

In questo esempio ho riportato solo il colore del carattere ma si può inserire in questo codice, 
all'interno delle parentesi graffe, tutte le proprietà
che vogliamo, con i valori voluti.

Potete assegnare caratteri diversi, dimensioni diverse, sfondi diversi, insomma, una 
personalizzazione completa, a tutti i contenuti raggruppati all'interno
di questa "div content".

La "class".

Il codice è uguale a quello dell'attributo Id, solo che bisogna inserire un punto nel selettore al 
posto del cancelletto.

Nella lezione precedente avevamo creato delle class tra cui quella chiamata: "rosso".

Nota importante: ricordatevi di riportare i nomi corretti facendo attenzione anche al maiuscolo e 
minuscolo.

Rivediamo lo stesso esempio sopra indicato, ma assegnando la proprietà: valore alla class: "rosso".

Ecco il codice:

.rosso {color: #FF0000; }

oppure:

.rosso {color: red; }

Notate che prima del nome del selettore c'è un punto, quello che determina che il selettore è una 
class.

Con questo selettore, stiamo dando delle proprietà a una classe.

Tutte le tag html a cui abbiamo inserito questo attributo, con questa class, mostreranno sulla 
pagina il testo con un carattere di colore rosso.

Evidenziare con la tag "mark".

Nella scorsa lezione abbiamo citato una nuova tag, la "mark".

La "mark" permette di creare uno sfondo colorato su una parola, una frase, un paragrafo. Vedere la 
lezione precedente per il codice html.

Il colore che dovrà avere lo sfondo per evidenziare questo testo, viene indicato nel file css.

Questo è il codice:

mark {background-color: yellow; }

Notate la proprietà “background” che indica lo sfondo che è quello a cui stiamo dando il colore. In 
questo sfondo, ho assegnato: "yellow" il giallo. Inoltre,
essendo una tag e non un attributo, la "mark" non necessita di punti o cancelletti quando si scrive 
come selettore nel file css.

la tag "span".

Questa tag permette di delimitare porzioni di testo all'interno della pagina html, per dargli 
formattazioni diversificate. Nella lezione precedente, ho
assegnato la lingua inglese a questa tag, inserendo del testo appunto in Inglese. Ipotizzando che 
questo testo io lo voglia rosso, il codice sarà:

span {color: red; }

In questo specifico caso, avendo inserito una sola span nel file html, quindi, se inserisco il 
codice css sopra indicato, funzionerà correttamente, facendo
diventare Rosso il testo in Inglese.

Ora vi riporto un esempio che chiarirà ulteriormente i concetti spiegati sopra per gli attributi 
"id" e "class".

Ipotizziamo che ho deciso di inserire anche la lingua Francese e Tedesca. Decido di assegnare 
colori diversi per ogni lingua. Dovendo assegnare un colore
diverso ad ogni lingua, come procedo?

Nel file html, darò degli identificativi ad ogni lingua, quindi, un id ad ogni span.

Esempio:

Inglese=rosso.
Francese=blu.
Tedesco= verde.
Assegno gli id dando ad ognuno il nome del colore corrispondente.

Il codice css sarà:

#rosso {color: red; }

#blu {color: blue; }

#verde {color: green; }

Ho richiamato i tre identificativi e gli ho assegnato il colore del carattere. Per comodità e 
maggior semplicità delle spiegazioni, sto inserendo i colori
primari: red, Yellow, green, eccetera, ma qualora si volesse inserire dei colori particolari o 
intonazioni diverse, bisogna utilizzare il codice esadecimale.
Per indicare i colori in esadecimale, ci sono delle tabelle apposite sui siti specializzati per la 
costruzione dei siti. Basta fare una ricerca con il
motore di ricerca www.google.it

Comunque, per conoscenza, anche i colori primari vengono consentiti nelle disposizioni del W3c, 
quindi, se non si ha bisogno di colori particolari, basta
usare quelli.

Tornando ai nostri esempi, vi faccio notare un particolare molto importante per evitarvi 
confusione. All'inizio della lezione ho utilizzato il selettore:
".rosso". Ora ho utilizzato il codice: "#rosso".

Sembra esserci un errore, perché ho utilizzato lo stesso Id due volte!?!?

No, in effetti non c'è nessun errore. Infatti, se rileggete il codice, noterete che uno è un id e 
l'altro è una class. La differenza sta tutta in un particolare
che tante volte può sfuggire e bisogna fare attenzione: un elemento ha il punto iniziale e l'altro 
ha il cancelletto prima del nome del selettore.

Però, vorrei farvi notare ulteriormente quanto è facile cadere in errore con queste stringhe.

Il codice sopra indicato è corretto, ma, ipotizzando in un secondo momento di voler dare il colore 
rosso ad una intestazione particolare, si potrebbe rischiare
di commettere errori di copia o trascrizione, quindi, bisogna fare molta attenzione.

Questi che abbiamo visto sopra, sono solo esempi che ci sono serviti per capire il codice CSS da 
usare. Non saranno utilizzati nelle nostre pagine nella
forma vista, ma saranno indicati in modo completo. Nelle vostre pagine sarà importante inserire 
identificativi univoci che davvero poi vi permettano di
non confonderli.

Qualora dovete modificare solo il colore del carattere, la "class" và benissimo sia quando sono due 
elementi, sia se ne sono trenta. Nel caso opposto,
quando cioè gli elementi da trattare sono pochi, vi conviene utilizzare l'Id.

Sicuramente vi sarete fatti questa domanda: "Una tag, può avere sia l'Id che la Class?".

Certamente! Ma, e soprattutto per noi non vedenti, bisogna fare attenzione a non annidare troppi 
elementi, perché può diventare difficoltoso quando poi
c'è da apportare delle modifiche alle pagine.

Questo solo per dirvi di assicurarvi di mettervi in condizione di poter gestire le pagine non solo 
quando viene costruito il sito, ma anche successivamente
nelle modifiche.

“Il sottolineato”.

Volendo, è possibile sottolineare del testo invece di evidenziarlo. Queste, poi, sono e rimangono 
scelte soggettive del programmatore. Però, e ve lo consiglio,
generalmente si evita la sottolineatura, perché, per default, i browser sottolineano i link, 
quindi, sottolineando del testo, si confondono vedenti ed
ipovedenti.

In particolare, nel nostro caso questo non può accadere, perché, nelle lezioni dove ho spiegato il 
css per questi elementi, ho inserito la proprietà senza
questa sottolineatura, quindi, nel sito che stiamo costruendo, i link non saranno sottolineati e se 
sottolineate del testo, non si può confondere.

Comunque, è meglio evitare, perché i navigatori vedenti ed ipovedenti hanno l'abitudine di 
riconoscere un testo sottolineato come link, quindi, sottolineare
del testo, trae in inganno il navigatore ed è molto fastidioso.

Ecco di seguito la stringa, è la stessa che ho utilizzato per dare la proprietà a un link quando il 
puntatore del mouse passa sopra un link.

`` a:hover {text-decoration: underline; }``

Il selettore indica appunto lo stato del link quando il puntatore è sopra, la proprietà è: 
"text-decoration", il suo valore è: "underline", quindi, sottolineato.

Se volessi sottolineare il testo contenuto nella prima "span", quella che contiene il testo in 
inglese, la stringa sarà:

span {text-decoration: underline; color: red; }

La porzione di testo contenuta nella "span", sarà in Inglese, rossa e sottolineata.

Vi rimando alla prossima lezione, dove, utilizzando il linguaggio CSS, vedremo gli elementi per 
ordinare gli oggetti nella pagina.

***********

Per ulteriori spiegazioni, scrivere a: Roberto Abutzu