Imparare l’HTML – Elenchi e liste

In questo nuovo post sulla realizzazione di siti web con l’utilizzo del linguaggio HTML, vediamo come creare una lista o elenco puntato e numerato con l’uso di nuovi tag.

Se hai già letto la precedente guida su come creare tabelle in HTML, realizzare di elenchi sarà abbastanza simile.

Inutile spiegare l’utilità nel programmare liste HTML, è una funzione che può essere utilizzata in qualsiasi tipo di pagina web con un minimo di testo e per qualsiasi tipo di argomento. Inoltre servirà a fare pratica nella scrittura dell’HTML e nella realizzazione di siti web.

Procedura

Innanzitutto, creiamo un file di testo .html ed iniziamo a scrivere la struttura della nostra pagina. Ora nel body inseriamo i tag per la creazione di elenchi e liste.

Dobbiamo fare una distinzione tra due tipi di liste: ordinata e non ordinata, cioè lista numerata e lista puntata. Le due tipologie hanno attributi e proprietà differenti che ne cambiano l’estetica visualizzata.

N.B. Esistono anche altre tipologie di lista HTML, ma che non vedremo qui.
Lo scopo di questo articolo e spiegare a principianti la creazione di liste ed elenchi con il linguaggio l’HTML senza aggiungere troppe informazioni al momento non necessarie.
Per maggiori informazioni sull’argomento: w3school HTML Lists

Lista puntata o non ordinata

<ul>
  <li>Latte</li>
  <li>Biscotti</li>
  <li>Cacao</li>
</ul>

La classica “lista della spesa”.
Per questo tipo di elenco il tag principale è <ul> </ul> (Unordered List), ed al suo interno andranno inserite le singole voci che compongono la lista con l’utilizzo del tag <li>…</li>.

A schermo verrà visualizzata in questo modo:

• Latte
• Biscotti
• Cacao

CSS per liste puntate

Con l’utilizzo del CSS è possibile modificare l’estetica del marcatore o contrassegno di un elenco puntato, per procedere basterà inserire nell’attributo style=”” nel tag <ul>, e digitare la proprietà: list-style-type: come nell’esempio:

<ul style="list-style-type:square;">
  <li>Caffè</li>
  <li>Pomodori</li>
  <li>Pasta</li>
</ul>

I valori disponibili sono i seguenti:

Liste numerate o ordinate

<ol>
  <li>Primo step</li>
  <li>Secondo step</li>
  <li>Terzo step</li>
</ol>

Simile al precedente, l’elenco numerato indica una serie di eventi con un determinato ordine da rispettare, dal primo all’ultimo. Il tag principale di apertura e chiusura è <ol>…</ol> (Ordered List), e all’interno andranno digitate le voci della lista con il tag <li>…</li>.

A schermo sarà visibile in questo modo:

1. Primo step
2. Secondo step
3. Terzo step

Gli attributi per liste numerate

Anche qui sono disponibili delle proprietà per modificare l’estetica della lista, ma senza utilizzare il CSS, infatti gli attributi andranno inseriti direttamente all’interno del tag <ol …>come nell’esempio:

<ol type="1">
  <li>Primo</li>
  <li>Secondo</li>
  <li>Terzo</li>
</ol>

Gli attributi disponibili sono i seguenti:

Per questi tipi di liste non sono disponibili altri attributi, ma è sempre possibile utilizzare il CSS per modificare a proprio piacimento l’estetica del testo e degli oggetti.

Testa qui in basso il tuo codice HTML:

Crea Elenchi e Liste in HTML con il nostro Editor di Codice Online

Continua con: I meta tag HTML

Leggi anche: I tag HTML da conoscere o il Corso completo di HTML

Articoli Recenti

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle