Home   Informatica   (X)Html   7. Lezione: gli elenchi

7. Lezione: gli elenchi

Scritto da sergio il 06/05/2009 09:17:21

Un'altra struttura importante nella definizione di un contenuto è costituita dagli elenchi siano essi ordinati (numerati ad esempio) oppure non ordinati (con i singoli punti distinti da un simbolo, ad esempio un pallino).

In html si definisce una lista ordinata con il tag <ol> (ordered list) e una lista non ordinata con il tag <ul> (unordered list).
Il tag va aperto e chiuso e al suo interno trovano posto gli items che costituiscono la lista definiti con il tag <li> (list item) in entrambi i casi.
Come vedere alla fine l'html è molto semplice...
Vediamo un esempio:

Code:

...
   <!-- Questa è una lista ordinata -->
   <ol>
      <li>Primo Item</li>
      <li>Secondo Item</li>
      <li>Terzo Item</li>
   </ol>
   <!-- Questa è una lista non ordinata -->
   <ul>
      <li>Primo Item</li>
      <li>Secondo Item</li>
      <li>Terzo Item</li>
   </ul>

...


Come vedete di default l'html numera con le cifre a partire da 1 gli item delle liste ordinate e marca con dei pallini gli item delle liste non ordinate e in entrambi i casi dopo ogni item viene inserito un vai a capo (break row) .
Questo comportamente standard può essere modificato e personalizzato intervenendo sullo stile di questi tags e anche qui vi rimando al corso sui CSS (sennò che lo facciamo a fare?).
 
Un altro tipo di lista prevista è la lista di definizioni. A differenza dei 2 precedenti casi, in questa struttura gli items sono costituiti a loro volta da 2 elementi: il termine, identificato con il tag <dt> e la definizione, con il tag <dd>.
Ecco qui sotto l'esempio:

Code:

...
<dl>
   <dt>termine1</dt><dd>Definizione1</dd>
   <dt>termine2</dt><dd>Definizione1</dd>
   <dt>termine3</dt><dd>Definizione1</dd>
</dl>
...


Il browser, di default, non inserisce caratteri per identificare i singoli item (come nei casi precedenti delle liste ordinate e non ordinate) e manda a capo la definizione rispetto al termine identandola di una tabulazione. Ovviamente come abbiamo imparato questi comportamenti sono completamente modificabili tramite i CSS.

Alla prossima!

Ultimo aggiornamento 07/01/2019 10:28:21