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.
Indice |
[modifica] 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.
[modifica] 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 vai su Wikipedia, vedi la voce lista di font. |
[modifica] 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 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.
[modifica] 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"></basefont> <font size="+2">Questo testo sarà di dimensione 6</font> <font size="-2">Questo testo sarà di dimensione 2</font> </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>
[modifica] 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 |
[modifica] Note
