Applied Information Technology - IV. Sviluppo di pagine web: Basic HTML.

[Precedente] [Indice] [Successiva]

2.2) Ordinare i dati

La ragione principale per la quale vengono create le pagine web è quella di mettere a disposizione di tutti gli utenti del WWW delle informazioni uniche.
Le liste sono un modo per organizzare le informazioni e migliorarne l'accessibilità.

Esistono cinque tipi diversi di liste:
  1. liste ordinate
  2. liste non ordinate
  3. liste di definizioni
  4. liste di menu
  5. liste di directory
le ultime due sono generate da tag che sono stati definiti deprecated e quindi non saranno analizzate.

Liste nella specifica di HTML 4 del W3C

<LI>Elemento di una lista</LI>

Descrizione: identifica un elemento di una lista qualsiasi.
Tipo: tag contenitore.
Attributi: CLASS, DIR, ID LANG, STYLE, TITLE, TYPE e VALUE.
Note: gli attributi TYPE e VALUE sono deprecated.

2.2.1) <OL>Liste ordinate</OL>

Descrizione: identifica un elenco numerato di elementi.
Tipo: tag contenitore.
Attributi: CLASS, COMPACT, ID LANG, START, STYLE, TYPE e VALUE.
Note: gli attributi COMPACT, START, TYPE e VALUE sono deprecated.

Esempio:

<OL>
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>

Attributi:
<OL TYPE="a">
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
<OL TYPE="A">
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
<OL TYPE="i">
<LI TYPE="I">primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
<OL STYLE="list-style-type: lower-alpha">
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
<OL STYLE="list-style-type: upper-alpha">
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
<OL STYLE="list-style-type: lower-roman">
<LI STYLE="list-style-type: upper-roman">primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
</OL>
  1. primo elemento
  2. secondo elemento
  3. terzo elemento
Osservazioni:

2.2.2) <UL>Liste non ordinate</UL>

Descrizione: identifica un elenco di elementi senza un particolare ordine.
Tipo: tag contenitore.
Attributi: CLASS, COMPACT, ID LANG, STYLE, TITLE e TYPE.
Note: gli attributi COMPACT e TYPE sono deprecated.

Esempi:
<UL>
<LI TYPE="circle">elemento</LI>
<LI STYLE="list-style-type: disc">elemento</LI>
<LI TYPE="square">elemento</LI>
</UL>
  • elemento
  • elemento
  • elemento

Liste annidate:

<UL STYLE="list-style-type: square">
<LI>elemento</LI>
<LI>elemento
<OL>
<LI>primo</LI>
<LI>secondo</LI>
<LI>terzo</LI>
</OL>
</LI>
<LI>elemento</LI>
</UL>
  • elemento
  • elemento
    1. primo
    2. secondo
    3. terzo
  • elemento

2.2.3) <DL>Liste di definizioni</DL>

Descrizione: identifica i termini e le relative definizioni nella forma di un glossario.
Tipo: tag contenitore.
Attributi: CLASS, DIR, ID LANG, STYLE e TITLE.

Ogni elemento della lista di definizioni è composto da due parti differenti: il termine e la definizione. Ciascuna di queste parti ha un tag che la identifica.

2.2.3.1) <DT>Termine da definire</DT>

Descrizione: identifica il termine da definire.
Tipo: tag contenitore.
Attributi: CLASS, DIR, ID LANG, STYLE e TITLE.

2.2.3.2) <DD>Definizione del termine</DD>

Descrizione: identifica una definizione in una lista di definizioni.
Tipo: tag contenitore.
Attributi: CLASS, DIR, ID LANG, STYLE e TITLE.

Esempio:

Questo codice:

<DL>
<DT>FTP</DT>
<DD>File Transfer Protocol</DD>
<DT>HTTP</DT>
<DD>Hyper Text Transfer Protocol</DD>
<DT>POP3</DT>
<DD>Post Office Protocol versione 3</DD>
</DL>

Genera la lista di definizioni:
FTP
File Transfer Protocol
HTTP
Hyper Text Transfer Protocol
POP3
Post Office Protocol versione 3

Esercizi:

1) Create una lista ordinata con TYPE che abbia come numerazioni I,B,iii,d e come elementi gli attributi. Ripetete l'esercizio con STYLE.

2) Create una lista di definizioni per spiegare il significato di DNS, URL e indirizzo IP

[Precedente] [Indice] [Successiva]

Per informazioni apweb@inwind.it - Ultima modifica 04-Jun-2002

Valid HTML 4.01!