Home Page Indietro


Pagina 7: Liste in HTML

Ci sono cinque diversi tipi di liste che posso essere prodotte in HTML: liste non ordinate, ordinate, di difinizione.


Liste non ordinate

Le liste non ordinate generano una lista con pallini.


Il codice per una lista non ordinata è il seguente:

<UL>
<LI>Primo punto
<LI>Punto successivo
</UL>

La combinazione di tag <UL> ... </UL> indica al browser dove iniziare e finire la lista e di indentarla a sinistra.
Il tag <LI> indica al browser di iniziare una nuova linea ed inserire un pallino. Si noti che la I di LI è una 'i' maiuscola e non il numero 1 (uno).


Liste Ordinate

Le liste ordinate sono analoghe alle liste non ordinate ad eccezione del fatto che vengono usati i numeri anzichè i pallini.

Le liste ordinate sono del tipo riportato di seguito:

  1. Questa
  2. è
  3. una
  4. lista
  5. ordinata


Il codice per la creazione di una lista ordinata è il seguente:

<OL>
<LI>Primo punto
<LI>Secondo punto
</OL>

La combinazione dei tag <OL> ... </OL> indica al browser dove iniziare e finire la lista e di indentarla a sinistra.
Il tag <LI> dice al browser di iniziare una nuova linea ed inserire un numero progressivo. Si noti che la I di LI è una 'i' maiuscola e non il numero 1 (uno).


Liste di Definizione

Le liste di definizione vengono utilizzate ad esempio in documenti quali i glossari in cui si desiderano definire delle parole.

Una lista di definizione è del tipo riportato di seguito:

Termine 1
Definizione del termine 1 - può essere lunga una linea o più linee - come è possibile vedere le linee successive vengono automaticamente indentate
Termine 2
Definizione del termine 2 - può essere lunga una linea o più linee - come è possibile vedere le linee successive vengono automaticamente indentate
Termine 3
Definizione del termine 3 - può essere lunga una linea o più linee - come è possibile vedere le linee successive vengono automaticamente indentate

Naturalmente è possibile aggiungere altri tag per scrivere i termini in grassetto, o inserire linee orizzontali, ecc.


Il codice per una lista di definizione è il seguente:

<DL>
<DT>Termine 1
<DD>Definizione del termine 1
<DT>Termine 2
<DD>Definizione del termine 2
<DT>Termine 3
<DD>Definizione del termine 3
</DL>


Riassunto dei tag :

NOME TAG di LISTA TAG di ELEMENTI
Non ordinate <UL> ... </UL> <LI>
Ordinate <OL> ... </OL> <LI>
Definizione <DL> ... </DL> <DT> <DD>


Alcuni trucchi

E' anche possibile creare liste annidate e modificare i simboli di lista. Se vi sentite di avere già confidenza leggete pure ora!


Il vostro lavoro

Per far pratica nella scrittura di liste è necessario iniziare un nuovo documento.

  1. Ritornate all'Editor HTML.

  2. Scegliete Close dal menu File per chiudere INDEX.HTM

Per creare un nuovo documento:

  1. Ritornate all'Editor HTML.

  2. Scegliete New dal menu File. Avrete bisogno di riposizionare la finestra.

  3. Scegliete Save As dal menu File. Nominate il vostro documento INTEREST.HTM e salvatelo nella cartella/directory pdcourse.

  4. Inserite la struttura di base del documento - se non ve la ricordate ritornate a Pagina 2 per rinfrescarvi la memoria. Il titolo di questo documento e l'intestazione potrebbe essere I miei interessi.

  5. Dovrete creare i tre seguenti sottotitoli:

    1. Inserite il primo sottotitolo I miei hobby e sotto questo create una lista non ordinata con almeno cinque hobby.

    2. Inserite il secondo sottotitolo I miei cinque programmi preferiti e sotto questo create una lista ordinata con i vostri cinque programmi TV preferiti.

    3. Inserite il terzo sottotitolo Definizione di termini e sotto questo create una lista di definizione con cinque termini e le relative definizioni.

  6. Se volete potete inserire altri tag di quelli che avete imparato sino ad ora.

  7. Salvate nuovamente il vostro documento.


Visualizzare il vostro documento

  1. Ritornate alla finestra del browser che state usando come spazio di lavoro.

  2. Scegliete Open File dal menu File del browser. Cercate il vostro file ed apritelo.

  3. Ora dovreste vedere il vostro documento all'interno della finestra spazio di lavoro.

Per vedere un esempio di come dovrebbe apparire il vostro documento guardate questo esempio.