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 è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Html ignora tutti gli spazi in più inseriti con il metodo normale (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 le parole?

Con appositi codici che servono esclusivamente 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 desiderati, così facendo il browser eseguirà la richiesta.

Anche tornare a capo diventa difficile all'interno di uno stesso paragrafo; 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, per fare questa operazione si adopera il tag <br> maiuscolo o minuscolo che sia non importa, questo tag forza un ritorno a capo, più <br> consecutivi equivalgono a più ritorni a capo e di conseguenza 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 la logica considerazione: 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 testi si, se invece vi siete procurati un editor specifico per html no, nella peggiore delle ipotesi si tratta probabilmente 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:

à = &agrave;
è = &egrave;
ì = &igrave;
ò = &ograve;
ù = &ugrave;

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:

" = &quot;
& = &amp;
< = &lt;
> = &gt;
€ = &euro;

Per concludere alcuni caratteri speciali che potrebbero risultare utili:

© = &copy;
® = &reg;
£ = &pound;
¼ = &frac14;
½ = &frac12;
¾ = &frac34;
¹ = &sup1;
º = &ordm;

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:

web-link.it tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando <b></b> che sono equivalenti di<strong></strong>. B è stato usato fino ad oggi ed era l'iniziale della parola inglese Bold.

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

web-link.it tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando <i></i> che sono equivalenti di <em></em>. I è stato usato fino ad oggi ed era l'iniziale della parola inglese Italic.

Risulta abbastanza logico pensare che si possono combinare i vari tags 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.

E' anche possibile cambiare il colore, le dimensioni, il tipo di font ed altro ancora. I metodi sono due:

Adoperare il tag <font> con i relativi parametri o fare uso di un foglio di style, prima di parlare di fogli di style aspetterei di aver acquisito un minimo di familiarità con il linguaggio html di base.

Per il tag font l'operazione è molto semplice, si tratta di racchiudere il testo fra i tags <font> e </font> con la consueta procedura adoperata per tutti gli altri elementi (tags). Fra gli attributi (parametri) adoperabili con font si trovano: color, face e size. Rispettivamente per: colore, tipo di carattere e dimensioni dello stesso.

Vediamo come si adoperano:

<font color="valore o nome"> fra le doppie virgolette sono ammessi i nomi dei colori in lingua inglese o il numero del colore in formato esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto). Su questo link alcuni esempi.

<font color="green"> o anche

<font color="#008000"> produrranno lo stesso effetto e cioè questo:

testo scritto in verde

<font face="nome del carattere"> cambia il tipo di font o carattere adoperando quello specificato fra le doppie virgolette:

<font face="Comic Sans MS">

Testo scrivendo con il font Comic Sans MS

<font size="valore numerico"> cambia le dimensioni del font o carattere, dove il valore specificato può avere un numero compreso fa -6 e +7:

<font size="3">

Sto scrivendo con un font dimensione 3

<font size="-2">

Sto scrivendo con un font dimensione -2

<font size="+2">

Sto scrivendo con un font dimensione +2

Anche in questo caso si possono avere più attributi per lo stesso font e combinarli fra di loro:

<font color="#008000" size="3" face="Comic Sans MS">

testo con font dimensione 3 colore verde carattere Comic Sans MS

Attenzione: le dimensioni del carattere dipendono anche dalle impostazioni personalizzate sul browser di chi ci visita, soltanto con i CSS si possono forzare queste impostazioni.

Per il tipo di font 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 nel PC di chi visita la pagina, in quel caso sarebbero sostituiti con un font standard ed il risultato sarebbe decisamente diverso e deludente da quello previsto.

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 come ottenere uno sfondo fatto da una immagine o come cambiare il colore dei links e l'importanza dei comandi che è possibile inserire in head.

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