Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

6. Liste, Liste, Liste

Le liste possono essere utili per presentare insiemi di oggetti in un modo semplice da recepire. In realta', c'e' una lista anche qua, che ti attende dopo il prossimo titolo!

Obiettivi

Dopo questa lezione sarai in grado di:

Identificare i codici HTML utili a creare liste ordinate, non ordinate ed annidate per una pagina web.
Posizionare diversi tipi di liste nella tua pagina web ed osservare come e' cambiato il documento.

Lezione

Molte web page si compongono di liste di oggetti -- questi possono essere elementi preceduti da simboletti (Liste Non Ordinate) o numerati in modo sequenziale (Ordinate). Queste liste sono semplici da formattare in HTML, e possono anche essere annidate (liste di liste) per produrre un proprio stile di visualizzazione. Le liste sono anche agevoli nella creazione di indici o tabelle di contenuti di una serie di documenti o di capitoli.

Liste Non Ordinate

Le Liste Non Ordinate, od i tag <ul> .. </ul>, sono quelle che appaiono come liste di elementi con "simboletti" o con elementi di distinzione. Il tipo di simboletto dipende dalla particolare versione di web browser che stai usando e dal tipo di font scelto per la visualizzazione di normali testi WWW (per esempio nei caratteri Times questo e' un quadrettino, in Geneva e' un punto grande).

Ecco un esempio di una lista non ordinata:

La Mia Lista:

Elemento 1
Elemento 2
Elemento 3

E questa e' la formattazione HTML necessaria per produrre questo risultato:


     <B>La Mia Lista:</B>
     <ul>
       <li> Elemento 1
       <li> Elemento 2
       <li> Elemento 3
     </ul>

Il tag <ul> definisce l'inizio e la fine della lista, ed il tag <li> indica ogni elemento della lista (ogni list item).

Liste Ordinate

Le Liste Ordinate sono quelle in cui il browser numera ogni elemento successivo della lista cominciando da "1". Nota che la sola differenza e' modificare il tag ul nel tag ol. Usando l'esempio di cui sopra:

La Mia Lista:

Elemento 1
Elemento 2
Elemento 3

E questa e' la formattazione HTML necessaria per produrre questo risultato:


     <B>La Mia Lista:</B>
     <ol>
       <li> Elemento 1
       <li> Elemento 2
       <li> Elemento 3
     </ol>

Liste Annidate

Le Liste Ordinate e quelle Non Ordinate possono avere diversi livelli; ciascuna avra' una indentazione appropriata fornita dal tuo web browser. Il tuo obbligo piu' pesante sara' quello di verificare che ogni lista sia stata conclusa in modo appropriato e che l'annidamento sia corretto.

Puo' cominciare a sembrare complicato con tutti questi tag <ol> <li> </ul> <li> disposti in lungo ed in largo, ma prova solo a ricordare la struttura di base


      <ul>            <ol>
          <li>           <li>
          <li>           <li>
      </ul>           </ol>

Questo e' un esempio di una lista non ordinata con sottolivelli di altre liste:

Liste Non Ordinate Annidate

Questo e' il primo elemento
Questo e' il secondo elemento

Questo e' il primo sottelemento del secondo elemento

E questo e' il sottelemento del sottelemento
Ti sei gia' perso?

Questo e' il secondo sottelemento del secondo elemento
Questo e' il terzo sottelemento del secondo elemento

Questo e' il terzo elemento

Nota come il simboletto evidenza le modifiche per i diversi livelli della lista.

E questo e' il codice HTML per produrre questa formattazione:


  <B>Liste Non Ordinate Annidate</B>
  <ul>
     <li>Questo e' il primo elemento
     <li>Questo e' il secondo elemento
     <ul>
       <li> Questo e' il primo sottelemento del secondo elemento
       <ul>
         <li> E questo e' il sottelemento del sottelemento
         <li> Ti sei gia' perso?
       </ul>
       <li> Questo e' il secondo sottelemento del secondo elemento
       <li> Questo e' il terzo sottelemento del secondo elemento
       </ul>
     <li>Questo e' il terzo elemento
  </ul>

Liste Annidate -- Mischiarle Insieme

Non solo tu puoi includere liste ordinate in altre liste ordinate, ma puoi anche mischiare e unire diversi tipi di liste. Tenetevi forte!! Il codice HTML comincia a diventare veramente terribile, ma dai un'occhio a come le liste possano contenere interamente altre liste.

Per esempio, questa lista ordinata include una lista non ordinata annidata:

Liste Non Ordinate Annidate Liste Non Ordinate Annidate

Questo e' il primo elemento
Questo e' il secondo elemento

