Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida č stampabile in modo agevole dalla versione off-line scaricabile dal menų laterale: Download.zip
 


Elenchi o Liste


Elementi o Tags:
Attributi:

© www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  
 

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.



Torna su
 

<li>

L'elemento <li> (list item) voce dell'elenco, da solo serve a poco perchč deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> ma č consigliato metterla.



Torna su
 

<ol>...</ol>

L'elemento <ol> (order list) lista ordinata, richiede al suo interno l'elemento <li> per visualizzare le voci in elenco. Serve per creare una lista ordinata e numerata di un elenco puntato di voci. Per esempio, i passi da seguire per un principiante che inizia da zero, qui su web-link, sono:

<ol>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5


Torna su
 

type

L'attributo type applicato alle liste ordinate <ol> serve per impostare il tipo di lista, avete notato nell'esempio sopra che a fianco di ogni voce ci sono dei numeri progressivi? Non li ho messo io ma il tag <ol> che per default adopera la numerazione e segue l'ordine cronologico: 1, 2, 3, e così via. Con l'attributo type si possono cambiare i numeri con una delle seguenti alternative:

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 HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5


Torna su
 

start

L'attributo start cambia il valore iniziale nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente usare l'attributo start impostando il valore alfanumerico da cui iniziare l'incremento.

<ol start="15">
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5

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 HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5


Torna su
 

<ul>...</ul>

L'elemento <ul> (unorder list) lista non ordinata, richiede al suo interno l'elemento <li> per visualizzare le voci in elenco. Serve per creare una lista non ordinata di un elenco puntato di voci.

<ul>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5


Torna su
 

type

L'attributo type applicato alle liste non ordinate <ul> serve per cambiare il simbolo alle voci della lista. Avete notato nell'esempio sopra che a fianco di ogni voce ci sono dei pallini pieni? Non li ho messo io ma il tag <ul> che per default adopera questo pallino. Con l'attributo type si possono cambiare in cerchietti (circle) o quadratini (square).

type="disc" disco solido
type="circle" cerchietto
type="square" quadrato

<ul type="circle">
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5


<ul type="square">
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5

Consiglio: l'uso dei fogli di style permette un controllo molto pių accurato e versatile, ad esempio come 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:

  1. Primi Passi
  2. Guida HTML
  3. Guida CSS
  4. XHTML con Style


Torna su
 

dir

L'attributo dir serve ad invertire la posizione dei simboli nel caso in cui la numerazione o il simbolo lo si volesse a destra della lista anziché a sinistra. L'attributo dir puō essere usato sia per le liste ordinate <ol& che per quelle non ordinate <ul> impostando il valore rtl destro (sinistro ltr).

<ul dir="rtl" type="square">
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5

Questo attributo č deprecato e non pių supportato da HTML 5



Torna su
 

Elenchi di definizione

Con gli elementi <dt>, <dd> e <dl> č possibile creare Elenchi di definizione, 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>intermedi</dt><dd>guida html5 e guida CSS</dd>
</dl>

Questo il risultato:

principianti
rubrica primi passi
intermedi
guida html5 e guida CSS
 

<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>Toni</dt><dd>si, molto meglio di quella di ieri</dd>
</dl>
Andrea
Oggi č una bella giornata.
Toni
si, molto meglio di quella di ieri.
 

<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>Toni</dt><dd>si, molto meglio di quella di ieri</dd>
</dl>
Andrea
Oggi č una bella giornata.
Toni
si, molto meglio di quella di ieri.


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 i vari menų orizzontali che si trovano ad inizio pagina sono fatti proprio da liste ordinate e non opportunamente ridefinite all'interno di un CSS. Per saperne di pių a riguardo di questo tipo di menų si veda questa pagina. Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi