Caratteri speciali, fonts e cosmesi del testo 

Se avete seguito con profitto le lezioni precedenti dovreste essere in grado di scrivere la vostra pagina web completa di testo, immagini e links vari. Forse vi sarete già accorti che scrivendo in HTML non sempre è possibile ottenere lo stesso risultato che si ottiene con la normale scrittura di un testo. Certi caratteri hanno infatti delle regole ben precise, si tratta semplicemente di conoscerle ed applicarle.

Una delle primissime cose che si notano è l’impossibilità di poter lasciare più di uno spazio vuoto fra una parola e l’altra. Html ignora tutti gli spazi in più inseriti con la barra spaziatrice e ne lascia di fatto uno soltanto.

Se non ve ne siete accorti provate a scrivere una frase mettendo più spazi fra le varie parole, provate poi a guardare il risultato sul vostro browser, noterete con sorpresa che tutti gli spazi sono stati ignorati e sostituiti da uno soltanto. Questo è del tutto normale trattandosi di una caratteristica di HTML.

Come fare per averne più spazio nel caso in cui servisse distanziare maggiormente alcune parole?

Con appositi codici che servono proprio ad introdurre spazi vuoti. Questo simbolo   significa non-breaking space, (da notare che non va inserito fra parentesi angolari non essendo un elemento o tag), se ne possono mettere tanti quanti sono gli spazi vuoti desiderati, così facendo il browser eseguirà la richiesta.

Anche tornare a capo all’interno di uno stesso paragrafo diventa impossibile; come già detto nella prima lezione: la semplice pressione del tasto invio (o return a seconda del tipo di tastiera), non è sufficiente per forzare un ritorno a capo del testo, per fare questa operazione si adopera il tag <br> questo tag forza un ritorno a capo, più <br> consecutivi equivalgono a più ritorni a capo e di conseguenza a saltare tante righe quanti sono i br inseriti.

I due metodi sopra descritti sono di gran lunga i più adoperati durante la scrittura di un testo html, da qui una logica considerazione: ma per ottenere un semplice spazio vuoto c’è bisogno di un’operazione così macchinosa come digitare una sequenza di 5 caratteri?

Se adoperate un normale editor di testo si, se invece vi siete procurati un editor specifico per html no, nella peggiore delle ipotesi si tratta di fare click su un pulsantino che introdurrà quella sequenza di caratteri, quasi come premere la barra spaziatrice sulla tastiera.

Ci sono anche altri caratteri che conviene introdurre con le corrette regole che HTML richiede, si tratta di caratteri particolari che spesso si adoperano nella comune scrittura. Noi Italiani per esempio abbiamo le vocali accentate, se scritte come da tastiera queste potrebbero mettere in crisi il browser che le visualizza, è perciò preferibile adoperare il relativo codice per ottenerle:

Se fate uso di un metatag, che vedremo più avanti nella lezione su head, per definire il set di caratteri usato in tutta la pagina, a seconda di quale tipo di codifica userete, sarà possibile scrivere le vocali accentate senza bisogno di codici, semplicemente così come vengono digitate dalla tastiera.

Anche le doppie virgolette, le parentesi angolari e tutto quello che potrebbe essere male interpretato conviene scriverlo con il suo codice; ecco qui di seguito l’elenco dei caratteri di uso più comune:

Per concludere alcuni caratteri speciali che potrebbero risultare utili:

Per rendere una pagina più leggibile o anche solo più gradevole, si fa spesso ricorso ad una specie di cosmesi del testo, si usa infatti sottolinearlo, enfatizzarlo, inclinarlo, ridimensionarlo, ecc. ecc.

Vediamo quali sono gli elementi (tags) che producono questi effetti.

<strong></strong> = bold o grassetto.

Tutto quello che sarà scritto all’interno dei tags <strong> e </strong> sarà visualizzato in grassetto.

Facciamo un esempio: dovendo scrivere “Web-Link.it tutto per la tua pagina web” e volendo evidenziare la scritta Web-Link.it in grassetto, si dovrà racchiudere questa fra i due tags <strong> e </strong> in  questo modo:

Questo il risultato:

Avremo potuto ottenere lo stesso risultato adoperando <b></b> che sono equivalenti di <strong></strong>. B è ancora usato ed è l’iniziale della parola inglese Bold ma visto che nelle prossime versioni potrebbe essere tolto, meglio abituarsi a non usarlo a favore di strong. Meglio ancora se si usano i CSS:

