Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 30 di 58
  • livello principiante
Indice lezioni

Scegliere il colore del testo in HTML

Definire il colore del testo della pagina Web
Definire il colore del testo della pagina Web
Link copiato negli appunti

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.


Ti consigliamo anche