Formattazione del testo HTML

Formattazione del testo.
Argomenti trattati:
- Creare paragrafi e posizionare con <P>:
Come gestire i paragrafi ed il posizionamento nella riga di un testo.
- Andare a capo con <BR>:
Come utilizzare questo tag per tornare ad una nuova linea.
- Linee orizzontali con <HR>:
Come inserire linee per separare porzioni di testo.
- Formattazione del testo con <FONT>:
Come gestire completamente la forma del testo.
- I tag di testo fisici - <B><I><U>:
Evidenziare il testo, a seconda delle esigenze, in grassetto, corsivo o sottolineato.
- I tag di testo fisici - apice e pedice:
Gestire la forma del testo per inserire caratteri rispettivamente al di sopra o al di
sotto della linea del testo.
Come analizzato in precedenza, è possibile scrivere del semplice testo subito dopo il tag
BODY per essere visualizzato.
L'unico inconveniente è che la stessa visualizzazione sarà effettuata a discrezione del
browser, a seconda del carattere di default. Per questo motivo adesso affronteremo il
problema della formattazione del testo, cioè sistemare, dividere, posizionare lo stesso e gli
altri oggetti in una pagina HTML.
Vediamo quali sono i tag principali, ed i loro attributi, che ci permettono una buona
formattazione all'interno di un ipertesto.
Creare paragrafi e posizionare con <P>
Il tag <P> definisce un nuovo paragrafo del testo. Esso indica al browser che il cursore si
deve posizionare su una nuova riga, a sinistra, e lasciare una riga di spazio.
Per altri tipi di posizionamento esistono attributi specifici:
<P ALIGN="left"> o <P>
Definisce un paragrafo e allinea il cursore a sinistra (left).
<P ALIGN="right">
Definisce un paragrafo e allinea il cursore a destra (right).
<P ALIGN="center"> o
<CENTER>
Definisce un paragrafo ed allinea il cursore al centro
(center).
Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo
Il tag <P>, se seguito dall'attributo ALIGN sopra descritto, per terminare la sua
funzionalità, necessita della chiusura </P>.
Il tag <P ALIGN=center> è stato "deprecato" dallo standard 4 di HTML. Si utilizza ormai la
sola notazione <CENTER>.
Introdotto da Netscape, ha avuto enorme diffusione iniziale, dovuto al successo di questo
browser, per questa ragione ancora viene usato e riconosciuto dai browser (adesso anche
da Internet Explorer).
L'uso di <CENTER> è molto semplice:
<CENTER>Testo da centrare</CENTER>
Andare a capo con <BR>
Questo tag è l'abbreviazione di BREAK e rappresenta una interruzione di riga.
Funziona come un semplice ritorno a capo, senza lasciare righe di spazio, diversamente
dal tag <P> precedentemente visto.
In altri termini la sua funzione è simile alla pressione del tasto "invio" della tastiera durante
la digitazione di un testo con un editor.
Non prevede tag di chiusura.
Linee orizzontali con <HR>
Le linee orizzontali sono un ottimo strumento per dividere parti del documento e rendere il
testo più leggibile.
La sintassi fondamentale consiste nell'inserimento del semplice tag <HR> all'interno del
documento HTML, comunque esistono diversi attributi a cui l'utente può ricorrere nel caso
abbia bisogno di una migliore formattazione della linea:
<HR align="CENTER" size="2" width="400" color="red" noshade>
Spieghiamo adesso la funzione di tutti gli attributi usati:
align="CENTER" definisce la posizione della riga (center, right, left);
size="2" definisce l'altezza, in pixel, della riga;
width="400" definisce lunghezza orizzontale, in pixel, della linea. Può anche esprimersi in
percentuale di spazio disponibile, ad es.: width=80%;
color="red" definisce il colore della linea e noshade, se presente, elimina l'effetto 3D
della linea. Se omesso, naturalmente, produce tale effetto.
Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo
Formattazione del testo con <FONT>
Il tag FONT, con i suoi attributi, permette di definire le caratteristiche principali che
vogliamo dare al nostro testo. Esso si divide in tre attributi:
<font FACE= "Arial">
l'attributo FACE, naturalmente, dall'esempio appena mostrato, determina il tipo di carattere
che noi vogliamo dare al nostro testo.
<font face="Arial" SIZE=n> (con n che va da 1 a 7)
L'attributo SIZE definisce l'altezza del carattere. Il numero n da 1 a 7 definisce, nell'ordine,
dal più piccolo (8 pixel circa) al più grande (36 pixel circa).
<font face="Arial" size=4 COLOR="red"> (oppure COLOR="#FF0000")
L'attributo COLOR, come potete immaginare, serve per dare un colore ai caratteri che
stiamo utilizzando e rispetta le stesse regole viste per l'attributo BGCOLOR del tag BODY
della lezione precedente.
Quindi, in pratica, il tag FONT si può riassumere con questo esempio:
<font face="Arial" size=3 color="red">
oppure, come spiegato prima, cambiando il tipo di valore all'attributo COLOR, possiamo
scrivere:
<font face="Arial" size=3 color="#FF0000">
ottenendo così lo stesso effetto per il tipo di font.
Naturalmente la pratica nell'utilizzo di questo tag aiuta a prendere dimestichezza con i suoi
attributi.
Nel corso delle prossime lezioni, infatti, andremo a trattare diversi altri attributi per altri tag,
per cui si suggerisce una buona pratica con l'utilizzo di editor di testo nella creazione di
ipertesti.
I tag di testo fisici - Evidenziare con <B>, <I> e <U>
<B>, <I> e <U> sono tre dei più usati tag di formattazione fisica dell'HTML.
Tutti necessitano della chiusura per stabilirne l'azione:
<B> Testo grassetto </B>
Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD, grassetto).
Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo
<I> Testo corsivo </I>
Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC, dato che la
calligrafia in corsivo è universalmente riconosciuta come l'italica).
<U> Testo sottolineato </U>
Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per
UNDERLINED, sottolineato).
Apice e pedice: <SUP> e <SUB>
Questi due tag di formattazione fisica creano rispettivamente: apici posti leggermente più
in alto del normale testo (SUP) e pendici posti leggermente più in basso (SUB).
E' possibile annidare diversi tag per ottenere effetti di sovrapposizione successiva.
Questi elementi vengono usati soprattutto per indicare note o formule matematiche.
Questa la corretta sintassi per entrambi:
X<SUP>2</SUP>
verrà visualizzato come: X2.
H<SUB>2</SUB>O verrà visualizzato come: H2O.
Questi ultimi chiudono il discorso relativo ai tag di testo fisici e di formattazione
maggiormente utilizzati.
Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo