HTML primi passi - lezione 3 - tag di elenco ul, ol. Attributi dei tag HTML.
Molto spesso nei siti web si utilizzano liste: nei menu, nei testi per elencare qualcosa. Iniziamo dal tipo di lista più popolare — la lista non numerata <UL></UL> (unordered list - lista non ordinata).
Lista UL
La lista UL viene utilizzata per i menu e per le liste puntate, e in HTML è possibile definire anche l’aspetto del marcatore.
Modifichiamo il nostro codice HTML:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul>
</ul>
</body>
</html>
Nel documento verrà mostrato solo il titolo, perché la nostra lista è vuota. Aggiungiamo quindi degli elementi alla lista. Per gli elementi useremo i tag <LI></LI> (list item - elemento della lista).
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Ora verrà mostrata una lista puntata. Il tipo di marcatore può essere modificato tramite gli attributi del tag <UL>.
Attributi dei tag HTML
Il tag UL, come accennato sopra, possiede attributi. Tutti i tag HTML hanno attributi; più avanti vedremo tutti gli attributi, ma per ora definiamo cos’è un attributo. Un attributo consente di controllare l’aspetto del tag HTML: colori, dimensioni, forma, ecc. Per il tag UL possiamo definire il tipo di marcatore: cerchio pieno, cerchio vuoto, quadrato.
Gli attributi hanno il seguente formato:
<tag attributo="valore dell’attributo">
In questo modo, scriviamo direttamente nel tag come deve essere visualizzato. Per il tag UL l’attributo si chiama type:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul type="square">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Se aggiorni la pagina nel browser, vedrai che la lista ora è contrassegnata da quadrati (square - quadrato). Possiamo anche utilizzare cerchi vuoti come marcatori:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul type="circle">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Puoi utilizzare marcatori diversi nella stessa lista, ma in tal caso devi aggiungere l’attributo type anche ai tag <li>:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul type="circle">
<li>Primo elemento</li>
<li type="square">Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Per impostazione predefinita, i tag UL e LI utilizzano il tipo di cerchio pieno disc:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul type="disc">
<li>Primo elemento</li>
<li type="square">Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Ora rimuoviamo l’attributo type dal tag UL e vediamo cosa succede.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul>
<li>Primo elemento</li>
<li type="square">Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
</body>
</html>
Ora creiamo tre elementi con marcatori diversi:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ul>
<li type="disc">Primo elemento</li>
<li type="square">Secondo elemento</li>
<li type="circle">Terzo elemento</li>
</ul>
</body>
</html>
Penso che ora tu sappia dove scrivere gli attributi dei tag; più avanti analizzeremo molti altri tipi di attributi.
Liste OL
Il tag OL (ordered list - lista ordinata) non è così comune come UL, ma viene comunque utilizzato spesso, ad esempio quando si deve mostrare una sequenza di azioni, una cronologia di eventi, una numerazione di oggetti, ecc. Ovunque sia necessario numerare le righe, si può usare il tag OL.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
</body>
</html>
Come per il tag UL, anche OL ha l’attributo type, ma i valori per questo attributo sono diversi:
- type="A" - lettere maiuscole latine (la lettera maiuscola A inglese “ei”);
- type="a" - lettere minuscole latine (la lettera minuscola a inglese “ei”);
- type="I" - numeri romani maiuscoli (la lettera maiuscola I inglese “ai”);
- type="i" - numeri romani minuscoli (la lettera minuscola i inglese “ai”);
- type="1" - numeri arabi, usati per impostazione predefinita.
Puoi provare diverse varianti dell’attributo type per il tag OL. Ecco un esempio:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<ol type="i">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ol>
</body>
</html>