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