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 infatti hanno regole ben precise, si tratta semplicemente di conoscerle ed applicarle.

Una delle prime cose che si nota è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Html infatti ignora tutti gli spazi inseriti con il metodo normale e ne  lascia di fatto uno soltanto, provate dunque a scrivere una frase mettendo più spazi vuoti 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, questa è una caratteristica di HTML, come fare allora per averne più spazio nel caso in cui servisse distanziare le parole?

Con appositi codici che servono esclusivamente ad introdurre spazi:
  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 quindi saltare tante righe quanti sono i BR inseriti.

I due metodi sopra 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 macchinosa come digitare quella sequenza di 5 caratteri? Se adoperate un normale editor di testi si, se invece vi siete procurati un editor html, probabilmente si tratta di fare click su un pulsantino che introdurrà quella sequenza di caratteri, quasi come premere il tasto spazio sulla tastiera.

Ci sono anche altri caratteri che conviene introdurre con le corrette regole che HTML impone, si tratta di caratteri particolari ma che spesso si adoperano nella comune scrittura; per esempio noi Italiani 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 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.

<B> </B> = bold o grassetto.
Tutto quello che sarà scritto all'interno dei tag <B> e </B> sarà visualizzato in grassetto, facciamo un esempio: dovendo scrivere
" www.Mio-Sito.it ==> il mio primo Sito Web"
e volendo la scritta www.Mio-Sito.it in grassetto, si dovrà racchiudere questa fra i due tag <B> e </B>, in  questo modo:
www.<B>Mio-Sito.it</B> tutto per la tua pagina web.
Questo il risultato:
www.mio-sito.it tutto per la tua pagina web
Avremo potuto ottenere lo stesso risultato adoperando <strong> e </strong> che sono equivalenti.

<U> </U> = Underline, sottolineato.
Tutto quello che sarà scritto all'interno dei tag <U>e</U> sarà visualizzato in sottolineato, facciamo lo stesso esempio: dovendo scrivere
" www.mio-sito.it il mio primo sito web"
e volendo la scritta www.Mio-Sito.it in sottolineato, si dovrà racchiudere questa fra i due tag <U> e</U>, in  questo modo:
www.<U>mio-sito.it</U> tutto per la tua pagina web.
Questo il risultato:
www.mio-sito.it tutto per la tua pagina web

<I> </I> = Italico, inclinato.
Tutto quello che sarà scritto all'interno dei tag <I> e </I> sarà visualizzato in italico, facciamo ancora lo stesso esempio: dovendo scrivere
" www.Mio-Sito.it tutto per la tua pagina web"
e volendo la scritta www.Mio-Sito.it in italico, si dovrà racchiudere questa fra i due tag <I> e </I>, in  questo modo:
www.<I>mio-sito.it</I> tutto per la tua pagina web.
Questo il risultato:
www.mio-sito.it tutto per la tua pagina web
Avremo potuto ottenere lo stesso risultato adoperando <em> e </em> che sono equivalenti.

Viene da se che si possono combinare i vari tag fra di loro nidificandoli  e di conseguenza sommandone i vari effetti: sottolineato più grassetto più inclinato:<strong><u><i> mio-sito.it</i></u></strong> così da ottenere:
www.mio-sito tutto per la tua pagina web

E' anche possibile cambiare il colore, le dimensioni, il tipo di carattere adoperato per la scrittura. I metodi sono due: Adoperare il tag <font> con i relativi parametri o fare uso di un foglio di style, per quest'ultimo aspetterei di aver acquisito una certa familiarità con il linguaggio html.
Per il tag font invece l'operazione è molto semplice, si tratta di racchiudere il testo fra i tags <font> </font> con la consueta procedura adoperata per tutti gli altri elementi (tags). Fra gli attributi (parametri)  adoperabili :
color, face, size. Rispettivamente per colore, tipo di carattere e dimensioni dello stesso.

Vediamo come adoperarli questi attributi:
color=" " Fra le doppie virgolette sono ammessi i nomi dei colori in lingua inglese, oppure il numero del colore in formato numerico in base esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto).

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 carattere adoperando quello specificato:
<font face="Comic Sans MS">
Sto scrivendo con il font Comic Sans MS

<font size="numero">cambia le dimensioni del carattere, dove numero può avere un valore 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

Anche in questo caso si possono avere più attributi e combinarli fra loro:
<font color="#008000" size="3" face="Comic Sans MS">
Questo il risultato: Sto scrivendo con un font dimensione 3 di colore verde e carattere Comic Sans MS

Attenzione: le dimensioni del carattere dipendono anche dalle impostazioni personalizzate del browser adoperato da chi visiterà la nostra pagina, ci sono impostazioni a volte decisamente diverse da quelle da noi previste ma in questo caso possiamo fare poco visto che il problema non riguarda la nostra pagina ma le preferenze di chi la visita.

Per il tipo di font invece evitate di adoperare certi fonts particolari che sono forse molto belli ma che di fatto poi non si trovano a corredo del PC di chi visita la pagina, sarebbero sostituiti con un font standard ed il risultato sarebbe decisamente diverso da quello previsto.

Con questa lezione avete imparato ad introdurre caratteri speciali e modificare il testo in modo da renderne più gradevole la sua lettura, nella prossima lezione vedremo come ottenere uno sfondo con immagine, come cambiare il colore dei links, l'importanza dei comandi inseriti nell' HEAD.

 
Lezione Precedente   Lezione Successiva