html elenchi e liste

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:

Valore
Descrizione
discImposta il puntino come marcatore della lista
circleImposta il cerchio come marcatore della lista
squareImposta il quadrato come marcatore della lista
noneRimuove il marcatore della lista puntata

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:

ValoriDescrizione
type=”1″Di default, i marcatori assegnati saranno numeri in ordine crescente
type=”A”Verranno assegnati come marcatori lettere alfabetiche maiuscole
type=”a”Verranno assegnati come marcatori lettere alfabetiche minuscole
type=”I” Verranno assegnati come marcatori numeri romani
type=”i” Verranno assegnati come marcatori numeri romani in minuscolo

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.

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

Condividi ora!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA