Guida di HTML (base)

Elenchi

In questo capitolo impareremo come inserire nelle nostre pagine web alcune importantissime strutture: gli elenchi.

Elenchi puntati e numerati

La sintassi che ci consente di inserire elenchi puntati e numerati è molto semplice e intuitiva: vediamola in un esempio.

<p>Anche VIKI, a modo suo, obbediva alle tre leggi della robotica:</p>
<ol>
 <li>Un robot non può recar danno a un essere umano né può permettere
 che, a causa del proprio mancato intervento, un essere umano riceva danno.</li>
 <li>Un robot deve obbedire agli ordini impartiti dagli esseri umani,
 purché tali ordini non contravvengano alla Prima Legge.</li>
 <li>Un robot deve proteggere la propria esistenza, purché questa autodifesa
 non contrasti con la Prima o con la Seconda Legge.</li>
</ol>

Questo codice sarà visualizzato come:

Anche VIKI, a modo suo, obbediva alle tre leggi della robotica:

  1. Un robot non può recar danno a un essere umano né può permettere che, a causa del proprio mancato intervento, un essere umano riceva danno.
  2. Un robot deve obbedire agli ordini impartiti dagli esseri umani, purché tali ordini non contravvengano alla Prima Legge.
  3. Un robot deve proteggere la propria esistenza, purché questa autodifesa non contrasti con la Prima o con la Seconda Legge.

Notiamo subito che il browser numera automaticamente gli elementi della lista, nell'ordine in cui sono scritti. OL (ovvero il tag entro cui la lista è contenuta, come si può vedere alle righe 2 e 6 dell'esempio) infatti sta per Ordered List.

L'anatomia di una lista, quindi è la seguente:

  • Un tag (nel nostro esempio il tag <ol>) contiene l'intera lista, ovvero tutti i suoi elementi.
  • All'interno della lista, ogni elemento è racchiuso in una coppia di tag <li>

Se volessimo rappresentare un semplice elenco puntato, sarebbe sufficiente modificare il tag OL in UL (Unordered List):

<p>Per costruire una pagina web è sufficiente:</p>
<ul>
 <li>Un editor di testo</li>
 <li>Un browser</li>
 <li>Tanta fantasia</li>
</ul>

Andare a capo sullo stesso punto

Naturalmente, come ogni altro elemento HTML, all'interno di <li> può trovarsi qualsiasi altro tag: per mandare a capo il testo, all'interno di un punto della lista, basta usare i tag <br> e <p>, come descritto nel primo capitolo.

<p>My PC:</p>
<ul>
 <li><strong>Scheda madre</strong><br/>Asus P5K</li>
 <li><strong>Processore</strong><br/>Intel Core 2 Duo</li>
 <li><strong>RAM</strong><br/>2GB DDR</li>
</ul>

Questo diventa:

My PC:

  • Scheda madre
    Asus P5K
  • Processore
    Intel Core 2 Duo
  • RAM
    2GB DDR

Elenchi annidati

Un'altra utile caratteristica riguarda l'inserimento di elenchi annidati. Un elenco annidato è un elenco dentro l'elenco, ma forse un esempio è più chiaro di un gioco di parole:

Le più famose famiglie di sistemi operativi sono:

  • Microsoft Windows
  • Unix
    • Linux
    • BSD
    • SystemV
  • Apple MacOS

Come si può vedere nell'esempio, il punto Unix contiene a sua volta altri tre punti: Linux, BSD e SystemV. Questi tre punti sono leggermente spostati a destra, ad indicare che sono "sotto" un altro punto.

Questo effetto si ottiene semplicemente innestando gli elenchi, ovvero creando un elenco puntato dentro al punto che ci interessa:

<p>Le più famose famiglie di sistemi operativi sono:</p>
<ul>
 <li>Microsoft Windows</li>
 <li>Unix
  <ul>
   <li>Linux</li>
   <li>BSD</li>
   <li>SystemV</li>
  </ul>
 </li>
 <li>Apple MacOS</li>
</ul>

Per capire questo codice si guardi la riga 4, dove inizia il punto Unix. Questa riga inizia con <li>, ma, a differenza delle altre, non termina con </li>. Questo fa sì che l'intero elenco unordered che segue (righe 5-9) sia creato all'interno dello stesso punto Unix.

Elenchi di definizioni

HTML mette a disposizione anche un'altro tipo di elenco, meno usato degli altri due: l'elenco di definizioni.

Come si intuisce dal nome, l'elenco di definizioni serve pubblicare una lista di parole, con l'annesso significato. Il tag HTML per l'elenco di definizioni è <dl> (definition list), e il sui utilizzo è leggermente diverso dai due tag visti in precedenza. Ogni definizione infatti è composta da due punti:

  • <dt> - Sta per definition term, e indica il termine da descrivere.
  • <dd> - Sta per definition description, e indica la definizione vera e propria.

Ecco un esempio di come può essere usata una lista di definizioni:

<p>Ecco gli smiles più usati in rete:</p>
<dl>
 <dt>:-)</dt>
 <dd>Sorriso</dd>

 <dt>:-(</dt>
 <dd>Tristezza</dd>

 <dt>;-)</dt>
 <dd>Fare l'occhiolino</dd>

 <dt>:-D oppure XD</dt>
 <dd>Risata</dd>
</dl>

Questo codice produrrà la seguente lista:

Ecco gli smiles più usati in rete:

:-)
Sorriso
:-(
Tristezza
;-)
Fare l'occhiolino
:-D oppure XD
Risata

Bruttina? Non disperiamo, e ricordiamo che l'aspetto al momento non ci preoccupa (vedi i primi capitoli): con una guida successiva impareremo ad allegare alle pagine un foglio di stile CSS, in grado di modificare completamente l'elenco della pagina.

In breve...

In questo capitolo abbiamo appreso che...

  • In HTML possiamo creare liste di elementi.
  • I tipi di liste a disposizione sono
    • elenco puntato
    • elenco numerato
    • elenco di definizioni
  • La struttura del codice di una lista è sempre la stessa:
    • l'intera lista è racchiusa nei tag che la identificano (<ol>, <ul>, <dl>)
    • Ogni elemento della lista è marcato dal tag <li> (gli elenchi di definizione usano <dt> e <dd>)
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag