-
.
Generazione di liste
Le liste sono un utile strumento per mostrare del testo sotto forma di elenchi ordinati secondo una numerazione oppure non ordinati.
In HTML5 gli elenchi si creano mediante i tag <ol>, per le liste ordinate (ordered list), e <ul> per le liste non ordinate (unordered list).
Per le singole voci delle liste dobbiamo utilizzare, invece, il tag <li> (list item).
Abbiamo, inoltre, la possibilità di generare delle liste dette di definizione, tramite il tag <dl> (definition list), caratterizzate dalla presenza di un termine (tag <dt>, definition term) e dalla relativa descrizione (tag <dd>, definition desctription).
CODICESPOILER (clicca per visualizzare)CODICE<!DOCTYPE html>
<html>
<head>
<title>Liste e definizioni</title>
<meta name="keywords" content="web, html5" charset="utf-8">
</head>
<body>
<h4>Elenco dei 10 linguaggi di programmazione più popolari secondo TIOBE<sup>1</sup>:</h4>
<ol>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>PHP</li>
<li>Objective-C</li>
<li>Python</li>
<li>JavaScript</li>
<li>Perl</li>
</ol>
<hr>
<h4>Elenco dei principali sistemi operativi e dei loro principali artefici:</h4>
<ul>
<li>GNU/Linux
<ul>
<li>Linus Torvalds per il kernel ...</li>
<li>Richard Stallman per la suite GNU</li>
</ul>
</li>
<li>Windows
<ul>
<li>Ricrosoft Inc.</li>
</ul>
</li>
<li>Apple OS
<ul>
<li>Apple Inc.</li>
</ul>
</li>
<li>BSD Unix
<ul>
<li>CSRG (Computer Systems Research Group)</li>
<li>UC Berkeley</li>
</ul>
</li>
</ul>
<hr>
<p>1</p>
<dl>
<dt>TIOBE</dt>
<dd>The TIOBE Programming Community index is an indicator of the popularity of programming languages...</dd>
</dl>
</body>
</html>
EsempioIl codice qui sopra crea una pagina HTML dove sono presenti: una lista ordinata, che mostra un elenco dei 10 linguaggi di programmazione più popolari; una lista non ordinata, che mostra un elenco dei principali sistemi operativi dove, in più, per ciascuno di essi è presente un'altra lista, annidata e non ordinata che mostra l'elenco di chi li ha inventati; una lista di definizioni per il termine TIOBE (non completo) usato nel titolo <h4> di inizio pagina; il tag <hr> (horizontal rule) che permette di mostrare una linea orizzontale e che funge da elemento separatore tra le sezioni di una pagina o, per usare la sua estensione terminologica adottata nella specifica di HTML5, da indicatore di un break tematico tra parafrasi (come si può avere, per esempio, quando si ha una transitazione tra i vari argomenti di una sezione, oppure in un cambiamento di scena di una storia).
Per quanto riguarda le liste ordinate può essere interessante sapere che il tag <ol> accetta i seguenti attributi:- reversed, che, se presente, permette di mostrare l'elenco in modo discendente (per esempio ..., 3, 2, 1);
- start, che indica il numero a partire dal quale iniziare la numerazione dell'elenco (di default 1). Ciò significa che l'istruzione <ol start="5"> farà cominciare la lista con il numero 5;
- type, che consente di specificare il tipo di marcatore da utilizzare nell'elenco tra 1 (per i numeri decimali, 1., 2., 3. e così via), a (per l'alfabeto latino in minuscolo, a., b., c. e così via); A (per l'alfabeto latino in maiuscolo, A., B., C. e così via), i (per i numeri romani in minuscolo, i., ii., iii. e così via) e I (per i numeri romani in maiuscolo, I., II., III. e così via).
Per il tag <li>, invece, se lo stesso è "figlio" del tag <ol>, può essere utilizzato l'attributo value, che consente di impostare un numero arbitrario. In questo caso, gli eventuali elementi li a esso successivi avranno la numerazione che partirà seguendo il predetto valore impostato.Guida a cura di ©True Story
.
Generazione di listeGuida HTML 3 |
Like
