
| Anche il tuo sito puo far parte di questo spazio pubblicitario |
| Clicca qui se vuoi informazioni per fare anche tu pubblicità su questo sito |
Elenchi <UL>, <OL> e <LI> Capita che su una pagina web si abbia la necessità di descrivere voci sottoforma di elenchi puntati, html offre questa possibilità con i tags (UL) elenchi non ordinati, (OL) elenchi ordinati e (LI) per le voci di elenco. Questi tags permettono di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.
<LI>
Elemento voce dell'elenco, da solo serve a poco deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> anche se è consigliato metterla.
<OL>...</OL>
L'elemento <ol> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato. Usato per evidenziare una precisa sequenza nelle voci che compongono la lista. Per esempio i passi da seguire per un principiante che inizi da zero qui su web-link sono:
|
<ol>
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
TYPE
Per default la numerazione segue l'ordine cronologico 1, 2, 3, e così via ma grazie all'attributo type si possono cambiare le voci dell'elenco di una lista ol in uno dei seguenti modi:
type="A" Lettere maiuscole: A , B, C, ...
type="a" Lettere minuscole: a, b, c, ...
type="I" Numerazione romana maiuscola: I, II, III, ...
type="i" Numerazione romana minuscola: i, ii, iii, ...
type="l" I numeri come da default: 1, 2, 3, ...
|
<ol type="a">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
|
<ol type="I">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
START
Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo start impostando il numero da cui iniziare l'incremento.
|
<ol start="15">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3":
|
<ol type="a" start="3">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
<UL>...</UL>
L'elemento <ul> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.
|
<ul>
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>
|
Questo il risultato:
|
TYPE
Per default i simboli delle voci in una lista non ordinata sono dei dischi solidi o pallini pieni. Grazie all'attributo type si possono cambiare questi simboli (dell'elenco di una lista ul) in cerchietti (circle) o quadratini (square).
A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo con l'attributo TYPE:
type="disc" disco solido
type="circle" cerchietto
type="square" quadrato
|
<ul type="circle">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>
|
Questo il risultato:
|
|
<ul type="square">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>
|
Questo il risultato:
|
|
Consiglio: l'uso dei fogli di style permette un controllo molto più accurato e versatile come per esempio inserire una qualsiasi immagine grafica al posto di uno dei simboli standard.
ol { list-style-image: url(file:nome_immagine.gif); } la proprietà list-style-image è in grado di richiamare una piccola immagine grafica da usare al posto del pallino. |
Questo il risultato:
|
DIR
Nel caso in cui si volesse avere la numerazione o il simbolo a destra della lista anziché a sinistra, si farà uso dell'attributo dir che va bene sia per le liste ordinate che per quelle non ordinate impostando il valore destro rtl (sinistro ltr).
|
<ol dir="rtl">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>
|
Questo il risultato:
|
|
<ul type="square" dir="rtl">
<li>primi passi<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>
|
Questo il risultato:
|
Elenchi di definizione <DT>, <DD> e <DL>
dove con dt si definisce il termine e con dd la sua definizione o descrizione. Il tutto racchiuso in una struttura dl
<DL>...</DL>
L'elemento <dl> prevede al suo interno gli elementi <dt> e <dd> come voci dell'elenco. Serve per una visualizzazione non ordinata e formata da due voci: un termine (dt) e la sua definizione (dd).
|
<dl> <dt>principianti</dt> <dd>rubrica primi passi</dd> <dt>appassionati</dt> <dd>guida html e guida CSS</dd> </dl> |
Questo il risultato:
|
<DT>...</DT>
L'elemento <dt> specifica il termine e da solo non ha senso, deve precedere l'elemento dd che serve per la sua definizione. Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole.
|
<dl> <dt>Andrea</dt> <dd>oggi è una bella giornata</dd> <dt>Mario</dt> <dd>si, ammesso che non piova</dd> </dl> |
Questo il risultato:
|
<DD>...</DD>
L'elemento <dd> specifica la definizione e da solo non ha senso, deve seguire l'elemento dt che specifica il termine.
Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole.
|
<dl> <dt>Andrea</dt> <dd>oggi è una bella giornata</dd> <dt>Mario</dt> <dd>si, ammesso che non piova</dd> </dl> |
Questo il risultato:
|
|
Consiglio non usate le liste per l'indentazione o i ritorni a capo, per questo ci sono appositi attributi da dichiarare nei CSS. A proposito di CSS il menù orizzontale che si trova ad inizio pagina è fatto proprio da liste opportunamente ridefinite all'interno di un CSS. Per saperne di più a riguardo di questo tipo di menù si veda questa pagina. |
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.