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.
-
Questa
-
è
-
una
-
lista
-
non ordinata
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:
-
Questa
-
è
-
una
-
lista
-
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.
-
Ritornate all'Editor HTML.
-
Scegliete Close dal menu File per chiudere
INDEX.HTM
Per creare un nuovo documento:
-
Ritornate all'Editor HTML.
-
Scegliete New dal menu File. Avrete bisogno di riposizionare
la finestra.
-
Scegliete Save As dal menu File. Nominate il vostro
documento INTEREST.HTM e salvatelo nella cartella/directory
pdcourse.
-
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.
-
Dovrete creare i tre seguenti sottotitoli:
-
Inserite il primo sottotitolo I miei hobby e sotto questo create
una lista non ordinata con almeno cinque hobby.
-
Inserite il secondo sottotitolo I miei cinque programmi preferiti e
sotto questo create una lista ordinata con i vostri cinque programmi TV preferiti.
-
Inserite il terzo sottotitolo Definizione di termini e sotto
questo create una lista di definizione con cinque termini e le relative definizioni.
-
Se volete potete inserire altri tag di quelli che avete imparato sino ad ora.
-
Salvate nuovamente il vostro documento.
Visualizzare il vostro documento
-
Ritornate alla finestra del browser che state usando come
spazio di lavoro.
-
Scegliete Open File dal menu File del browser.
Cercate il vostro file ed apritelo.
-
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.