html






Elenchi

Spesso su una pagina web si ha la necessità di descrivere voci o altro sottoforma di elenchi, html offre questa possibilità con il tag <LI> (voce dell'elenco) che in abbinamento con uno degli altri tags permette di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

<LI>

Elemento voce dell'elenco, da solo serve a poco, deve essere combinato con altri elementi descritti sotto.

<DIR>...</DIR>

L'elemento <DIR> può essere utilizzato per un elenco di voci disposte su colonne, per default la larghezza è di 24 caratteri, al suo interno si adopera <LI> come voce dell'elenco.

<DIR>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</DIR>
Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ



  •  

    <DL>...</DL>

    L'elemento <DL> accetta al suo interno gli elementi <DT> e <DD> come voci dell'elenco. L'elemento <DT> riserva un terzo dello schermo per la voce descritta, mentre il restante è assegnato all'elemento <DD> che porta la descrizione una riga sotto.

    <DL>
    <DT>WebLink<DD>Tutto per la tua home page
    <DT>CSS       <DD>Cascading Style Sheets
    <DT>META   <DD>Comandi Speciali
    <DT>FAQ     <DD>Le domande frequenti
    </DL>
    Questo il risultato:
    Web-Link
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti
     

    E' possibile ridurre lo spazio fra le righe nel caso in cui l'elenco fosse molto lungo, per fare questo si adopera l'attributo COMPACT nel tag <DL>

    <DL COMPACT>
    Questo il risultato:
    WebLink
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti



     

    <MENU>...</MENU>

    L'elemento <MENU> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione compatta di un elenco puntato. Personalmente non vedo molte differenze con l'elemento <DIR>

    <MENU>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </MENU>
    Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ



  •  

    <OL>...</OL>

    L'elemento <OL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato.

    <OL>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ
     

    Anche <OL> accetta l'attributo COMPACT per una visualizzazione più compatta. Per default la numerazione segue 1, 2 , 3, e così via ma grazie all'attributo TYPE si possono cambiare le voci dell'elenco in uno dei seguenti modi:
    TYPE=A Lettere maiuscole, ad esempio : A , B, C, ...
    TYPE=a Lettere minuscole, ad esempio : a, b, c, ...
    TYPE=I Numerazione romana maiuscola, ad esempio: I, II, III, ...
    TYPE=i Numerazione romana minuscola, ad esempio: i, ii, iii, ...
    TYPE=l I numeri come da default: 1, 2, 3, ...

    <OL TYPE="a">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ
     

    Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo START impostando il numero da cui iniziare l'incremento.

    <OL START="3">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ

    Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3":

    <OL TYPE="a" START="3">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ



     

    <UL>...</UL>

    L'elemento <UL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.

    <UL>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ
     

    Anche <UL> accetta l'attributo COMPACT per una visualizzazione più compatta. A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo nell'attributo TYPE:
    TYPE=disc disco solido
    TYPE=circle cerchietto
    TYPE=square quadrato

    <UL TYPE="circle">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ

    Nel caso in cui ci fosse la necessità di cambiare segno, si potrà farlo con l'attributo TYPE anche dall'interno dei vari TAGS <UL>.

    <UL TYPE="square">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ

     
    Autore del testo: Andrea Bianchi
    Sito Web:
    www.Web-Link.it