HTML.itHTML.it


 Scegliere il colore del testo


Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la sintassi:

<font color="blue">testo blu</font>

ovvero:

<font color="#0000FF">testo blu</font>


testo blu

ovvero

testo blu



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"). La sintassi è:

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">

testo blu in Verdana

</font>

testo blu in Verdana



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>



o meglio ancora:


<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">

testo blu in Verdana<br>

<font color="red">

testo rosso

</font>

</font>

testo blu in Verdana
testo rosso

o meglio ancora:

testo blu in Verdana
testo rosso



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

Le dimensioni del testo

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

testo di grandezza 1

testo di grandezza 2

testo di grandezza 3

testo di grandezza 4

testo di grandezza 5

testo di grandezza 6

testo di grandezza 7



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>

Testo di grandezza +2 rispetto al font di base (3).
Cioč font di grandezza 5.


Testo di grandezza 5.



Come si può vedere le due sintassi sono equivalenti.

La grandezza del font di base può anche esser 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:

Ecco un esempio corretto, ma che non darà il risultato desiderato, perché la dimensione relativa fa sempre riferimento al <basefont>:


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

Testo di grandezza 7 testo di grandezza inferiore di 1 al font di base (che di default č 3), NON al tag precedente



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.

    Torna a inizio pagina