Elenchi puntati e numerati

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Elenchi puntati e numerati"

Matteo Ruggeri
6 anni fa
Visualizzazioni

1 Elenchi puntati e numerati Gli elenchi giocano un ruolo molto importante nei testi, ma anche nella definizione di elementi strutturali delle pagine HTML. Dal punto di vista dell organizzazione del testo sono utili ad esempio quando occorre sintetizzare concetti per punti, indicare in sequenza le fasi di un processo oppure stilare un elenco di definizioni o un glossario. Nella organizzazione della struttura della pagina sono spesso utilizzati per definire menu ad esempio, cosa che anche semanticamente ha una sua valenza, perché si tratta sempre di liste. Sul piano del rendering, tipicamente spezzano il ritmo tipografico e rendono il testo più gradevole e più leggibile. Vediamo dunque quali sono le tre tipologie di elenco disponibili in HTML: Elenchi ordinati Elenchi non ordinati Elenchi di definizioni Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell elenco. La sintassi ha quindi questa forma: <elenco> <elemento>primo elemento<elemento> <elemento>secondo elemento<elemento> <elemento>n-esimo elemento<elemento> </elenco> UL, gli elenchi non ordinati (o elenchi puntati) L elenco non ordinato (unordered list) è forse il più usato e si descrive utilizzando il tag. Al suo interno possiamo inserire gli elementi della lista (list item) utilizzando il tag <li>. Ecco un semplice esempio <li>primo elemento <li>secondo elemento <li>terzo elemento HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 1

2 Anche se la resa grafica dipende dal browser, il risultato in genere è quello che otteniamo quando utilizziamo gli elenchi puntati nei programmi di videoscrittura: otteniamo gli elementi uno sotto l altro con un margine a sinistra e il classico pallino pieno per ogni punto. Possiamo scegliere altri caratteri o simboli, 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. OL, gli elenchi ordinati (o elenchi numerati) Gli elenchi ordinati (ordered list) sono contraddistinti dall enumerazione degli elementi che compongono la lista. Il tag da utilizzare per aprire un elenco ordinato è <ol> e anche in questo caso gli elementi sono individuati dal tag <li>: Testo che precede la lista <ol> <li>primo elemento <li>secondo elemento <li>terzo elemento Testo che segue la lista HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 2

3 Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri. Per riprendere il parallelo con i software di videoscrittura, sarebbero i cosiddetti elenchi numerati. 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 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 Descrizione type="1" numeri interi arabi (valore di default) type="a" numeri alfabeto minuscolo type="a" numeri alfabeto maiuscolo type="i" numeri romani minuscoli type="i" numeri romani maiuscoli HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 3

4 Proviamo quindi a vedere come rendere un elenco annidato con diversi tipi di enumerazione: <ol type="1"> <li>primo livello <ol type="a"> <li>secondo livello <ol type="i"> <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. 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 Descrizione 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. HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 4

5 Ecco un semplice esempio:  <ol start="10"> <li>elemento <li>elemento  <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 Descrizione <dt> (definition term), indica il termine da definire. A differenza dell elemento <li> non è rappresentato con rientro a sinistra <dd> (definition description), è la definizione vera e propria del termine. In genere questo elemento è reso con un rientro HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 5

6 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... Il vecchio attributo type Ovviamente la scelta del tipo di elenco attraverso l attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c è anche la possibilità di scegliere un immagine (ad esempio una GIF) come segno distintivo per l elenco puntato. Chi fosse interessato ad approfondire può consultare la relativa lezione della guida ai fogli di stile. HTML: Elenchi puntati e Numerati Ultima revisione 16/11/2016 Pag. 6

Documenti analoghi

APPUNTI DI HTML (SECONDA LEZIONE)

APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà