A questo punto cominci ad avere un’idea meglio strutturata di come funziona il linguaggio html. Ne hai imparato la struttura, ne hai conosciuto alcuni tag e attributi e ti senti pronto ad iniziare. Ci siamo: scrivi una semplice pagina in html.
Supponiamo che, per iniziare a programmare la tua prima pagina html tu abbia pensato alla creazione di un blog di cucina.
Hai inserito il tuo titolo utilizzando un tag h1, hai formattato il tuo testo, e adesso vorresti inserire gli ingredienti della tua ricetta preferita: hai bisogno di un elenco html! Ma, come fare?
Gli elenchi, o liste html, sono estremamente utili: abbattono il “wall of text” che si prospetta davanti al lettore, alleggerendone, appunto, la lettura e spronandolo, così, a proseguire. Inoltre aiutano a veicolare meglio un messaggio all’interno del quale siano presenti informazioni d’insieme, perché permettono che queste vengano presentate con chiarezza già a livello visivo.
Nel linguaggio html esistono 3 tipologie di elenchi, e tutti funzionano allo stesso modo: hanno un tag padre all’interno del quale si annidano dei tag figli.
Il tag padre rappresenta la tipologia di elenco, i tag al suo interno sono gli elementi della lista.
Vediamoli meglio singolarmente.
Elenchi (o liste) ordinati
Si aprono col tag <ol> (ordered list) che, finito il nostro elenco, andrà chiuso (così come avverrà per tutti gli altri tag inerenti alle liste). Ci crea una lista numerata progressivamente (1,2,3…).
Gli elementi della nostra lista abbracciati dal tag <ol> andranno inseriti all’interno, a loro volta, del tag <li></li> (ovvero list item).
Gli elenchi possono contenere altri elenchi, ramificandone la struttura.
Per intenderci, un list item può aprire un altro sotto-elenco.
Trattandosi, però, di un elenco numerato, per ovviare alla confusione che si creerebbe tra elenchi e sotto-elenchi, viene in nostro aiuto l’attributo type.
L’attributo type ci consente di definire in che modo avverrà la nostra “numerazione” : essa potrà, infatti, avvalersi di numeri arabi come di romani, o, addirittura, di lettere maiuscole o minuscole.
La numerazione con numeri arabi è il valore che abbiamo di default negli elenchi ordinati.
Per avvalerci di quella a numeri romani il valore da dare all’attributo type sarà “ type=“I” ”;
Per ordinare, invece, gli elementi della nostra lista avvalendoci dell’alfabeto, il valore dell’attributo type sarà “ type=“a” ” o “ type=“A” ” a seconda che si desideri un indicatore in minuscolo o in maiuscolo.
Vediamo nella foto sottostante come dovrebbe apparire il codice:
<ol>
<li>Primo elemento</li>
<li>Secondo elemento
<ol type="I">
<li>Primo romano</li>
<li>Secondo romano</li>
</ol>
</li>
<li>Terzo elemento
<ol type="A">
<li>Primo alfabeto</li>
<li>Secondo alfabeto</li>
</ol>
</li>
<li>Quarto elemento</li>
</ol>
il modo in cui il browser dovrebbe renderizzare questo codice, secondo quanto detto fino ad ora, è questo:
Tutto chiaro? Ora, se avessi la necessità di far partire la tua numerazione da un determinato valore, dovresti utilizzare un altro attributo del tag <ol> : l’attributo start.
Allo stesso scopo, un altro modo sarebbe quello di utilizzare l’attributo value del tag <li>.
Anche qui cerchiamo di capire meglio con l’aiuto di alcune immagini.
<ol start="12"> <li>Elemento</li> <li>Elemento</li> <li value="25">Elemento</li> <li>Elemento</li> </ol>
Osserva il modo in cui il codice è renderizzato:
Come potrai notare,la numerazione della nostra lista parte dal valore assegnato all’attributo start (in questo caso 12) e prosegue; allo stesso modo, con l’attributo value, viene interrotta la naturale consequenzialità dei numeri e viene seguita una progressione a partire dal nuovo valore. ( 25,26… )
Elenchi (o liste) non ordinati
Si aprono con il tag <ul> (unordered list); la differenza è che, invece della numerazione che abbiamo nel caso precedente, avremo il puntino. Non si tratterà più, quindi, di un elenco numerato, ma di un classico elenco puntato.
Anche per questa tipologia di lista i tag figli sono i list item (<li></li>) e si possono ramificare, questa volta senza la necessità dell’attributo type in quanto il browser di default formatterà i pallini che precedono gli elementi in maniera differente.
Elenchi (o liste) di definizione
Si aprono con il tag <dl> (definition list) che a sua volta si dirama (invece che in <li> come nei casi precedenti) in <dt> (definition term) che indica il termine che va definito e <dd> (definition description) che è letteralmente la descrizione di quel termine.
Sarebbe proprio il tipo di lista utile, ad esempio, per la formattazione del menù di un ristorante:
<dl> <dt>Primi Piatti</dt> <dd>Carbonara</dd> <dd>Parmigiana</dd> <dt>Secondi Piatti</dt> <dd>Tonno in crosta di pistacchio</dd> <dd>anatra all'arancia</dd> </dl>
Fame, eh?
Ma questo non è l’unico tipo di menù per il quale i nostri elenchi si dimostrano utili: utilizzeremo un elenco, infatti, anche per il menù html, vale a dire quello che l’utente consulterà ampliando la sua barra di navigazione.
