HTML/Formattare il testo

Wikibooks, manuali e libri di testo liberi.

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

Il tag <font>[modifica]

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[modifica]

È 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
Wikipedia-logo-v2.svg Per avere una lista completa dei font vai su Wikipedia, vedi la voce lista di font.

Colore[modifica]

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>
Wikipedia-logo-v2.svg Per avere una lista completa dei colori con i rispettivi codici esadecimali con anche i nome vai 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[modifica]

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[modifica]

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[modifica]