HTML/Formattare il testo

In questo capitolo vedremo i tag disponibili per formattare il testo, impostandone carattere, colore, dimensioni, ed eventualmente impostare grassetti o corsivi.

Il tag <font>

Il principale tag HTML per la formattazione del testo è il tag <font> che permette di definire diversi aspetti della visualizzazione del testo, quali il carattere da utilizzare, la dimensione e il colore.

Ad eccezione dei tag di stile, l'insieme dei tag che stiamo per esaminare è stata sostituita dall'uso dei fogli di stile che consentono di scrivere una mole di codice decisamente inferiore e hanno molte altre caratteristiche che li fanno preferire all'uso di questi tag.
Se è realmente necessario mantenere una totale compatibilità verso i browser più vecchi (quali Explorer 3, Netscape 4.7 etc.) che praticamente non supportavano i fogli di stile se non in maniera molto approssimata, occorre però continuare ad usare i tag ed i loro attributi. Oramai comunque questi browser non sono più utilizzati, la maggioranza degli utenti utilizza Internet Explorer 6+ oppure Firefox.

Carattere

È possibile scegliere l'aspetto che assumerà il testo (quale font utilizzerà) attraverso l'attributo face del tag <font>, i cui valori sono tutti i nomi di font esistenti.
Per definire face è sufficiente specificare come valore il nome di un carattere (come potrebbe essere Arial, Verdana, Helvetica o Times); è però possibile anche specificare più font, separandoli con una virgola: se il primo font non è installato sul pc dell'utente, verrà usato il secondo, e così via; per questo, alla fine della lista di font è sempre preferibile scegliere anche una famiglia generica di font (ogni font appartiene a una famiglia) in maniera tale da garantire la massima compatibilità con tutta l'utenza:

Famiglia di font	Caratteristiche	Esempi di font
serif	Sono proporzionati e hanno le grazie	Times, Georgia
sans-serif	Sono proporzionati e non hanno le grazie	Helvetica, Geneva, Verdana, Arial
monospace	Non sono proporzionati, con o senza grazie	Courier, Courier New
cursive	Hanno le grazie	Vivaldi, Comic Sans
fantasy	Non sono classificabili	Woodblock

Per avere una lista completa dei font su Wikipedia, vedi la voce lista di font.

Colore

Il colore si può impostare attraverso l'attributo color i cui valori possono essere tutti i colori disponibili sia in forma nominale che in forma esadecimale.

Esempio:

  <body>
    <span style="color:red">Questo testo sarà di colore rosso</span>
    <span style="color:#FF0000">Questo testo sarà di colore rosso</span>
  </body>

Per avere una lista completa dei colori con i rispettivi codici esadecimali con anche i nome su Wikipedia, vedi la voce lista dei colori.

In riguardo ai problemi di compatibilità, ricordiamo che:

i nomi nominali di colori sono preferibili, almeno fintanto che si usano i 16 colori definiti dal W3C (qui l'elenco completo)
usando la notazione esadecimale usando 6 cifre (ad esempio "#ABCDEF") si rischia di definire colori non visualizzabili da utenti che usano una profondità di colori non elevata. Per essere definire un colore più accessibile, si può usare la notazione a 3 cifre: "#F4C" equivale a #FF44CC.

Dimensioni

Le dimensioni sono determinate, su una scala arbitraria, dal valore dell'attributo size, che può essere compreso tra 1 e 7. Il valore predefinito è 3. Qualora si inserisse un valore minore di uno o maggiore di sette, verranno interpretati dal browser come dimensione 1 o 7.

È possibile anche determinare una dimensione base del font attraverso il tag <basefont> e il suo attributo size e lo si può ingrandire come si desidera semplicemente inserendo gli operatori + e - seguiti dal valore per cui si desidera incrementare o decrementare la dimensione base. Se non viene determinato il valore base di basefont size="valore" è di 3.

Ecco un esempio:

 <body>
  <font size="3">Questo testo sarà di dimensione 3</font>
 </body>

Ecco un esempio con basefont:

 <body>
  <basefont size="4">
  <font size="+2">Questo testo sarà di dimensione 6</font>
  <font size="-2">Questo testo sarà di dimensione 2</font>
  </basefont>
</body>

Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:

 <body>
  <font size="+2">Questo testo sarà di dimensione 5</font>
  <font size="-2">Questo testo sarà di dimensione 1</font>
 </body>

Stile

Nell'HTML vi sono due stili utilizzabili per determinare il modo in cui sarà visualizzato il testo:

Stile fisico: non si preoccupa della funzione che ha il testo all'interno del contesto pagina e si limita a definire solo gli attributi del testo
Stile logico: gli stili logici al contrario si preoccupano anche di veicolare all'interprete la funzione del blocco di testo che è presente al loro interno.

Gli stili logici sono quelli maggiormente supportati anche dai vecchi browser in quanto presenti sin dalle prime versioni dell'HTML.

Da un punto di vista concettuale è grandemente preferibile usare gli stili logici, specialmente in vista di un utilizzo esteso dei fogli di stile.

Ad esempio, marcando col il tag <code> una porzione di testo che racchiude del codice sorgente, tale testo sarà normalmente visualizzato con caratteri non-proporzionali.
Se in un secondo tempo si desidera che tutti i testi marcati <code> siano visualizzati diversamente (per esempio, su uno sfondo colorato e delimitato da un bordo), sarà sufficiente ridefinire il tag <code> in un foglio di stile, con gli attributi necessari.
Per fare un altro esempio, il tag <cite> graficamente ha lo stesso effetto di <en> o <i>, ma definisce logicamente una citazione, e quindi vale il discorso fatto prima per <code>.

Ci sono diversi valori per impostare lo stile di un testo, di seguito una tabella riassuntiva^[1].

Stile logico	Stile fisico	Effetto
`<strong>`	`<b> (bold)`	<b> rende il testo in grassetto; <strong> è usualmente (ma non sempre) visualizzato in grassetto
`<em> (emphasis)`	`<i> (italic)`	Rende il testo in corsivo
`-`	`<u> (underline)`	Rende il testo sottolineato (è sconsigliato usare il sottolineato in una pagina web, quindi non esiste uno stile logico corrispondente)
`<code>`	`<tt>`	Rende il testo monospaziato
`<pre>`	`<tt>`	Indica che il testo contenuto in questo tag è una o più linee di codice. Il testo viene monospaziato
`<kbd> (keyboard)`	`<tt>`	Rende il testo monospaziato come `<code>`
`<abbr> (abbreviation)`		Indica che il testo contenuto in questo tag è un'abbreviazione (nessun effetto di rendering)
-	`<strike>`	Visualizza una porzione di testo barrato
-	`<sup>(superscript)`	Visualizza una porzione di testo in apice
-	`<sub>(subscript)`	Visualizza una porzione di testo in pedice
`<acronym>`	-	Indica che il testo contenuto in questo tag è un acronimo (nessun effetto di rendering)
`<address>`	`<i>`	Indica che il testo contenuto in questo tag è un indirizzo fisico o e-mail. Il testo viene visualizzato in conrsivo
`<blockquote>`	-	Indica che il testo contenuto in questo tag è una citazione. Il testo viene rientrato verso destra
`<cite>`	`<i>`	Indica che il testo contenuto in questo tag è una citazione. Il testo viene visualizzato in corsivo
`<dfn>(definition)`	`<i>`	Indica che il testo contenuto in questo tag è una definizione. Il testo viene visualizzato in corsivo.
`<q>(quote)`	-	Indica che il testo contenuto in questo tag è una citazione all'interno di un testo (nessun rendering del testo)
`<samp>(sample)`	-	Indica che il testo contenuto in questo tag è un esempio (nessun rendering del testo)
`<var>(variable)`	`<i>`	Indica che il testo contenuto in questo tag è una variabile. Il testo viene visualizzato in corsivo

Note

↑ gli stili logici sul sito del W3C

[1] stili logici sul sito del W3C

[1]