lezioni sui siti web. prof.Romei Michele
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 i programmi di videoscrittura.
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.
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 :
<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
Guida HTML 5
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:
a. Primi Passi HTML
b. Guida HTML
c. Guida CSS
d. Guida XHTML
e. Guida HTML 5
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:
15. Primi Passi HTML
16. Guida HTML
17. Guida CSS
18. Guida XHTML
19. 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:
c. Primi Passi HTML
d. Guida HTML
e. Guida CSS
f. Guida XHTML
g. Guida HTML 5
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
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:
o Primi Passi HTML
o Guida HTML
o Guida CSS
o Guida XHTML
o 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
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
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>
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
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.
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.