Scegliere il colore del testo in HTML

Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice secondo il markup HTML:

<font color="blue">testo blu</font>
<br/>
ovvero:
<br/>
<font color="#0000FF">testo blu</font>

La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che “face” e “color” sono entrambi attributi del tag <font>):

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
testo blu in Verdana
</font>

Una volta scelto il colore possiamo sempre decidere di cambiarlo:

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana</font><br />
<font face="Verdana, Arial, Helvetica, sans-serif" color="red">testo rosso</font><br />
o meglio ancora:<br />
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana<br />
<font color="red">testo rosso</font><br />
</font>

La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l’uno dentro l’altro.

Le dimensioni del testo con HTML <font size

Le dimensioni del testo si attribuisco mediante l’attributo ‘size’ del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>:

• valori interi da 1 a 7
• valori relativi alla dimensione di base del tag font (di default “3”)

Nel caso dei valori interi, ecco la scala di grandezza:

<font size="1">testo di grandezza 1</font><br />
<font size="2">testo di grandezza 2</font><br />
<font size="3">testo di grandezza 3</font><br />
<font size="4">testo di grandezza 4</font><br />
<font size="5">testo di grandezza 5</font><br />
<font size="6">testo di grandezza 6</font><br />
<font size="7">testo di grandezza 7</font>

Nel caso dei valori relativi alla dimensione di base è possibile “spostarsi” nella scala di grandezza del <font> utilizzando i segni “+” e “-“.

Abbiamo detto che la grandezza del font di base di default nel browser è 3.

Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l’esempio:

<font size="+2">
Testo di grandezza +2 rispetto al font di base (3).<br />
Cioè font di grandezza 5.
</font>
<br /><br />
<font size="5">
Testo di grandezza 5.
</font>

Come si può vedere le due sintassi sono equivalenti.

La grandezza del font di base può anche essere cambiata:

<basefont size="1" />
<font size="+2">
Testo di 2 grandezze superiore al font di base, sopra definito.
</font>
<br />
<font size="3">
Testo di grandezza 3.
</font>
<br /><br />
<basefont size="2" />
<font size="+2">
Testo di 2 grandezze superiore al font di base, sopra ridefinito.
</font>
<br />
<font size="3">
Testo di grandezza 3.
</font>

Come si può vedere nella pagina esemplificativa.

È importante evitare di cadere nell’errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base:

<font size="7">
Testo di grandezza 7
<font size="-1">testo di grandezza inferiore di 1 al font di base (che di default è 3), NON al tag precedente</font>
</font>

In questo caso, ad esempio, sarebbe sbagliato aspettarsi una dimensione 6 dalla seconda istanza di <font>, perché la dimensione relativa fa sempre riferimento al <basefont>:

Anche se non è corretto farlo, Internet Explorer consente di utilizzare il tag <basefont> per impostare in una sola volta il tipo di carattere del testo e il suo colore, come si può vedere nell’esempio.

Tuttavia questo tipo di trucco non funziona correttamente né con Mozilla (e quindi neanche con Netscape 6 o superiore, dal momento che eredita il motore di rendering di Mozilla), né con Opera.

NOTA BENE

Quando state utilizzando il tag <font> – sia che utilizziate il size i valori interi, sia che utilizziate le i valori relativi al tag di base -, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell’utente (come già abbiamo visto per i tag “heading”).

Con Internet Explorer ad esempio andando in: Visualizza > Carattere.

Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font.

Questo appunto per le grandezze da 1 a 7 sono grandezze anch’esse relative.

Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall’altra può risultare molto fastidiosa per il webmaster.

L’unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel.