La Lista Non Ordinata

Una lista non ordinata permette di rappresentare un insieme di elementi per i quali la posizione non indica una sequenza, una priorità o una classifica.

Il browser visualizza normalmente ogni elemento preceduto da un marcatore grafico, chiamato comunemente punto elenco o bullet.

Per esempio, un elenco di tecnologie web può essere rappresentato nel seguente modo:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

Una lista non ordinata viene costruita principalmente mediante due elementi HTML: <ul> e <li>.

La struttura fondamentale è:

<ul>
    <li>Primo elemento</li>
    <li>Secondo elemento</li>
    <li>Terzo elemento</li>
</ul>

Il tag <ul> contiene l’intera lista, mentre ogni voce viene racchiusa in un elemento <li>.

<!-- Struttura errata -->
<ul>
    HTML
    CSS
    JavaScript
</ul>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Gli elementi ul e ol rappresentano entrambi liste, ma comunicano un significato differente.

Consideriamo due esempi.

Elenco di linguaggi:

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
</ul>

Cambiare l’ordine degli elementi non modifica necessariamente il significato dell’elenco.

Procedura di installazione:

<ol>
    <li>Scaricare il programma</li>
    <li>Avviare il programma di installazione</li>
    <li>Completare la configurazione</li>
</ol>

In questo caso l’ordine delle operazioni è importante, quindi è appropriata una lista ordinata.

Gli elementi di una lista non ordinata vengono normalmente visualizzati dal browser con un marcatore.

<ul>
    <li>Monitor</li>
    <li>Tastiera</li>
    <li>Mouse</li>
</ul>

Il punto elenco visualizzato non fa parte del testo inserito nel tag li: viene generato dal browser come parte della presentazione della lista.

La proprietà CSS list-style-type permette di modificare il tipo di marcatore utilizzato da una lista.

Esempio con marcatore quadrato:

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Esempio con marcatore circolare:

<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Una lista non ordinata può contenere un’altra lista. Questa struttura permette di rappresentare informazioni organizzate su più livelli.

La lista interna deve essere inserita all’interno dell’elemento li a cui appartiene.

<ul>

    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </li>

</ul>

Quando si costruiscono liste annidate è importante rispettare la relazione tra la voce principale e la relativa sottolista.

<ul>

    <li>Frontend</li>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
    </ul>

    <li>Backend</li>

</ul>

<ul>

    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>

    <li>Backend</li>

</ul>

Le liste ordinate e non ordinate possono essere combinate quando i diversi livelli di informazione hanno significati differenti.

Per esempio, una lista non ordinata può rappresentare alcune tecnologie, mentre una sottolista ordinata può indicare una sequenza di operazioni relativa a una specifica tecnologia.

<ul>

    <li>HTML
        <ol>
            <li>Creare il file index.html</li>
            <li>Inserire la struttura HTML</li>
            <li>Aggiungere i contenuti</li>
        </ol>
    </li>

    <li>CSS</li>
    <li>JavaScript</li>

</ul>

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tecnologie web</title>
</head>

<body>

    <h1>Tecnologie web</h1>

</body>

</html>

<h2>Tecnologie principali</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

<ul>

    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Java</li>
        </ul>
    </li>

</ul>

<style>
    ul {
        list-style-type: square;
    }
</style>

<ul class="principale">
    <li>Frontend</li>
    <li>Backend</li>
</ul>

<style>
    .principale {
        list-style-type: square;
    }
</style>

Realizzare una pagina denominata computer.html che descriva i principali componenti hardware e software di un computer.

La pagina deve contenere:

• un titolo principale;
• una lista non ordinata con le categorie Hardware e Software;
• una sottolista Hardware con almeno quattro componenti;
• una sottolista Software con almeno quattro elementi;
• una lista con marcatore square;
• almeno una classe CSS utilizzata per personalizzare una lista.

<ul>

    <li>Hardware
        <ul>
            <li>CPU</li>
            <li>RAM</li>
            <li>SSD</li>
            <li>Scheda madre</li>
        </ul>
    </li>

    <li>Software
        <ul>
            <li>Sistema operativo</li>
            <li>Browser</li>
            <li>Editor di testo</li>
            <li>IDE</li>
        </ul>
    </li>

</ul>