. Oltre alle intestazioni e ai tag che definiscono i paragrafi e, naturalmente, i link, forse gli elementi più utilizzati di HTML sono gli elenchi o liste. In effetti la ragione principale per la quale vengono create le pagine Web, è quella di mettere a disposizione di tutti gli utenti del World Wide Web delle informazioni (se possibile uniche): e, in effetti, le liste sono un mezzo efficace per organizzare le informazioni e migliorne l'accessibilità. Questo strumento organizzativo, utilizzato da sempre anche nei testi scritti, può essere facilmente inserito nelle pagine in HTML per mezzo di specifici tag.
Il linguaggio HTML definisce 5 tipi di liste ma, di questi, affronteremo i tipi più utili:
Una forma elementare di elenco può essere creata specificando il tag <BR> dopo ogni elemento della lista; infatti questo tag genera un'interruzione di riga e forza i testi che lo seguono a essere visualizzati nella riga successiva. L'autore dovrà manualmente inserire gli opportuni caratteri, per esempio i numeri se vuole ottenere una lista ordinata, per dare all'elenco la forma di una lista. È evidente però che un tale approccio non risulta particolarmente efficiente, soprattutto se si vuole una lista dove ciascun elemento appaia leggermente rientrato rispetto al testo normale. I tag definiti in HTML permettono invece una gestione immediata di tutti questi aspetti.
I tag delle liste possiedono in comune i seguenti elementi:
Come esercizio, intendiamo creare una lista dei primi 4 canti danteschi per poterla mettere a confronto con l'elenco di paragrafi utilizzato precedentemente per i link. A tal fine ci posizioniamo nel file canti12.html nella riga che precede l'intestazione Canto I. Dopo aver immesso con il tasto di invio alcune righe vuote,
Al termine si dovrebbe aver ottenuto la struttura sottostante
<ol><li>Canto I
<li>Canto II
<li>Canto III
<li>Canto IV
</ol>
L'anteprima mostra come la lista venga, dal browser, automaticamente numerata nonché indentata rispetto al margine sinistro: si ottiene così un indubbio miglioramento della leggibilità.
Le liste ordinate richiedono dunque solo due tag HTML:
Per liste abbastanza lunghe, il vantaggio di un tale approccio è evidente: si consideri ad esempio il caso di dover inserire un nuovo elemento tra i preesistenti: con la numerazione automatica non sussiste nessun problema ma se la numerazione della lista fosse stata immessa manualmente si dovrebbe, per buona parte, aggiornarla.
In alcuni casi (non il nostro), potrebbe essere necessario iniziare la numerazione di una lista con un numero diverso da 1. A tal fine esiste l'attributo START che permette di cambiare la numerazione standard. È sufficiente quindi modificare il tag di apertura <OL>, per esempio, in <OL START="5"> per iniziare la numerazione dal numero 5.
Dato che quest'ultimo attributo non è raggiungibile con la selezione di Edit tag... già più volte trattata, ci si potrebbe chiedere come sia possibile conoscere tutti gli attributi di un certo tag e avere una loro breve descrizione (sempre nel caso che non si voglia consultare un manuale di HTML!). In HomeSite si procede così:
. Verrà aperta una sezione con l'elenco di tutti gli attributi seguiti da una breve descrizione. In alternativa si può selezionare la voce di menu Help/Contents per un inquadramento generale, Help/Show Help for Current Tag se si è posizionati entro un certo tag.
Infine, per completare il nostro esempio e rendere la lista significativa, immettiamo i necessari link con le tecniche viste precedentemente (evidenziazione, tasto àncora, immissione della destinazione in corrispondenza di HREF, ponendo attenzione al fatto che alcune sono interne al medesimo file, altre vanno riferite ad una pagina diversa).
A volte potrebbe essere necessario creare delle liste di elementi dove la numerazione non risulta particolarmente importante: può essere sufficiente ottenere solo una maggiore evidenza nella lettura utilizzando qualche tipo di richiamo, per esempio un pallino. Nel linguaggio HTML queste liste hanno essenzialmente lo stesso aspetto delle liste numerate, tranne per il fatto che sono racchiuse dai tag <UL>...</UL> (Unordered List). Gli elementi della lista sono ancora separati dal tag <LI>.
È quindi immediato modificare la lista ordinata appena costruita: è sufficiente correggere i tag di apertura <OL> e chiusura </OL>, rispettivamente in <UL> e </UL> (si cancelli, nel caso sia presente, anche l'attributo START). L'anteprima mostra come il browser associ ad ogni elemento della lista un pallino e mantenga un rientro rispetto al margine sinistro.
Il tag <LI> di una lista ordinata o no può contenere qualsiasi cosa (in origine questo tag era in effetti un tag contenitore); può contenere paragrafi di testo, delle immagini e perfino altre liste. Quest'ultima possibilità apre la strada alla stesura di strutture gerarchiche fatte di più liste, una dentro quell'altra cioè di una lista di liste. In tal modo diventa possibile evidenziare relazioni più complesse tra i vari elementi.
Proviamo a costruirne una non particolarmente complicata: con le tecniche descritte sopra e nelle righe successive a quanto immesso precedentemente, definiamo una comune lista non ordinata
Una veloce visualizzazione mostra una lista non numerata come la precedente. In corrispondenza della prima cantica vogliamo far seguire l'elenco dei primi 4 canti, presente appena sopra. Sfruttiamo allora le comuni tecniche del taglia ed incolla tipiche di Windows:
Questo è tutto: l'anteprima mostra (fig.5) che il browser fa rientrare la sottolista dei canti rispetto ai nomi delle 3 Cantiche e utilizza un simbolo diverso (un pallino vuoto anziché pieno) come nuovo simbolo che distingue l'inizio di ogni elemento della sottolista.
 |
| Fig. 5: Liste annidate. |
Le liste di definizioni o a glossario, hanno un aspetto leggermente diverso rispetto agli altri tipi di liste. Ogni elemento di una lista a glossario è formato da due parti:
Questo formato è proprio l'ideale per presentare liste di parole o concetti con i loro significati. Ogni parte della lista ha un proprio tag:
Entrambi i tag sono vuoti e si presentano in coppia, anche se la maggior parte dei browser è in grado di gestire anche elementi contenenti uno solo di questi due tag.
L'intera lista a glossario è indicata dalla coppia di tag <DL>...</DL> (Definition List, lista di definizioni). Generalmente i browser formattano le liste a glossario ponendo i termini e le definizioni su due righe distinte, con il margine sinistro delle definizioni leggermente rientrato rispetto al testo.
Formiamo una tale lista a glossario accompagnando il nome delle tre cantiche dantesche con una breve spiegazione. A tal fine
(Definition List) presente nella parte destra della barra degli strumenti in corrispondenza dei tag delle liste (Lists).
Onde evitare di cercare una qualche definizione per le tre cantiche, in fondo al file attualmente aperto nell'esercitazione (canti12.html), vengono suggerite tre brevi definizioni: per utilizzarle si applicano ancora una volta le solite tecniche del taglia ed incolla (clic destro/taglia/ci si posiziona nel punto di inserimento/clic destro/incolla). La lista dovrebbe apparire come riportato sotto
<DL>
<DT>Inferno<DD>Prima cantica del poema dantesco. Dante, assieme a Virgilio, visita il mondo dei dannati, una profonda voragine a forma di imbuto che si inabissa in nove cerchi fino ad arrivare al centro della Terra.
<DT>Purgatorio<DD>Sempre accompagnato da Virgilio, visita il regno dei penitenti protesi verso un futuro di redenzione.
<DT>Paradiso<DD>Guidato da Beatrice, la donna amata, è la cantica della beatitudine e della luce, luce che si fa sempre più abbacinante più si sale verso Dio.
</DL>
mentre l'anteprima nel browser fornisce la visualizzazione seguente
 |
 |
 |