Elementi di testo: paragrafi, div, span ed elenchi
Passiamo adesso all'utilizzo dei tag di marcatura del testo in HTML. Questi sono:
- Paragrafi - <p>
- Div - <div>
- Span - <span>
- Elenchi - <ul> e <ol>
La differenza tra i primi tre tag consiste nel fatto che p produce un ritorno a capo ed un'interlinea vuoto; div produce solo il ritorno a capo; span non produce alcun ritorno a capo.
Attenzione: è bene precisare che mentre <p> e <span> sono dei tag per la marcatura del testo, il tag <div> è un tag "contenitore" generico che può essere utilizzato per gestire la posizione e l'aspetto di qualsiasi elemento della pagina ed ha caratteristiche polimorfiche (mediante l'uso dei CSS il tag <div> può persino sostituire l'uso delle tabelle!).
Vediamo un esempio di utilizzo di questi tre tag per gestire blocchi di testo:
<html> <head> <title>Titolo della pagina...</title> </head> <body> <p>Testo...</p> <div>Testo...</div> <span>Testo...</span> </body> </html>
E' possibile utilizzare l'uno, l'altro o l'altro ancora a seconda delle specifiche esigenze, tenendo presente che è possibile modificare i comportamenti di default, descritti in precedenza, attraverso i CSS.
Sia <p> che <div> supportano l'attributo align che permette di allineare il testo a sinistra (left, di default), al centro (center) che a destra (right), anche se, ad oggi, è suggerito gestire l'allineamento mediante la proprietà text-align dei CSS.
Vediamo un esempio di utilizzo dell'attributo align:
<p align="center">Paragrafo...</p> <div align="right">Paragrafo...</div>
Elenchi puntati e numerati
Vediamo adesso il funzionamento degli elenchi, i quali possono essere puntati o numerati.Gli elenchi puntati si generano attraverso il tag ul e quelli numerati attraverso il tag ol ed entrambi utilizzano il tag li (list item) per specificare le singole voci dell'elenco.
Vediamo un esempio di elenco puntato:
<ul> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> </ul>
Vediamo adesso un esempio di elenco numerato:
<ol> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> </ol>
Entrambi i tipi di elenco supportano gli attributi type, che permette di specificare il tipo di elenco, mentre gli elenchi numerati supportano anche l'attributo start, che permette di far partire l'elenco dal numero o lettera che si desidera.
L'attributo type supporta i seguenti valori:
<!-- Elenchi puntati --> disc - visualizza un cerchio pieno (di default) square - visualizza un quadrato pieno circle - visualizza un cerchio vuoto <!-- Elenchi numerati --> A - visualizza l'elenco alfabetico con lettere maiuscole a - visualizza l'elenco alfabetico con lettere minuscole I - visualizza l'elenco con i numeri romani maiuscoli i - visualizza l'elenco con i numeri romani minuscoli 1 - visualizza l'elenco con i numeri arabi
Vediamo un esempio che comprenda sia type che start all'interno di un elenco numerato:
<ol type="A" start="5"> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> <li>Bla, bla, bla...</li> </ol>
Si testi l'esempio per verificare il risultato finale.
