come fare elenco in html

Pubblicato da progettandopc il

Elenco puntato in html

Per inserire un elenco puntato in html utilizziamo il tag <ul> pertanto avremo il seguente codice:

<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento 3</li>
</ul>

ed il risultato sarà:

Annidare elenco puntato

Per annidare più elementi in un elenco puntato utilizziamo il seguente codice:

<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento 3</li>
	<ul>
		<li>elemento 1</li>
		<li>elemento 2</li>
		<li>elemento 3</li>
			<ul>
				<li>elemento 1</li>
				<li>elemento 2</li>
				<li>elemento 3</li>
			</ul>
		<li>elemento 1</li>
		<li>elemento 2</li>
		<li>elemento 3</li>	
	</ul>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ul>

ed il risultato è:

Elenco numerato in html

Per inserire un elenco numerato in html utilizziamo il tag <ol> pertanto avremo il seguente codice:

<ol>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>

ed il risultato risulta essere:

Cambiare il tipo di elenco numerato

Per cambiare il tipo di elenco numerato utilizziamo l’attributo type.

L’attributo type può assumere i seguenti valori:

Valore di typesignificato
type="1"numeri arabi (default)
type="i"numeri romani minuscoli
type="I"numeri romani maiuscoli
type="a"lettere alfabeto minuscole
type="A"lettere alfabeto maiuscole

Per cambiare il tipo di elenco con i CSS utilizziamo invece il seguente codice:

ol
{
list-style-type: valore;
}

dove al posto di valore andremo ad inserire uno dei seguenti valori:

ValoreUtilizzo
decimalUtilizzato per i conteggi decimali
decimal-leading-zeroConteggio decimale in cui la prima cifra è preceduta da zero
lower-romanNumeri romani in minuscolo
upper-romanNumeri romani in maiuscolo
lower-alphaLettere ASCII in minuscolo
upper-alphaLettere ASCII in maiuscolo
lower-greekLettere (in minuscolo) del greco antico

Qui di seguito viene riportato un esempio per ogni valore che type può assumere:

<ol type="1">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>
<ol type="i">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>
<ol type=I>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>
<ol type="a">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>
<ol type="A">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>

E rispettivamente al codice sopra indicato si avrà il seguente risultato finale:

Elenco numerato che parte da un numero

Per fare partire la numerazione da un numero utilizziamo l’attributo start applicato al tag <ol>. Ora trasformiamo quanto detto in codice html:

<ol start="10">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 2</li>
</ol>

ed il risultato visivo sarà:

È possibile svolgere questa operazione anche con un elenco con lettere.

Vediamo un esempio:

<ol type="a" start="5">
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
</ol>

In questo esempio utilizziamo un elenco con lettere che parte dalla lettera “e” ovvero la quinta lettere dell’alfabeto dato che ho impostato start con valore 5.

Il risultato finale sarà:

Modificare la numerazione da un punto dell’elenco

Per modificare la numerazione da uno specifico punto dell’elenco utilizziamo l’attributo value applicato al tag <li>. Questo attributo funziona solo con <ol>.

Ora creiamo il codice html:

<ol>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
	<li value="12">elemento 4</li>
	<li>elemento 5</li>
	<li>elemento 6</li>
	<li>elemento 7</li>
	<li>elemento 8</li>
</ol>

Il risultato è il seguente:

Come è possibile notare, anche la numerazione degli elementi successivi viene modificata.

Modificare la numerazione di un singolo elemento dell’elenco

Come abbiamo visto precedentemente l’attributo value influenza anche la numerazione degli elementi successivi. Utilizzando due attributi value è possibile alterare la numerazione di un solo elemento. Qui di seguito viene riportato un esempio:

<ol>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
	<li value="12">elemento 4</li>
	<li value="5">elemento 5</li>
	<li>elemento 6</li>
	<li>elemento 7</li>
	<li>elemento 8</li>
</ol>

In questo esempio ho modificato la numerazione soltanto dell’elemento quattro. Tutti gli altri elementi avranno la numerazione classica.

Risultato finale:

Modificare l’aspetto grafico della lista con i CSS (valido per <ul>)

Possiamo determinare l’aspetto grafico dell’elenco utilizzando il seguente codice:

ul
{
list-style-type: valore;
}

dove al posto di valore andremo ad inserire uno dei seguenti valori:

ValoreUtilizzo
discCerchio pieno colorato. È possibile modificare i colori con la proprietà color.
circleCerchio vuoto
squareAl posto di un cerchio appare un quadrato