La presente lezione tratta la scelta del colore, delle dimensioni e del tipo di carattere del testo attraverso l’utilizzo del tag "font". Si tratta di un argomento obsoleto, perché la formattazione del testo in tutti i siti moderni viene attribuita attraverso i fogli di stile. L’utilizzo del tag <font> inoltre è disapprovato dal W3C, e dunque sta cadendo in disuso. In ogni caso si tratta di un argomento che un buon webmaster non può ignorare: come già detto per studiare i fogli di stile ci sarà tempo, e comunque è un passo che viene dopo la conoscenza dell’HTML.

Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times".

Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una questione di "grazie" (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più leggibile il carattere).

Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l’effetto contrario, si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l’"Arial" o l’"Helvetica" (si veda l'articolo «I font e la tipografia del testo» in questo sito).

Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi:

Tuttavia è bene sottolineare da subito che non è possibile far sì che l’utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell’arte l’utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo sistema: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri.

Se ad esempio scarichiamo dal nostro archivio preferito di font il carattere «Hackers» e lo inseriamo nella cartella dei caratteri, saremo poi in grado di visualizzare sul nostro computer il testo in Hackers.

Ma quando metteremo il nostro sito nel web gli utenti visualizzeranno un semplicissimo Times. Come nell’esempio sotto indicato:

Per questo motivo è bene tener conto di due accorgimenti:

• scegliere caratteri "sicuri" , che siano cioè senz’altro presenti sul pc dell’utente
• non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell’utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times")

Vediamo alcuni esempi di famiglie "sicure" di caratteri:

È vero: l’impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti.

Per i titoli delle pagine, i menu, e quant’altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico preferito (ad esempio delle "gif").

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

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

Una volta scelto il colore possiamo sempre decidere di cambiarlo:

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:

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:

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:

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.

Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

<!-- questo è un commento -->

e ci permette di "commentare" i vari punti della pagina. Ad esempio:

<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->

Tramite l’attributo "lang" è possibile specificare ai motori di ricerca e al browser dell’utente quale lingua stiamo utilizzando. La sintassi per la lingua italiana è:

<body lang="it">

Questo attributo non è solo una proprietà del tag body, ma può essere riferito alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi, tabelle, eccetera). È importante sottolineare che questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata.

Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua (e poi di doverli inserire nei motori di ricerca).

Ecco il codice che esemplifica gli argomenti appresi finora in questa lezione, visualizzabile anche in questa pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<meta
  http-equiv="Content-Type"
  content="text/html;
  charset=iso-8859-1"
>
<title>HTML.it</title>
</head>

<body
  leftmargin="0"
  topmargin="0"
  background="imgs/sfondo00006.gif"
  bgcolor="#66CCFF"
  lang="it"
>

Testo di prova
</body>
</html>