|
Uno sguardo al passato, dalle ArtiTerapie Ipnotiche, alla musicoterapia
{{HTML}}
[[Uno sguardo al passato, dalle ArtiTerapie Ipnotiche, alla musicoterapia ]]
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 <code><font></code> 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 [[CSS|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.<br />
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 <code><font></code>, i cui valori sono tutti i nomi di font esistenti.
<br/>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:
{| class="wikitable"
!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
|}
{{Vedi pedia|motivo=Per avere una lista completa dei font|1=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:
<syntaxhighlight lang=html4strict>
<body>
<span style="color:red">Questo testo sarà di colore rosso</span>
<span style="color:#FF0000">Questo testo sarà di colore rosso</span>
</body>
</syntaxhighlight>
{{Vedi pedia|motivo=Per avere una lista completa dei colori con i rispettivi codici esadecimali con anche i nome|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 ([http://www.w3.org/TR/html4/types.html#h-6.5 qui] l'elenco completo)
* usando la notazione esadecimale usando 6 cifre (ad esempio "<code>#ABCDEF</code>") 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: "<code>#F4C</code>" equivale a <code>#FF44CC</code>.
=== 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 [[w:browser web|browser]] come dimensione 1 o 7.
È possibile anche determinare una dimensione base del font attraverso il tag <code><nowiki><basefont></nowiki></code> 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 <code>basefont '''size'''="valore"</code> è di ''3''.
Ecco un esempio:
<syntaxhighlight lang=html4strict>
<body>
<font size="3">Questo testo sarà di dimensione 3</font>
</body>
</syntaxhighlight>
Ecco un esempio con basefont:
<syntaxhighlight lang=html4strict>
<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>
</syntaxhighlight>
Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:
<syntaxhighlight lang=html4strict>
<body>
<font size="+2">Questo testo sarà di dimensione 5</font>
<font size="-2">Questo testo sarà di dimensione 1</font>
</body>
</syntaxhighlight>
== 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 [[w:browser web|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.<br />
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.
<br/>Per fare un altro esempio, il tag <code><cite></code> graficamente ha lo stesso effetto di <nowiki><en> o <i></nowiki>, 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<ref>[http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 gli stili logici sul sito del W3C]</ref>.
{| class="wikitable"
!Stile logico
!Stile fisico
!Effetto
|-
|<code><nowiki><strong></nowiki></code>
|<code><nowiki><b> </nowiki>(''bold'')</code>
|'''<nowiki><b></nowiki>''' rende il testo in grassetto; '''<nowiki><strong></nowiki>''' è usualmente (ma non sempre) visualizzato in grassetto
|-
|<code><nowiki><em> </nowiki>(''emphasis'')</code>
|<code><nowiki><i> </nowiki>(''italic'')</code>
|Rende il testo in corsivo
|-
|<code><nowiki>-</nowiki></code>
|<code><nowiki><u> </nowiki>(''underline'')</code>
|Rende il testo sottolineato (è sconsigliato usare il sottolineato in una pagina web, quindi non esiste uno stile logico corrispondente)
|-
|<code><nowiki><code></nowiki></code>
|<code><tt></code>
|Rende il testo monospaziato
|-
|<code><nowiki><pre></nowiki></code>
|<code><tt></code>
| Indica che il testo contenuto in questo tag è una o più linee di codice. Il testo viene monospaziato
|-
|<code><nowiki><kbd> </nowiki>(''keyboard'')</code>
|<code><tt></code>
|Rende il testo monospaziato come <code><nowiki><code></nowiki></code>
|-
|<code><nowiki><abbr> </nowiki>(''abbreviation'')</code>
|<code><nowiki></nowiki></code>
|Indica che il testo contenuto in questo tag è un'abbreviazione (nessun effetto di rendering)
|-
|<nowiki>-</nowiki>
|<code><nowiki><strike></nowiki></code>
|Visualizza una porzione di testo barrato
|-
|<nowiki>-</nowiki>
|<code><nowiki><sup></nowiki>(''superscript'')</code>
|Visualizza una porzione di testo in apice
|-
|<nowiki>-</nowiki>
|<code><nowiki><sub></nowiki>(''subscript'')</code>
|Visualizza una porzione di testo in pedice
|-
|<code><nowiki><acronym></nowiki></code>
|<nowiki>-</nowiki>
|Indica che il testo contenuto in questo tag è un acronimo (nessun effetto di rendering)
|-
|<code><nowiki><address></nowiki></code>
|<code><nowiki><i></nowiki></code>
|Indica che il testo contenuto in questo tag è un indirizzo fisico o e-mail. Il testo viene visualizzato in conrsivo
|-
|<code><nowiki><blockquote></nowiki></code>
|<nowiki>-</nowiki>
|Indica che il testo contenuto in questo tag è una citazione. Il testo viene rientrato verso destra
|-
|<code><nowiki><cite></nowiki></code>
|<code><nowiki><i></nowiki></code>
|Indica che il testo contenuto in questo tag è una citazione. Il testo viene visualizzato in corsivo
|-
|<code><nowiki><dfn></nowiki>(''definition'')</code>
|<code><nowiki><i></nowiki></code>
|Indica che il testo contenuto in questo tag è una definizione. Il testo viene visualizzato in corsivo.
|-
|<code><nowiki><q></nowiki>(''quote'')</code>
|<nowiki>-</nowiki>
|Indica che il testo contenuto in questo tag è una citazione all'interno di un testo (nessun rendering del testo)
|-
|<code><nowiki><samp></nowiki>(''sample'')</code>
|<nowiki>-</nowiki>
|Indica che il testo contenuto in questo tag è un esempio (nessun rendering del testo)
|-
|<code><nowiki><var></nowiki>(''variable'')</code>
|<code><nowiki><i></nowiki></code>
|Indica che il testo contenuto in questo tag è una variabile. Il testo viene visualizzato in corsivo
|}
== Note ==
{{references}}
[[Categoria:HTML|Testo]]
{{avanzamento|100%|15 dicembre 2007}}
[[en:HyperText Markup Language/Text Formatting]]
| 