Elenchi OL, gli elenchi ordinati (o elenchi numerati)

Transcript

1 04 HTML elenchi Prof. Sabato Dario Pagina 1 di 5 Elenchi OL, gli elenchi ordinati (o elenchi numerati) Gli elenchi ordinati sono contraddistinti dall enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da numeri. Il TAG da utilizzare per aprire un elenco ordinato è <ol> («ordered list») e gli elementi sono individuati dal tag <li>(«list item» - «elementi lista») Esempio: <ol> <li>primo elemento <li>secondo elemento <li>terzo elemento Risultato a video: Il TAG <ol> lascia una riga di spazio prima e dopo il testo che lo circonda (fatta eccezione però l inclusione di un nuovo elenco all interno di un elenco preesistente). Gli elementi dell elenco sono sempre rientrati di uno spazio verso destra UL, gli elenchi non ordinati (o elenchi puntati) Gli elenchi non ordinati, usati per creare i menu, sono individuati dal TAG e compongono un elenco di elementi non ordinati (comunemente chiamato «elenco puntato»). Il TAG da utilizzare per aprire un elenco non ordinato è («unordered list») e gli elementi sono individuati dal tag <li>(«list item» - «elementi lista») Esempio: <li>primo elemento <li>secondo elemento <li>terzo elemento

2 04 HTML elenchi Prof. Sabato Dario Pagina 2 di 5 Risultato a video: Possiamo scegliere altri caratteri o simboli a posto per pallinio, ma vedremo in seguito come farlo sfruttando i CSS, per ora ci basti dire che l attributo type che era previsto a questo scopo è stato deprecato da HTML 5. Annidare le liste non numerate In generale possiamo inserire diversi livelli all interno delle liste, creando delle strutture ad albero, utili a definire oggetti come menu o tassonomie. Per farlo è sufficiente inserire un nuovo elenco all interno di un elemento: <li>primo della 1a lista <li>secondo della 1a lista <li>primo della 2a lista <li>secondo della 2a lista <li>primo della 3a lista <li>terzo della 2a lista Interessante notare che il rendering di base in genere mostra simboli diversi per i punti a seconda del livello dell elemento. Attributo type, per descrivere il tipo di elenco L attributo type applicato al tag ol serve per specificare il tipo di enumerazione che vogliamo applicare. Lo stile di enumerazione visualizzato di default dal

3 04 HTML elenchi Prof. Sabato Dario Pagina 3 di 5 browser è quello numerico, ma possiamo indicare se le voci di elenco seguono punti definiti come numeri, come lettere dell alfabeto o come numeri romani. Valore di type type="1" type="a" type="a" type="i" type="i" numeri interi arabi (valore di default) numeri alfabeto minuscolo numeri alfabeto maiuscolo numeri numeri romani minuscoli numeri numeri romani maiuscoli Proviamo quindi a vedere come rendere un elenco annidato con diversi tipi di enumerazione: <ol type="1"><!-- numeri --> <li>primo livello <ol type="a"><!-- lettere --> <li>secondo livello <ol type="i"><!-- numeri romani --> <li>terzo livello <li>terzo livello <li>secondo livello <li>primo livello Poiché questi aspetti hanno rilevanza semantica, non è stato necessario deprecare l attributo come nel caso di ul.

4 04 HTML elenchi Prof. Sabato Dario Pagina 4 di 5 Start e value, riprendere o gestire la numerazione Può capitare che per esigenze diverse vogliamo far partire la numerazione da un certo valore, in questo caso ci serviamo di due attributi: Attributo Si applica al tag start ol indica il valore iniziale da cui far partire la numerazione della lista. value li (solo se è all interno di un ol) indica il valore applicato alla numerazione di un certo elemento e modifica la numerazione anche degli elementi successivi nella lista. Ecco un semplice esempio: <!-- lista che parte da 10 --> <ol start="10"> <li>elemento <li>elemento <!-- da questo punto in poi contiamo a partire da 30 --> <li value="30">elemento <li>elemento Liste di definizione Gli liste di definizione sono lo strumento ideale per elenchi in è necessario associare ad ogni voce anche una testo descrittivo. Definiamo le liste (definition list) con il tag <dl>, mentre gli elementi dell elenco, a differenza delle altre liste, sono formati da due parti: Tag <dt> <dd> (definition term), indica il termine da definire. A differenza dell elemento <li>non è rappresentato con rientro a sinistra (definition description), è la definizione vera e propria del termine. In genere questo elemento è reso con un rientro

5 04 HTML elenchi Prof. Sabato Dario Pagina 5 di 5 Vediamo un esempio: Ecco i principali tag per delimitare il testo: <dl> <dt>p</dt> <dd>individua l'apertura di un nuovo paragrafo</dd> <dt>div</dt> <dd>individua l'apertura di un nuovo blocco di testo</dd> <dt>span</dt> <dd>individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili</dd> </dl> ci sono poi altri tag che...