Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********`

Transcript

1 Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` 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 è: <div id="content"> 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: <h2>prova della classe</h2> <p class="rosso"> Importante per scrivere in rosso alcuni paragrafi</p> <p>utilizzando la classe è possibile creare dei paragrafi rossi.</p>

2 <p class="rosso"> Naturalmente poi si lavora nel file css.</p> <p>questi 4 paragrafi, saranno due rossi e due del colore che avete assegnato per i caratteri nel vostro file CSS.</p> 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: <p class="rosso"> 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: <h2 class="rosso">questa intestazione sarà rossa</h2> 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. 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. Ho evidenziato in 3 modi diversi: Corsivo, grassetto e con un colore giallo. L'evidenziazione gialla viene assegnata anch'essa utilizzando il file CSS

3 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 è: <em> e si chiude aggiungendo una barra dopo il minore come sempre: </em> 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: <p>queste lezioni vengono corrette da: <em>nunziante Esposito</em></p> 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: <strong> e chiusura tag: </strong> Un esempio pratico: <p>questo corso viene scritto da: <strong>roberto</strong> e <strong>nunziante</strong>.</p> 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: <p><em>questo corso viene scritto da:</em> <strong>roberto e Nunziante</strong></p> 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 <mark> 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.

4 Ecco il codice per un esempio pratico: <p><em>testo evidenziato in giallo, vi ricordo che questo corso viene creato da:</em><br /> <mark>roberto e Nunziante</mark></p><br /> Notate che è stata inserita la tag <mark> e la sua chiusura riscrivendola inserendo la barra dopo il minore, quindi, </mark> 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: <span> 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, </span>, 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 <span> è 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 <span>: <span lang="en">english text</span> Tradotta: <span lang="en">testo in Inglese</span> Ecco un esempio di codice completo: <h2><strong>la tag span</strong></h2> <p><em>numero di telefono: </em><br /> <span lang="en">telephone number: </span></p> 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 <span>``, 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: <p>questo è il testo che precede il testo racchiuso nella tag span <span id="testo1" class="rosso">questo testo è di colore rosso ed è una porzione di tutto il testo.</span> questo è il testo che segue la porzione di testo racchiusa nella span.</p> Ovviamente, fino a quando non si inserisce la classe nel file CSS, non è possibile evidenziare in rosso il testo della porzione racchiusa nella "span".

5 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 <small> 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: <small>copyright</small> La tag <time> 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: <time datetime=" ">30 Gennaio 2014</time> 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 <article>.

6 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: <article> <h3> <time datetime=" ">giovedì 13 Febbraio 2014</time> Nunziante ha scritto: </h3> <p><strong>cerchiamo di studiare il linguaggio html 5 che facciamo noi i siti e risolviamo il problema dell'accessibilità.</strong></p> <footer> <address><a href="mailto:">nunziante</a></address> </footer> </article> 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: <footer> <dl> <dt>created by: </dt> <dd><a href=" <dt>webmaster</dt> <dd><address><a href="mailto:roberto@evyweb.it">roberto@evyweb.it</a></address></dd> <dt>ultimo aggiornamento</dt> <dd><time datetime=" ">30 Gennaio 2014</time></dd> </dl> </footer> 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@evyweb.it