HTML, Creazione degli elenchi

Spesso i documenti HTML devono contenere elenchi formattati, in aggiunta ai normali paragrafi di testo. HTML permette di creare diversi tipi di elenchi:

• Elenchi puntati: che in HTML si definiscono non ordinati;
• Elenchi numerati: definiti elenchi ordinati;
• Elenchi glossario
• Elenchi nidificati
• Elenchi a più colonne ed elenchi menù: ormai inutilizzati in quanto non supportati dalla maggiorparte dei browser.

HTML precede i comandi di formattazione per ognuno di questi tipi di elenchi.

Formattazione degli elenchi puntati

Gli elenchi puntati evidenziano ciascun elemento premettendo al testo un pallino o altri segni distintivi. In HTML è possibile creare questo tipo di elenchi usando il tag <UL>, che identifica la lista non ordinata, insieme al tag <LI>, che identifica l’elemento. Quest’ultimo tag è utilizzato in tutti i tipi di elenchi HTML. Ecco un frammento HTML che contiene un elenco puntato, presente anche sotto nel video illustrativo:

<UL><LI>Primo elemento puntato</LI>
<LI>Secondo elemento puntato</LI>
<LI>Terzo elemento puntato</LI></UL>

Gli elenchi puntati vengono indentati, cioè ogni paragrafo comincia con un pallino e ogni riga del paragrafo viene rientrata rispetto al margine sinistro, anzichè partire dall’inizio dela prima colonna. Inoltre è possibile usare i codici di paragrafo <P> e </P> per creare elenchi puntati multiparagrafo.

Formattazione degli elenchi numerati

In HTML è possibile creare elenchi numerati con l’uso del tag <OL> ed il browser numera automaticamente gli elementi dell’elenco, quindi non è necessario numerare a priori gli elementi. Questi vengono automaticamente rinumerati se il documento viene modificato o vengono aggiunti o eliminati elementi. Ecco un esempio di frammento HTML presente anche nel video illustrativo sotto:

<OL><LI>Primo elemento numerato</LI>
<LI>Secondo elemento numerato</LI>
<LI>Terzo elemento numerato</LI></OL>

Liste glossario

Un elenco glossario permette di includere una descrizione per ciascun oggetto elencato. Il tag HTML <DL> denota tale lista, ma occorrono gli altri tag <DD> e <DT> per formattare l’elenco glossario. Segue un frammento di codice HTML rappresentante una lista glossario che verrà illustrata meglio nel video tutorial sotto:

<DL><DT>|Omnia Blog|</DT>
<DD>E’ un blog basato sulla piattaforma WordPress</DD>

Elenchi nidificati

Un elenco nidificato consiste in una lista i cui elementi possono contenere a loro volta elenchi. E’ possibile creare elenchi nidificati di vario tipo. Il seguente frammento (presente anche nel video tutorial) mostra un elenco puntato a due livelli:

<UL><LI>Elemento di lista numero 1</LI>
<LI>Elemento di lista numero 2</LI>
<UL><LI>Sotto elemento A dell’elemento numero 2</LI></UL>
<Elemento di lista numero 3</LI></UL>

Mentre questo frammento mostra una lista nidificata che utilizza sia i tag di elenco ordinato chi i tag di elenco non ordinato:

<OL><LI>Sport</LI>
<UL><LI>Calcio</LI>
<LI>Tennis</LI></UL></OL>

Elenchi a più colonne ed elenchi Menù

Questo tipo di elenchi non sono più supportati dai browser e venivano creati tramite l’uso dei tag <DIR> per gli elenchi a più colonne e <MENU> per gli elenchi menù. Essi sono stati rimpiazzati dai tag <UL> e <OL> in quanto l’unico browser che li supportava era MidasWWW, un browser UNIX poco usato.

Ecco il video tutorial che illustrerà quanto detto fino ad ora. Per scaricarlo e vederlo in una risoluzione migliore cliccate qui.