Liste e Organizzazione

Bentornato.

Nella lezione precedente hai imparato a lavorare con testo, titoli e paragrafi.

Ora ci serve ordine.

Perché a volte un paragrafo non basta.

A volte il contenuto vuole diventare una lista.

Spesa.

Passaggi di una ricetta.

Competenze.

Lezioni.

Compiti.

Cose che hai promesso di fare ma ora fingi di aver dimenticato.

HTML ci dà le liste per questo.

Molto civile.

Cosa Imparerai

In questa lezione imparerai:

• come funzionano le liste non ordinate;
• come funzionano le liste ordinate;
• come usare li;
• quando usare ul;
• quando usare ol;
• come creare liste annidate;
• come organizzare il contenuto in modo chiaro.

Perché le Liste Sono Importanti

Le liste rendono le informazioni più facili da leggere velocemente.

Confronta questo:

<p>Devo comprare pane, latte, mele, caffè, pasta, pomodori e formaggio.</p>

Con questo:

<ul>
  <li>Pane</li>
  <li>Latte</li>
  <li>Mele</li>
  <li>Caffè</li>
  <li>Pasta</li>
  <li>Pomodori</li>
  <li>Formaggio</li>
</ul>

La seconda versione è più leggibile.

Gli occhi non devono combattere il paragrafo.

Il cervello ringrazia.

In silenzio.

Ma sinceramente.

Liste Non Ordinate

Una lista non ordinata usa il tag ul.

Ogni elemento va dentro un tag li.

Esempio:

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

ul significa unordered list.

L’ordine non è importante.

Il browser di solito mostra dei punti elenco.

Usa le liste non ordinate per:

• competenze;
• spesa;
• caratteristiche;
• strumenti;
• raccolte generali.

Se l’ordine non è importante, usa ul.

Liste Ordinate

Una lista ordinata usa il tag ol.

Esempio:

<ol>
  <li>Crea un file HTML</li>
  <li>Scrivi la struttura del documento</li>
  <li>Aggiungi il contenuto</li>
  <li>Apri la pagina nel browser</li>
</ol>

ol significa ordered list.

L’ordine è importante.

Il browser di solito mostra numeri.

Usa le liste ordinate per:

• istruzioni;
• passaggi;
• classifiche;
• ricette;
• tutorial;
• processi.

Se cambiare l’ordine cambia il significato, usa ol.

L’Elemento li

Ogni elemento di una lista usa li.

Esempio:

<li>Questo è un elemento della lista.</li>

Non mettere testo libero direttamente dentro ul o ol.

Questo è sbagliato:

<ul>
  HTML
  CSS
  JavaScript
</ul>

Questo è corretto:

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

ul o ol è il contenitore.

li è l’elemento.

Come una scatola e le cose dentro la scatola.

Non lanciare patate in aria chiamandolo archivio.

Una Lista di Competenze

Crea una semplice sezione competenze:

<h2>Le Mie Competenze</h2>

<ul>
  <li>HTML</li>
  <li>Terminale Linux</li>
  <li>Problem solving</li>
  <li>Fare errori e imparare da essi</li>
</ul>

Perfetto per pagine personali.

Semplice.

Leggibile.

Non drammatico.

A meno che nella lista ci sia “debuggare CSS a mezzanotte”.

Allora diventa drammatico.

Una Lista Passo Dopo Passo

Per i passaggi, usa ol:

<h2>Come Creare una Pagina Web</h2>

<ol>
  <li>Crea una cartella per il progetto.</li>
  <li>Crea un file index.html.</li>
  <li>Aggiungi la struttura HTML.</li>
  <li>Scrivi il contenuto.</li>
  <li>Apri la pagina nel browser.</li>
</ol>

Il processo diventa chiaro.

Il lettore sa cosa fare prima, seconda, terza cosa e così via.

Molto utile.

Molto calmo.

Il contrario di “arrangiati”.

Liste Annidate

Una lista annidata è una lista dentro un’altra lista.

Esempio:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Database</li>
    </ul>
  </li>
</ul>

È utile quando il contenuto ha categorie.

Importante: la lista annidata deve stare dentro un li.