Questo e' il primo sottelemento del secondo elemento

E questo e' un sottelemento numerato di un sottelemento
E questo e' un altro sottelemento numerato di un sottelemento
Ti sei gia' perso?

Questo e' il secondo sottelemento del secondo elemento
Questo e' il terzo sottelemento del secondo elemento

Questo e' il terzo elemento

E questo e' il codice HTML per produrre questa formattazione. Nota come il codice abbia una indentazione particolare perche' sia piu' semplice da leggere:


<B>Liste Non Ordinate Annidate</B>
     <ol>
        <li>Questo e' il primo elemento
        <li>Questo e' il secondo elemento
           <ul>
           <li>Questo e' il primo sottelemento del secondo elemento
              <ol>
              <li>E questo e' un sottelemento numerato di un sottelemento
              <li>E questo e' un altro sottelemento numerato di un sottelemento
              <li> Ti sei gia' perso?
              </ol>
           <li> Questo e' il secondo sottelemento del secondo elemento
           <li> Questo e' il terzo sottelemento del secondo elemento
           </ul>
        <li>Questo e' il terzo elemento
     </ol>

Posizionare le Liste nel tuo Documento HTML

Nota: Se non hai i documenti di lavoro dalla lezione precedente scaricane una copia ora.

Usando i list tag, aggiungeremo una lista ordinata e una non ordinata alla tua pagina Volcano Web.

Riapri il tuo workspace (se non e' gia' aperto).
Apri il tuo documento HTML nel text editor.
Sotto il titolo Glossario useremo una lista non ordinata per mostrare alcuni esempi di termini tecnici in lingua inglese usati dai vulcanologi. Vai ora a questa sezione del tuo documento HTML.
Per prima cosa aggiungi le seguenti frasi.
```
     Quanti ne conosci?
```

Ora inserisci il codice HTML che serve a creare la lista di termini:

      <ul>
          <li>caldera
          <li>vescicolarita'
          <li>pahoehoe
          <li>reologia
          <li>lahar
      </ul>

Ora useremo una lista ordinata per definire le parti dei compiti richiesti da questa lezione. Sotto il titolo Progetti di Ricerca, digita il seguente testo: (AIUTINO -- questa potrebbe essere una buona occasione per fare un copia&incolla dalla pagina web, a meno che tu non ti diverta cosi' tanto a scrivere!)


 La tua missione e' trovare informazioni e resoconti su un vulcano, 
oltre a quelli elencati sotto, che e' eruttato negli ultimi 100 anni.
Il tuo resoconto deve includere:
  <ol>
    <li>Tipo di vulcano
    <li>Posizione geografica
    <li>Nome, distanza, e popolazione della citta' vicina piu' grande
    <li>Data dell'eruzione piu' recente e quella della piu' distruttiva
    <li>Altri eventi associati con l'ultima eruzione (terremoti, colate di fango,         
              inondazioni, etc)
  </ol>
  <p>
  Quindi, allega ad una pagina la descrizione del maggior pericolo a cui vanno 
  incontro le persone che risiedono nelle vicinaze del vulcano.
  Descrivi cosa faresti se ti venisse dato l'incarico di diminuire 
  i rischi della popolazione.

Salva nel text editor ed Aggiorna nel tuo web browser.

Controlla il tuo Lavoro

Se vuoi confrontare il tuo risultato con un esempio.... Se le tue liste dovessero risultare diverse da quelle dell'esempio, ricontrolla come hai digitato il loro codice HTML nel tuo text editor. Assicurati che questo corrisponda a quello alla sezione Posizionare le Liste nel tuo Documento HTML di questa lezione.

Verifica

Quale e' il valore delle liste all'interno di una web page?
Qual e' il tag per una lista non ordinata?
Qual e' il tag per una lista ordinata?
Come potresti realizzare una lista annidata?
Quali passi hai compiuto per aggiungere una lista al tuo documento HTML?

Pratica Indipendente

Potresti cominciare facendo pratica con la modifica della lista ordinata che hai creato, trasformandola in una non ordinata.... Quindi, inserisci una lista ordinata o non ordinata di oggetti nel tuo documento WWW privato. Assicurati che sia visualizzata in modo esatto dal tuo browser. Riesci a creare una lista che contenga delle sottoliste?

Prossimamente....

Rendilo un po' di piu' un file solo testo -- aggiungere immagini alla tua page.

VAI A.... | Indice Delle Lezioni | indietro: "Stili di Testo" | avanti: "Grafici" |

Writing HTML: Lezione 6: Liste, Liste, Liste
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The Internet Connection at MCLI is Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML