Formattazione del testo

Nella lezione scorsa abbiamo visto come inserire elementi di testo Html in una pagina Web e ci siamo potuti accorgerci di alcune cose: il colore del testo è impostato per default in nero, il font (carattere) è il Times New Roman, l'allineamento è a sinistra ed ha una certa dimensione.

Colore, dimensione e tipi di carattere per il testo

Vediamo ora come formattare il testo e modificare queste impostazioni di default del browser; per agire sul colore, dimensione e carattere utilizziamo il Tag <font> e </font> ed utilizziamo tre attributi, color (colore), size (dimensione) e face (carattere).

Proviamo a formattare un testo qualsiasi, impostando il colore rosso, una dimensione inferiore a quella di default ed il Verdana come carattere:

<p>
   <font color="Red" size="3" face="Verdana">
      Testo formattato!
   </font>
</p>

Nota: nessuno dei tre attributi è obbligatorio, è possibile decidere ad esempio di cambiare solo il colore, solo il carattere e cosi via.

Impostiamo il font in apertura all'inizio del testo che vogliamo formattare il quella maniera e lo chiudiamo alla fine.

I caratteri, o font, sono dei file con estensione .ttf (True Type Font) che si trovano sul sistema operativo, su Windows '98 nel percorso C:\WINDOWS\Fonts, su Windows 2000 e Windows NT nel percorso C:\WINNT\Fonts, che è una directory di sistema; tengo a puntualizzare questo perchè, se decidessimo di utilizzare un font particolare per una nostra pagina, si corre il rischio che un utente che non ha quel font installato sul proprio PC, non potrà leggerlo e di conseguenza perderebbe parte del senso del sito.

I font più usati e di sicuro presenti su tutti i sistemi, che sono poi quelli che normalmente troviamo sulle pagine Web, sono:

Arial
Arial Narrow
Arial Black
Tahoma
Verdana
Sans Serif
Times New Roman

La categoria Sans Serif indica tutti i caratteri senza grazie, ovvero senza particolari sfumature di stile, di quelli elencati fanno tutti parte di questa categoria, meno il Times New Roman.

All'interno di un Tag <font face="[carattere]"> possiamo inserire più font (intesi come caratteri), separandoli da una virgola e da uno spazio (lo spazio è opzionale), in modo che, in mancanza di uno, troviamo immediatamente il successivo, e cosi via; si consiglia di non inserirne più di tre o quattro:

<font face="Verdana, Tahoma, Sans Serif">

ovvero, "cerca il Verdana, se non lo trovi cerca il Tahoma, se non lo trovi cerca il primo carattere senza grazie ed usa quello".

La dimensione del testo è impostata per default a 3 e possiamo modificarla impostando il size da 1 a 7; un testo con dimensione del carattere impostata a 7 è più grande di un titolo di primo livello <h1>.

Nota: per quanto riguarda il colore, abbiamo ter diversi modi di definirlo, con nomi di colori (in inglese), con Codici Esadecimali e con Codici RGB. Visualizza la tabella dei colori.

Allineamento del testo sulla pagina

Per allineare un testo sulla pagina utilizziamo l'attributo align per tutti gli elementi di testo, i cui valori possono essere left (di default), center e right: quindi <p align="center"> allineerà un testo al centro della pagina.

Si implementi questo esempio in un file già creato per gli esempi scorsi.

Esiste poi il Tag <center> e </center> per l'allineamento al centro di un elemento, a cui però viene preferito l'utilizzo di align.

Grassetto, corsivo e caratteri sottolineati

Possiamo definire lo stile del testo utilizzando il grassetto, il corsivo ed il sottolineato, rispettivamente con i Tag <b> (bold), <i> (italic) e <u> (underline).

Vediamo un esempio:

<p><b>Testo in grassetto</b></p>

<p><i>Testo in corsivo</i></p>

<p><u>Testo sottolineato</u></p>

Interruzione di riga e caratteri speciali Possiamo creare un'interruzione di riga con l'utilizzo del Tag <br> (break), a tanti break corrispondono tanti ritorni a capo:

<p>
   Questo testo andrà<br>
   a capo!
</p>

Parliamo ora dei caratteri speciali: si tratta di un tipo di simbologia che ci permette di scrivere caratteri che normalmente non saremmo in grado scrivere col proprio simbolo, ad esempio immaginiamo di voler scrivere su di una pagina un Tag Html... normalmente il browser lo interpreta come Tag e lo esegue, ma con l'utilizzo di caratteri speciali questo diventa possibile.

Riporto alcuni esempi:

&nbsp; spazio vuoto ed unificatore
&copy; ©
&reg; ®
&lt; <
&gt; >
&#187; »
&#171; «

Nota: naturalmente questo elenco è incompleto, i caratteri speciali sono moltissimi.

Mi vorrei soffermare per un momento sullo spazio unificatore; il simbolo &nbsp; provoca uno spazio bianco, che normalmente otteniamo digitandolo con la barra spaziatrice della tastiera, ma se ne volessimo ottenere due o più? con la tastiera non è possibile, quindi, inserendo tra due lettere o parole più spazi unificatori, si otterrà una spaziatura maggiore:

<p>C&nbsp;&nbsp;I&nbsp;&nbsp;A&nbsp;&nbsp;O</p>

In più, due lettere o parole con in mezzo uno spazio unificatore, non finiranno mai per andare a capo se si trovano a fine pagina, ad esempio, le parole Hello&nbsp;World cosi scritte non andranno mai a capo.

Autore: Luca Ruggiero