HTML - Elenco Non Ordinato

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo degli elenchi non ordinati in HTML. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi in questo viaggio. Credetemi, alla fine di questo tutorial, sarete in grado di creare elenchi come un professionista!

HTML - Unordered Lists

Cos'è un Elenco Non Ordinato?

Prima di immergerci nel codice, capiremo cos'è un elenco non ordinato. In HTML, un elenco non ordinato è una raccolta di elementi correlati che non hanno un ordine particolare. Pensate a una lista della spesa - non è necessario acquistare il pane prima del latte, o le mele prima delle banane. L'ordine non ha importanza, ma sono tutti parte della stessa lista.

In HTML, creiamo elenchi non ordinati utilizzando il tag <ul>, e ciascun elemento della lista è racchiuso tra i tag <li>. Vediamo un esempio semplice:

<ul>
<li>Mela</li>
<li>Banana</li>
<li>Arancia</li>
</ul>

Questo codice verrà visualizzato come:

Mela
Banana
Arancia

Vedete quanto è semplice? Il browser aggiunge automaticamente i pallini a ciascun elemento. Ma cosa succede se vuoi cambiare quei pallini? Beh, è qui che entra in gioco la nostra prossima sezione!

Elenco Non Ordinato HTML - Scegliere il Segno di Elenco

Ora, aggiungiamo un po' di pepe. HTML ci permette di cambiare lo stile dei nostri pallini, o come li chiamiamo nel gergo, "segni di elenco". Abbiamo tre opzioni principali:

disco (predefinito)
cerchio
quadrato

Per cambiare il segno, utilizziamo l'attributo type nel tag <ul>. Vediamo come funziona:

<ul type="disc">
<li Questa lista utilizza il segno di disco predefinito</li>
</ul>

<ul type="circle">
<li Questa lista utilizza un segno di cerchio</li>
</ul>

<ul type="square">
<li Questa lista utilizza un segno di quadrato</li>
</ul>

Questo codice verrà visualizzato come:

• Questa lista utilizza il segno di disco predefinito

○ Questa lista utilizza un segno di cerchio

■ Questa lista utilizza un segno di quadrato

Bello, vero? È come dare alla tua lista un mini-makeover!

Esempi di Elenco Non Ordinato

Ora che abbiamo le basi, esaminiamo alcuni esempi più complessi. Ricorda, la pratica fa perfezione, quindi sentiti libero di copiare questi esempi e provarli da solo!

Elenco Non Ordinato Annidato

A volte, potresti voler creare una lista dentro un'altra lista. Chiamiamo questo elenco annidato. Ecco come farlo:

<ul>
<li>Caffè</li>
<li>Tè
<ul>
<li>Tè nero</li>
<li>Tè verde</li>
<li>Tè alla erbe</li>
</ul>
</li>
<li>Latte</li>
</ul>

Questo verrà visualizzato come:

Caffè
Tè
Tè nero
Tè verde
Tè alla erbe
Latte

Notate come l'elenco annidato è rientrato? È il modo di HTML per mostrare che questi elementi sono sottocategorie di "Tè".

Elenco Non Ordinato con Link

Le liste non sono solo per testi semplici. Puoi includere altri elementi HTML dentro i tuoi elementi della lista. Ad esempio, creiamo una lista di siti web preferiti:

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Questo creerà una lista di siti web cliccabili:

Elenco Non Ordinato con Immagini

Andiamo ancora più in là e aggiungiamo alcune immagini alla nostra lista:

<ul>
<li><img src="apple.jpg" alt="Mela"> Mela</li>
<li><img src="banana.jpg" alt="Banana"> Banana</li>
<li><img src="orange.jpg" alt="Arancia"> Arancia</li>
</ul>

Questo codice visualizzerà una lista con piccole immagini accanto al nome di ogni frutto. È un ottimo modo per rendere le tue liste più visivamente accattivanti!

Riepilogo dei Metodi per l'Elenco Non Ordinato

Ecco una tabella utile che riepiloga i metodi che abbiamo imparato per creare e personalizzare elenchi non ordinati:

Metodo	Sintassi	Descrizione
Elenco Non Ordinato di Base	`<ul><li>Elemento</li></ul>`	Crea un elenco non ordinato di base
Cambia Segno di Elenco	`<ul type="circle">`	Cambia lo stile del segno di elenco
Elenco Annidato	`<ul><li><ul><li>Elemento Annidato</li></ul></li></ul>`	Crea un elenco dentro un elenco
Elenco con Link	`<ul><li><a href="url">Link</a></li></ul>`	Crea un elenco di link cliccabili
Elenco con Immagini	`<ul><li><img src="image.jpg"> Elemento</li></ul>`	Aggiunge immagini agli elementi della lista

Ecco fatto, gente! Ora sei ben equipaggiato per creare e personalizzare elenchi non ordinati in HTML. Ricorda, la chiave per padroneggiare queste abilità è la pratica. Quindi vai avanti, esperimenta con questi esempi, e non aver paura di essere creativo!

Mentre chiudiamo, mi viene in mente una piccola battuta di programmazione: Perché lo sviluppatore ha lasciato il suo lavoro? Perché non aveva array! ? Non preoccuparti, parleremo degli array un altro giorno. Per ora, continua a elencare e a programmare!

Credits: Image by storyset

Tutorial precedente:

HTML - Elenco

Prossimo tutorial:

HTML - Liste ordinate