Elemento HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m →Inline: già citato sotto |
m →Elenchi: aggiungo esempi per i non ordinati |
||
Riga 133:
==== Esempi di elenchi ====
===== Elenchi ordinati =====
Per creare un elenco ordinato in HTML si usa un elemento '''<code>ol</code>''' contenente un elemento '''<code>li</code>''', per ognuna delle voci dell'elenco stesso. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
Riga 141:
<pre>
<ol>
<li>Giovanni
<li>Luca
<li>Marco
<li>Giacomo
</ol>
</pre>
|
<ol>
<li>
<li>
<li>
<li>
</ol>
|-
Riga 167:
|
<pre>
<ol type="1">
<li>
<li>
<li>
<li>Carlo </li>▼
</ol>
</pre>
|
<ol type="a">
<li>
<li>
<li>
</ol>
|
<ol type="A">
<li>
<li>
<li>
</ol>
|
<ol type="i">
<li>
<li>
<li>
</ol>
|
<ol type="I">
<li>
<li>
<li>
</ol>
|-
Riga 204 ⟶ 203:
!Codice HTML, con <code>start</code> predefinito (1)
!Inizio a 8
!Inizio a
|-
|
<pre>
<ol type="a" start="1">
<li>
<li>
<li>
</ol>
</pre>
|
<ol type="a" start="8">
<li>
<li>
<li>
</ol>
|
<ol type="a" start="26">
<li>
<li>
<li>
</ol>
|-
|}
===== Elenchi non ordinati =====
Gli elenchi non ordinati (definiti anche puntati) vanno creati con un elemento <code>ul</code> che conterrà, come per gli elenchi ordinati, un elemento <code>li</code>. L'elenco non ordinato definisce di default lo stile di un elenco puntato con cerchi pieni. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
|-
|
<pre>
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
</pre>
|
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
|-
|}
L'attributo <code>type</code> di <code>ul</code> può far assumere tre stili diversi ai puntatori dei singoli elementi: con il valore <code>disc</code> verrà creata una lista puntata con cerchi pieni come quella predefinita, col valore <code>circle</code> i cerchi saranno di stessa dimensione ma vuoti, e infine con <code>square</code> verrà creato un elenco puntato a piccoli quadrati pieni. Non avendo nessun tipo di ordine di interpretazione, non è previsto l'attributo <code>start</code>.
{| border="0" cellpadding="5" width="90%"|
!Codice con <code>type</code> predefinito (disc)
!Cerchio vuoto (circle)
!Quadrato pieno (square)
|-
|
<pre>
<ul type="disc">
<li>Luca</li>
<li>Marco</li>
</ul>
</pre>
|
<ul type="circle">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
|
<ul type="square">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
|-
|}
| |||