Elementi di testo: paragrafi ed elenchi
Passiamo adesso all'utilizzo dei paragrafi in HTML. Esistono tre tipi di paragrafi, costituiti dai tag p, div e span.
La differenza tra i tre 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.
Vediamo un esempio:
<html> <head> <title>Titolo della pagina...</title> </head> <body> <p>Paragrafo...</p> <div>Paragrafo...</div> <span>Paragrafo...</span> </body> </html>E' possibile utilizzare l'uno, l'altro o l'altro ancora a seconda delle 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).
Vediamo un esempio:
<p align="center">Paragrafo...</p> <div align="right">Paragrafo...</div>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 arabiVediamo 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.