9 − Elenchi puntati numerati e non numerati

Transcript

Corso: I O.S.P.A. Laboratorio: Elementi di grafica per il web C.S.F. En.A.I.P. Cuneo N° scheda 9
Titolo Esercitazione / Argomento trattato h previste: 2 −
data: ____________ Elenchi puntati numerati e non numerati Obiettivi: •
I tag <UL> , <OL> e i loro attributi Tipo di attività Cognome e Nome ................................................................ Attività individuale Considerazioni personali e difficoltà riscontrate nello svolgimento dell’esercitazione:
______________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ Esercitazione effettuata dal Formatore al Alessia Cesana Ore effettive Cognome ................................................................................. Nome ....................................................................................... 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 seguenti tags: •
•
•
<UL></UL>, elenchi non ordinati; <OL></OL>, elenchi ordinati; <LI></LI> per le voci di elenco (sia ordinato che non ordinato). 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: CODICE HTML RISULTATO <OL>
<LI>primi
<LI>Guida
<LI>Guida
<LI>XHTML
</OL>
1.
2.
3.
4.
passi
HTML
CSS
con Style
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
ATTRIBUTI DI <OL> 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, ... Esempio 1: CODICE HTML <OL type="a">
<LI>primi
<LI>Guida
<LI>Guida
<LI>XHTML
</OL>
passi</LI>
HTML</LI>
CSS</LI>
con Style</LI>
RISULTATO a.
b.
c.
d.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
Esempio 2: CODICE HTML <OL type="I">
<LI>primi
<LI>Guida
<LI>Guida
<LI>XHTML
</OL>
RISULTATO passi</LI>
HTML</LI>
CSS</LI>
con Style</LI>
I.
II.
III.
IV.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
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. Esempio 1: CODICE HTML RISULTATO <OL start="15">
<LI>primi passi</LI>
<LI>Guida HTML</LI>
<LI>Guida CSS</LI>
<LI>XHTML con Style</LI>
</OL>
15.
16.
17.
18.
Primi Passi
Guida HTML
Guida CSS
XHTML con Styl
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". Esempio 2: CODICE HTML RISULTATO <OL type="a" start="3">
<LI>Guida HTML</LI>
<LI>Guida CSS</LI>
</OL>
c.
d.
e.
f.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
ATTRIBUTI DI <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. Esempio: CODICE HTML RISULTATO <UL>
<LI>primi
<LI>Guida
<LI>Guida
<LI>XHTML
</UL>
passi</LI>
HTML</LI>
CSS</LI>
con Style</LI>
•
•
•
•
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
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. Esempio 1: CODICE HTML <UL type="circle">
<LI>primi passi
<LI>Guida HTML
<LI>Guida CSS
<LI>XHTML con Style
</UL>
RISULTATO o
o
o
o
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
Esempio 2: CODICE HTML <UL type="square">
<LI>Guida HTML</LI>
<LI>Guida CSS</LI>
</UL>
RISULTATO

Primi Passi
Guida HTML
Guida CSS
XHTML con Style
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 (o sinistro ltr). Esempio 1: CODICE HTML <OL dir="rtl">
<LI>primi
<LI>Guida
<LI>Guida
<LI>XHTML
</OL>
RISULTATO passi
HTML
CSS
con Style
Primi Passi .1
Guida HTML .2
Guida CSS .3
XHTML con Style .4
CODICE HTML RISULTATO Esempio 2: <UL type="square" dir="rtl">
<LI>Guida HTML</LI>
<LI>Guida CSS</LI>
</UL>
Primi Passi
Guida HTML
Guida CSS
XHTML con Style