HTML

UNITA' 7 ELENCHI

Indice| Indietro | Avanti

Competenze: Inserire un elenco (o lista) nella pagina.

Contenuti: I tag ol, ul e li

Il tag ol (come ordered list)

Ecco un esempio di elenco ordinato:

CodiceOutput
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:
  1. Germany
  2. Italy
  3. Malta
  4. Poland
  5. Romania
  6. Spain

Nota: il tag ol Ŕ all'inizio e alla fine dell'elenco. Il tag li Ŕ in ogni linea!

Il tag ul (come unordered list)

Questo che segue Ŕ invece un esempio di elenco non ordinato:

CodiceOutput
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:
  • Germany
  • Italy
  • Malta
  • Poland
  • Romania
  • Spain

Nota: il tag ul Ŕ all'inizio e alla fine dell'elenco. Il tag li Ŕ in ogni linea!

Un elenco di link!

Ciascuna voce di un elenco pu˛ essere un'ancora. In questo caso il tag a deve essere dentro il tag li:

CodiceOutput
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:

Uno stile per gli elenchi.

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}
  • il punto elenco Ŕ un disco pieno
  • ul {list-style-type: circle}
  • il punto elenco Ŕ un disco vuoto
  • ul {list-style-type: square}
  • il punto elenco Ŕ un quadrato
  • Esercitazione: Metti un elenco nella tua pagina web!

    1. Apri il file index.htm oppure un altro file.htm (come pagina2.htm)
    2. Crea un elenco ordinato o non ordinato (per esempio, i tuoi libri preferiti oppure i posti che hai visitato oppure gli hobbies..).
    3. Salva il file nel tuo sito locale.
    4. Carica il file nel sito remoto.
    5. Scrivi un messaggio nel forum "Elenchi" per avvertire che la tua pagina Ŕ pronta!

    Ludovica Battista

    Indice| Indietro | Avanti