In questa lezione vediamo come, attraverso speciali tag, sia possibile realizzare elenchi di testo numerati o puntati.
In questa lezione vediamo come, attraverso speciali tag, sia possibile realizzare elenchi di testo numerati o puntati.
Vediamo ora, in un breve esempio, la differenza tra un elenco puntato e uno numerato:
Elenco puntato:
• Primo testo
• Secondo testo
• Terzo testo
Elenco numerato:
1. Primo testo
2. Secondo testo
3. Terzo testo
Fatta questa premessa, vediamo come realizzare i nostri elenchi.
Gli elenchi vengono suddivisi in Elenchi ordinati e Elenchi non ordinati.
Gli elenchi ordinati sono contraddistinti da una lista numerata, quindi possiamo dire che gli elenchi numerati sono elenchi ordinati.
Al contrario, gli elenchi puntati sono definiti elenchi non ordinati.
Elenchi ordinati (Numerati):
per realizzare questa tipologia di elenchi viene utilizzato il tag ol (Order list) che indica appunto al browser che si tratta di un elenco ordinato in aggiunta il tag li (List item) che rappresenta il paragrafo della lista.
Ecco allora la sintassi di un elenco ordinato:
-
- Prima voce elenco
-
- Seconda voce elenco
-
- Terza voce elenco
In questo modo visualizzerete una lista numerata e ordinata secondo le vostre esigenze.
Elenchi non ordinati (Elenchi puntati):
a differenza del precedente, questo elenco non è contraddistinto da una numerazione definita e ordinata, ma solamente da un puntino di riferimento.
In questo caso al posto di olviene utilizzato ul(Unordered lis) sempre abbinato al tag li in quanto anche in questo caso, trattasi di una lista.
Ecco anche qui la sintassi per realizzare questo elenco:
-
- Prima voce elenco
-
- Seconda voce elenco
-
- Terza voce elenco
Notate il pallino di elenco.
Se vogliamo sostituire il classico pallino per determinare l’elenco, con un piccolo cerchietto, utilizzeremo l’attributo type unito alla tipologia del punto, che nel nostro caso diventa un cerchietto definito con circe.
Ecco allora il nostro elenco puntato con l’utilizzo di un cerchietto:
-
- Prima voce elenco
-
- Seconda voce elenco
-
- Terza voce elenco
se poi vogliamo come punteggiatura un quadratino, utilizziamo la definizione square:
-
- Prima voce elenco
-
- Seconda voce elenco
-
- Terza voce elenco
Gli elenchi vi saranno molto utili per definire liste e menu di navigazione.
Pubblicato in HTML & CSS
Commenta per primo