Competenze: Inserire un elenco (o lista) nella pagina.
Contenuti: I tag ol, ul e li
Ecco un esempio di elenco ordinato:
| Codice | Output |
| Scuole partner del primo progetto Comenius: <ol> <li>Germany</li> <li>Italy</li> <li>Malta</li> <li>Poland</li> <li>Romania</li> <li>Spain</li> </ol> |
Scuole partner del primo progetto Comenius:
|
Nota: il tag ol è all'inizio e alla fine dell'elenco. Il tag li è in ogni linea!
Questo che segue è invece un esempio di elenco non ordinato:
| Codice | Output |
| Scuole partner del primo progetto Comenius: <ul> <li>Germany</li> <li>Italy</li> <li>Malta</li> <li>Poland</li> <li>Romania</li> <li>Spain</li> </ul> |
Scuole partner del primo progetto Comenius:
|
Nota: il tag ul è all'inizio e alla fine dell'elenco. Il tag li è in ogni linea!
Ciascuna voce di un elenco può essere un'ancora. In questo caso il tag a deve essere dentro il tag li:
| Codice | Output |
| Scuole partner del progetto Comenius Live: <ul> <li><a href="http://lyk-peir-irakl.ira.sch.gr/">Greece</a> </li> <li><a href="http://www.liceotorelli.it/">Italy</a></li> <li><a href="http://www.czart.pulawy.pl/">Poland</a></li> </ul> |
Scuole partner del progetto Comenius Live: |
Oltre alle solite proprietà di stile, come il font o il colore, per quanto riguarda
gli elenchi, è possibile personalizzare il tipo dei punti elenco.
La proprietà è list-style-type.
Ecco un elenco di possibili valori:
| Proprietà e valori (codice css) | Tipo di punto elenco |
| ul {list-style-type: disc} | |
| ul {list-style-type: circle} | |
| ul {list-style-type: square} |