Non deve fluttuare a caso.

HTML ama l’ordine.

Non è una mensa per tag.

Struttura Corretta delle Liste Annidate

Corretto:

<ul>
  <li>Sviluppo Web
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Non ideale:

<ul>
  <li>Sviluppo Web</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

La seconda versione potrebbe comunque apparire nel browser.

Ma la struttura è sbagliata.

I browser perdonano.

I bravi sviluppatori non vivono di perdono.

Crea una Pagina di Pratica

Crea un nuovo file:

touch lists.html

Aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pratica Liste</title>
</head>
<body>
  <h1>Pratica Liste</h1>

  <h2>Cose che Voglio Imparare</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Accessibilità web</li>
  </ul>

  <h2>Come Studio</h2>
  <ol>
    <li>Apro la lezione.</li>
    <li>Leggo la spiegazione.</li>
    <li>Scrivo il codice da solo.</li>
    <li>Lo provo nel browser.</li>
    <li>Correggo gli errori senza panico.</li>
  </ol>

  <h2>Aree dello Sviluppo Web</h2>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Backend
      <ul>
        <li>Logica server</li>
        <li>Database</li>
        <li>API</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Aprilo nel browser.

Ora hai liste non ordinate, liste ordinate e liste annidate.

La pagina sta diventando organizzata.

Pericolosamente organizzata.

Errori Comuni

Usare paragrafi per le liste

Non è il massimo:

<p>HTML, CSS, JavaScript, Git, Linux</p>

Meglio:

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

Se è una raccolta di elementi, spesso una lista è meglio.

Usare ul per i passaggi

Non è ideale:

<ul>
  <li>Prima crea un file.</li>
  <li>Poi scrivi HTML.</li>
  <li>Infine aprilo nel browser.</li>
</ul>

Meglio:

<ol>
  <li>Crea un file.</li>
  <li>Scrivi HTML.</li>
  <li>Aprilo nel browser.</li>
</ol>

I passaggi hanno ordine.

Usa ol.

Dimenticare li

Sbagliato:

<ul>
  <p>HTML</p>
  <p>CSS</p>
</ul>

Corretto:

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

Dentro le liste, usa li.

Niente ribellione.

Pratica

Crea una pagina sulla tua routine quotidiana.

Deve includere:

• un h1;
• una lista non ordinata di cose che usi ogni giorno;
• una lista ordinata della tua routine mattutina;
• una lista annidata con categorie;
• almeno un paragrafo prima di una lista.

Categorie possibili:

• strumenti;
• abitudini;
• argomenti di studio;
• compiti di lavoro;
• sport;
• lingue.

Rendila reale.

Il contenuto finto è noioso.

Il contenuto reale ha macchie di caffè e personalità.

Mini Sfida

Crea un file:

course-plan.html

Costruisci una pagina che descrive il tuo piano di studio.

Deve includere:

• titolo principale;
• paragrafo introduttivo;
• lista non ordinata delle tecnologie che vuoi imparare;
• lista ordinata dei passaggi per studiare;
• lista annidata che raggruppa argomenti per categorie;
• breve paragrafo finale.

Niente CSS.

Niente JavaScript.

Solo struttura HTML.

Perché oggi organizziamo il contenuto.

Domani forse il contenuto inizierà a comportarsi bene.

Forse.

Riassunto

Oggi hai imparato che:

• ul crea liste non ordinate;
• ol crea liste ordinate;
• li crea elementi di lista;
• le liste non ordinate sono per raccolte dove l’ordine non conta;
• le liste ordinate sono per passaggi o sequenze dove l’ordine conta;
• le liste annidate sono utili per categorie;
• le liste annidate devono stare dentro li;
• le liste rendono il contenuto più facile da leggere e capire.

Le buone liste rendono le pagine più pulite.

Le cattive liste fanno sembrare la pagina come se qualcuno avesse rovesciato una cassetta degli attrezzi.

Usa le liste con saggezza.

Prossima Lezione

Nella prossima lezione impareremo link e navigazione.

Perché una pagina web da sola è carina.

Ma una pagina collegata ad altre pagine diventa un sito web.