Elenchi numerati

Gli elenchi numerati (<ol> = Ordered List) hanno la seguente struttura:


    <ol>
    <li>riga d'elenco</li>
    <li>riga d'elenco</li>
    </ol>

    Ecco un esempio di codice:

    <body bgcolor="#ffffff">
    <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
    nibh. Vestibulum gravida elementum neque;</li>
    <li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
    </ol>
    </body>

    L’elemento <ol> può assumere i seguenti attributi:
    • start permette di definire il numero iniziale della sequenza. Può assumere come valore un numero intero, una lettera o un numero romano a seconda del type selezionato. E’ molto comodo da utilizzare soprattutto in casi di impaginazioni complesse, quando è necessario spezzare gli elenchi per favorire la visualizzazione;
    • type permette di definire il tipo di elenco e può assumere i se seguenti valori:
    • A elenco con lettere latine maiuscole (A,B,C…);
    • a elenco con lettere latine minuscole (a,b,c…);
    • I elenco con lettere romane maiuscole (I,II,III,IV …);
    • i elenco con lettere romane minuscole(i,ii,iii,iv …);
    • 1 (default) elenco numerato (1,2,3 …).
    L’attributo type, con gli stessi valori appena illustrati, può essere inserito anche nel tag <li> e fa si che solo per quella linea di elenco la numerazione sia modificata: la tipologia viene influenza dal valore dell’attributo, mentre il numero o la lettera rimangono quelli corretti nel flusso dell’elenco. Quindi, se si inserisce <li type=”i”> nella seconda riga di un elenco numerato standard, solo quella riga assumerà come numerazione “ii” . Con questo codice è possibile vedere l’effetto dei vari attributi sugli elenchi numerati:


      <body bgcolor="#ffffff">
      <h1>Elenco standard</h1>
      <ol>
      <li>Lorem ipsum;</li>
      <li>Integer at velit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      <h1>Elenco con numerazione forzata</h1>
      <ol start="5">
      <li>Lorem ipsum;</li>
      <Integer at valit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      <h1>Elenco con lettere maiuscole</h1>
      <ol type="A">
      <li>Lorem ipsum;</li>
      <li>Integer at velit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      <h1>Elenco con lettere minuscole</h1>
      <ol type="a">
      <li>Lorem ipsum;</li>
      <li>Integer at velit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      <h1>Elenco con numeri romani maiscololi</h1>
      <ol type="I">
      <li>Lorem ipsum;</li>
      <li>Integer at velit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      <h1>Elenco con numeri romani minuscoli</h1>
      <ol type="i">
      <li>Lorem ipsum;</li>
      <li>Integer at velit;</li>
      <li>nulla molestie rutrum urna.</li>
      </ol>
      </body>

      Gli elenchi puntati (ul = Unordered List) vengono definiti in HTML con la seguente struttura:


      <ul>
      <li>Riga d'elenco</li>
      <li>Riga d'elenco</li>
      </ul>

      Ecco un esempio di codice:

      <body bgcolor="#ffffff">
      <h1>Elenco puntato</h1>
      <ul>
      <li>Lorem dolor sit amet, consectetuer adipiscing
      elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
      nibh. Vestibulum gravida elementum neque;</li>
      <li>pretium ut, placerat sed, nibh. Vestibulum gravida
      elementum neque;</li>
      &ltli>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
      </ul>
      </body>

      Il tag <ul>può assumere il solo attributo type , che offre la possibilità di modificare il tipo di punto elenco visualizzato. L’attributo type , in questo caso, può assumere i seguenti valori:
      • circle pallino pieno (default);
      • disc cerchio vuoto;
      • square quadratino;
      E’ interessante notare che Internet Explorer visualizza il quadratino pieno in ambiente Windows e vuoto in ambiente Macintosh. Anche per gli elenchi puntati, l’attributo type può essere inserito nel tag <li> , modificando il tipo di punto elenco per quell’unica riga. Con questo codice è possibile vedere l’effetto dell’attributo type sugli elenchi puntati:


      <body bgcolor="#ffffff">
      <h1>Elenco puntato (circle)</h1>
      <ul type="circle">
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing,
      elite. Ut orcierat, viverra ac, pretium ut, placerat sed,
      nibh. Vestibulum gravida elementum naque;</li>
      <li>pretium ut, placerat sed,nibh. Vestibulum gravida
      elementum neque;</li>
      <li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
      </ul>
      <h1>Elenco puntato (square)</h1>
      <ul type="square">
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Ut orci erat, viverra ac, pretium utl,placerat sed,
      nibh. Vestibulum gravida elementum neque;</li>
      <li>pretium ut, placerat sed, nibh. Vestibulum gravida
      elementum neque;</li>
      <li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
      </ul>
      </body>

      Un pensiero su “Elenchi numerati

      1. Il tuo post mi è stato molto utile, grazie mille!

      Lascia un commento

      Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

      Logo WordPress.com

      Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

      Foto Twitter

      Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

      Foto di Facebook

      Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

      Google+ photo

      Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

      Connessione a %s...