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 http://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
