HTML5 LISTE

di

Html5 offre la possibilità di creare delle liste, ovvero elenchi di dati utilizzati principalmente per:

  • organizzare la struttura della pagina html (ad esempio per la creazione di un menu).
  • organizzare il testo (ad esempio per la creazione di un indice)

Queste liste inoltre possono essere di tre tipologie differenti :

  • liste ordinate di valori 
  • liste non ordinate di valori 
  • liste di definizione

Liste Ordinate

il tag <ol> , è l’elemento che identifica un elenco ordinato di valori ed è caratterizzato da una scaletta numerica che identifica i dati della lista.

Sintassi di base

Copiando quanto di seguito nei vostri editor di testo , andiamo a creare una lista ordinata di valori.

<!doctype html>
<html lang=”it”>
<body>
<ol>
 <li>home</li>
 <li>tecnologia</li>
 <li>programmazione</li>
</ol>
</body>
</html>


Le liste ordinate , vengono precedute da un valore numerico che di default è la classica numerazione araba.

Attraverso l’ attributo type è possibile modificare il valore di default nei seguenti:

  • <ol type = “A”> lettere alfabetiche maiuscole
  • <ol type = “a”>  lettere alfabetiche minuscole
  • <ol type = “I”>   numeri romani maiuscoli
  • <ol type = “i”>   numeri romani minuscoli
  • <ol type = “1”>  numeri arabi (valore di default)
<!doctype html>
<html lang=”it”>
<body>
<ol type="A">
 <li>home</li>
 <li>tecnologia</li>
 <li>programmazione</li>
</ol>
</body>
</html>

Liste non ordinate

il tag <ul> , è l’elemento che identifica un elenco non ordinato di valori ed è caratterizzato da puntini che identificano i dati della lista.


Sintassi di base

<!doctype html>
<html lang=”it”>
<body>
<ul>
 <li>patate</li>
 <li>olive</li>
 <li>prezzemolo</li>
</ul>
</body>
</html>

Come per le liste ordinate è possibile cambiare i puntini con i seguenti elementi :

  • <ul type = square> quadratini 
  • <ul type = circle> cerchietti vuoti 
  • <ul type = disc> tondi pieni (valore di default)

<!doctype html>
<html lang=”it”>
<body>
<ul type =square>
 <li>patate</li>
 <li>olive</li>
 <li>prezzemolo</li>
</ul>
</body>
</html>

Liste di definizione

Una lista di definizione , è una lista di termini con una descrizione per ciascuno di essi.

Si definisce una lista di definizione , attraverso i tag <dl> e <dd>.


<!doctype html>
<html lang=”it”>
<body>
<dl>
<dt>patate</dt>
<dd>le patate sono tuberi </dd>
<dt>olive</dt>
<dd>le olive sono un frutto</dd>
</dl>
</body>
</html>

Liste annidate

E’ possibile inserire una lista all’ interno di un altra lista.

La sintassi è molto semplice come si evince dall’ esempio sottostante.

<!doctype html>
<html lang=”it”>
<body>
<ul>
 <li>patate</li>
 <li>olive
 <ul>
 <li>olive nere</li>
 <li>olive piccanti</li>
 </ul>
 </li>
 <li>cipolla</li>
</ul>
</body>
</html>

ᐊ Colori
Tag <div> ᐅ

Lascia un commento