Questo il risultato:

il tag <span> che necessita del relativo </span> di chiusura, è un contenitore vuoto che non provoca alcun ritorno a capo né spaziature particolari, può essere adoperato all’interno di testi per cambiare gli attributi soltanto a parti del testo e non ad interi paragrafi come succedeva con <p>

<em> </em> = Italico, inclinato.

Tutto quello che sarà scritto all’interno dei tags <em> e </em> sarà visualizzato in italico.

Facciamo ancora lo stesso esempio: dovendo scrivere “Web-Link.it tutto per la tua pagina web”
e volendo la scritta Web-Link.it in italico, si dovrà racchiudere questa fra i due tags <em> e </em>, in questo modo:

Questo il risultato:

Avremo potuto ottenere lo stesso risultato adoperando <i></i> che sono equivalenti di <em></em>. I è ancora usato ed è l’iniziale della parola inglese Italic ma visto che nelle prossime versioni potrebbe essere tolto, meglio abituarsi a non usarlo a favore di em. Meglio ancora se si usano i CSS:

Questo il risultato:

Risulta abbastanza logico pensare che si possono combinare i vari tags di html fra di loro, nidificandoli, e di conseguenza sommandone i vari effetti: grassetto più inclinato:
<strong><em> web-link.it </em></strong>
così da ottenere:

web-link.it tutto per la tua pagina web.

Meglio da css inserendo le due dichiarazioni all’interno dello stesso tag <span>
<span style=”font-weight: bold; font-style: italic;”>web-link.it</span> tutto per la tua pagina web.
così da ottenere:

web-link.it tutto per la tua pagina web

E’ anche possibile cambiare il colore, le dimensioni, il tipo di font ed altro ancora. Mentre con gli attributi del solo html si poteva fare ben poco, grazie alle dichiarazioni di style non ci sono praticamente più limiti.

Vediamo come si adoperano:

Questo il risultato:

style=”color: valore o nome; dove per valore o nome sono ammessi i nomi dei colori in lingua inglese o il numero del colore in formato esadecimale, ottale, rgb, ecc. (noi useremo il numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto). Su questo link ben 225 esempi di colori e relativi codici validi.

Produrrà lo stesso risultato:

Volendo cambiare colore, sfondo, font o qualsiasi altra cosa all’interno dello stesso paragrafo, facendo uso di <span> e di vari attributi di style.

Produrrà questo risultato:

Ho aperto un paragrafo <p> al quale ho assegnato come colore di sfondo il nero (Black) ad ogni parola ho cambiato colore con <span> che non provoca ritorni a capo.

font-family Si possono elencare più famiglie di caratteri: Verdana, Helvetica, Arial, sans-serif, ecc. per dare la possibilità al browser di selezionare quella presente sul PC del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno chiudere la lista con una famiglia generica come sans-serif per essere certi di trovare un riscontro sempre e comunque.

Mai usare font di caratteri strani presenti solo nel vostro PC, in pochi li possiedono ed il risultato visto da tutti gli altri risulterà decisamente diverso da quello che avreste voluto.

Questo il risultato:

font-size Si possono inserire valori da più unità di misura: punti (pt), pixel (px), valori in percentuale (%). nomi riservati (larger) ecc. ecc.

Questo il risultato:

Per il tipo di font, come detto sopra, evitate di adoperare fonts particolari che sono sicuramente molto belli per voi che li preferite ad altri ma che di fatto poi non si trovano installati su tutti i PC di chi visita la vostra pagina, in quel caso sarebbero sostituiti con un font standard ed il risultato sarebbe decisamente diverso e deludente da quello previsto.

Sono molte altre le possibilità di personalizzare il testo usando i css, per il momento è sufficiente aver capito il meccanismo, poi la guida CSS vi illustrerà molte di queste possibilità ma anche tecniche diverse per gestire i fogli di style, magari invece di dichiararli di volta in volta sul tag che vi serve si potrebbe pensare ad un solo ed unico foglio di style esterno, richiamato da tutte le pagine, ma per il momento non andiamo oltre non vorrei confondervi le idee.

Con questa lezione avete imparato ad introdurre caratteri speciali e modificare il testo in modo da renderlo più gradevole alla lettura, nella prossima lezione vedremo le tabelle che servono per ordinare ed incolonnare i dati.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.