HTML/Formattare il testo: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m fix interlink |
sistemo |
||
Riga 1:
{{HTML}}
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
=== 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:
{| {{prettytable}}
!Famiglia di font
Line 33 ⟶ 36:
|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.
Line 48 ⟶ 49:
</source>
{{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, ameno 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, verrano intrepretati dal [[w:browser web|browser]] come dimensione 1 o 7.▼
E' 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:▼
<source lang=html4strict>▼
<body>▼
<font size="3">Questo testo sarà di dimensione 3</font>▼
</body>▼
</source>▼
Ecco un esempio con basefont:▼
<source lang=html4strict>▼
<body>▼
<basefont size="4"></nowiki>▼
<font size="+2">Questo testo sarà di dimensione 6</font>▼
<font size="-2">Questo testo sarà di dimensione 2</font>▼
</body>▼
</source>▼
Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:▼
<source lang=html4strict>▼
<body>▼
<font size="+2">Questo testo sarà di dimensione 5</font>▼
<font size="-2">Questo testo sarà di dimensione 1</font>▼
</body>▼
</source>▼
== Stile ==
Line 62 ⟶ 95:
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>.
{| {{prettytable}}
Line 71 ⟶ 105:
|-
|<code><nowiki><strong></nowiki></code>
|<code><nowiki><b> (''bold'')</nowiki></code>
|'''b''' rende il testo in grassetto; '''strong''' è usualmente (ma non sempre) visualizzato in grassetto
|-
|<code><nowiki><em> (''emphasis'')</nowiki></code>
|<code><nowiki><i> (''italic'')</nowiki></code>
|Rende il testo in corsivo
|-
|<code><nowiki>
|<code><nowiki><u> (''underline'')</nowiki></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>
Line 91 ⟶ 125:
|}
==
{{references}}
▲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, verrano intrepretati dal [[w:browser web|browser]] come dimensione 1 o 7.
▲E' 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:
▲<source lang=html4strict>
▲ <body>
▲ <font size="3">Questo testo sarà di dimensione 3</font>
▲ </body>
▲</source>
▲Ecco un esempio con basefont:
▲<source lang=html4strict>
▲ <body>
▲ <basefont size="4"></nowiki>
▲ <font size="+2">Questo testo sarà di dimensione 6</font>
▲ <font size="-2">Questo testo sarà di dimensione 2</font>
▲ </body>
▲</source>
▲Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:
▲<source lang=html4strict>
▲ <body>
▲ <font size="+2">Questo testo sarà di dimensione 5</font>
▲ <font size="-2">Questo testo sarà di dimensione 1</font>
▲ </body>
▲</source>
{{avanzamento|75%|15 dicembre 2007}}▼
[[Categoria:HTML|Testo]]
[[en:HTML Programming/Textual Modifiers]]
| |||