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 11/01/2020 10:27:50