Gli elenchi nell'HTML

Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono sostanzialmente di tre tipi:

  • 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>nome del primo elemento
 <elemento>nome del secondo elemento
</elenco>

come si può vedere, il tag che individua l’elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.

Gli elenchi ordinati

Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri (se utilizzate un programma di videoscrittura, siete abituati a chiamarli elenchi numerati).

Il tag da utilizzare per aprire un elenco ordinato è <ol> ("ordered list") e gli elementi sono individuati dal tag <li>("list item"):

Testo che precede la lista
<ol>
 <li>primo elemento</li>
 <li>secondo elemento</li>
 <li>terzo elemento</li>
</ol>
Testo che segue la lista

 Testo che precede la lista
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
Testo che segue la lista


Da notare che il tag che individua l’elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l’inclusione di un nuovo elenco all’interno di un elenco preesistente: in questo caso non viene lasciato spazio, néprima, né dopo.

Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco.

Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type. Ad esempio:

<ol type="a">
  <li>primo elemento
  <li>secondo elemento
  <li>terzo elemento
</ol>

Gli stili consentiti sono:

Valore dell'attributo type
Stile di enumerazione
type="1"
(è così di default)		 numeri arabi

<ol type="1">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>
  1. primo
  2. secondo
  3. terzo
type="a" alfabeto minuscolo

<ol type="a">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>
  1. primo
  2. secondo
  3. terzo
type="A" alfabeto maiuscolo

<ol type="A">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>
  1. primo
  2. secondo
  3. terzo
type="i" numeri romani minuscoli

<ol type="i">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>
  1. primo
  2. secondo
  3. terzo
type="I" numeri romani maiuscoli

<ol type="I">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>
  1. primo
  2. secondo
  3. terzo


Gli elenchi non ordinati

Gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list"), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati):

<ul>
  <li>primo elemento
  <li>secondo elemento
  <li>terzo elemento
</ul>

il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default dipende dal browser, ma di solito è un "pallino pieno". È possibile comunque scegliere un altro tipo di segno:

Valore dell'attributo type
Stile di enumerazione
type="disc"
(è così di default)		 visualizza un "pallino" pieno.
È la visualizzazione di default

<ul type="disc">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>
  • primo
  • secondo
  • terzo
type="circle" visualizza un cerchio vuoto al proprio interno

<ul type="circle">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>
  • primo
  • secondo
  • terzo
type="square" Visualizza un quadrato pieno al proprio interno

<ul type="square">
  <li>primo
  <li>secondo
  <li>terzo
</ul>
  • primo
  • secondo
  • terzo




Da notare inoltre che il tipo di segno grafico, varia in automatico al variare dell’annidamento della lista. Ad esempio:

<ul>
 <li>primo della 1a lista</li>
 <li>secondo della 1a lista</li>
  <ul>
   <li>primo della 2a lista</li>
   <li>secondo della 2a lista</li>
   <ul>
    <li>primo della 3a lista</li>
   </ul>
  </ul>
 <li>terzo della 1a lista</li>
</ul>
  • primo della 1a lista
  • secondo della 1a lista
    • primo della 2a lista
    • secondo della 2a lista
      • primo della 3a lista
    • terzo della 1a lista


Elenchi di definizioni

Gli elenchi di definizioni sono individuati dal tag <dl>. Gli elementi dell’elenco (a differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due parti:

<dt> definition term: indica il termine da definire. A differenza dell’elemento <li> in questo caso non c’è rientro.
<dd> definition description: è la definizione vera e propria del termine. L’elemento è rientrato.


Vediamo un esempio:

Ecco i principali tag per delimitare il testo:

<p>
individua l'apertura di un nuovo paragrafo
<div>
individua l'apertura di un nuovo blocco di testo
<span>
individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili
ci sono poi altri tag che...

Approfondimenti

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.

Link e l'ipertestualità

Una delle caratteristiche che ha fatto la fortuna del web è l’essere costituito non da testi ma da ipertesti (un’altra delle caratteristiche che hanno fatto grande il web è senz’altro la possibilità di interagire, ma questo è un altro discorso).

I link sono "il ponte" che consente di passare da un testo all’altro. In quanto tali, i link sono formati da due componenti:

il contenuto che "nasconde" il collegamento (non importa se si tratta di testo o di immagine) È la parte visibile del link, e proprio per questo l’utente deve essere sempre in grado di capire quali sono i collegamenti da cliccare all’interno della pagina
la risorsa verso cui il collegamento punta Si tratta di un’altra pagina (sullo stesso server o su un server diverso), oppure è un collegamento interno a un punto della pagina stessa

Di solito per spiegare che cosa sono i link si utilizza la metafora dell’ancora con "la testa" all’interno del documento stesso, e la "coda" in un altro documento (o all’interno di un altro punto del documento stesso).

Link che puntano ad altri documenti

Ecco la sintassi per creare un link con riferimento a un sito web:

Le risorse per webmaster sono su <a href="http://www.html.it/">HTML.IT</a>.

Che dà come risultato: 'Le risorse per webmaster sono su HTML.IT'.

Come si può intuire la testa della nostra àncora è il testo "HTML.IT", mentre la coda, cioè la destinazione (specificata dall’attributo href) è il sito web verso cui il link punta, cioè http://www.html.it.

È indifferente che la destinazione dell’ancora sia una pagina HTML di un sito, un’immagine, un file pdf , un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa. Ad esempio:

Immagine .gif, .jpg, .png Viene visualizzata nel browser
Documento .html, .pdf, .doc La pagina è visualizzata nel browser.
Nel caso dei documenti .doc e .pdf l'utente deve avere installato sul proprio pc l'apposito plugin (nella maggior parte dei casi è sufficiente che abbia installato rispettivamente Microsoft Word e Adobe Acrobat Reader). Se non è installato il plugin il sistema chiederà all'utente se salvare il file.
File .zip, file .exe Viene chiesto all’utente di scaricare il file

 NOTA bene: per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC.


Potete anche specificare un indirizzo e-mail. In questo caso si aprirà direttamente il client di posta dell’utente con l’indirizzo e-mail pre-impostato. La sintassi è la seguente:

<a href="mailto:tuaMail@nomeTuoSito.it">
 Mandami una e-mail
</a>.