HTML5 Gli Elenchi

Lezione 05 In questa lezione introdurremo gli elenchi in HTML5. I link sono gli strumenti di base per connettere i siti web tra loro, tuttavia sono anche utili a connettere tra di loro le pagine per formare un sito web.
Al fine di migliorare la navigazione degli utenti, possiamo creare Menu ed Elenchi . Gli elenchi sono un ottimo modo per organizzare le informazioni e uno degli elementi più utilizzati in HTML5. Prima di aggiungere qualsiasi link, vediamo il codice di base.
I tag di elenco sono disponibili in diversi tipi. Iniziamo con gli elenchi ordinati (o liste ordinate).
<!doctype html> <html> <body> <ol> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ol> </body> </html>
Abbiamo appena usato ol (ordered list) per creare un elenco, ma è ancora vuoto. Per aggiungere un elemento della lista, possiamo usare il tag li (list item).
- Harry
- Sally
- Jack
I numeri visualizzati prima delle voci dell’elenco sono chiamati indicatori. Invece dei numeri, possiamo anche usare le lettere come indicatori. Per impostare il tipo di indicatore, possiamo usare l’attributo type . Per le lettere maiuscole in ordine alfabetico, il valore che ci serve è “A”.
<!doctype html> <html> <body> <ol type="A"> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ol> </body> </html>
- Harry
- Sally
- Jack
Se vogliamo usare i numeri romani come tipi di indicatori, introduciamo il carattere”I“.
<!doctype html> <html> <body> <ol type="I"> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ol> </body> </html>
- Harry
- Sally
- Jack
Se vogliamo elencare qualcosa in ordine decrescente, aggiungiamo semplicemente l’attributo reversed al tag <ol>.
<!doctype html> <html> <body> <ol type="I" reversed> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ol> </body> </html>
- Harry
- Sally
- Jack
Possiamo aver bisogno di un elenco non ordinato, come ad esempio un elenco puntato. Per crearne uno, utilizziamo il tag ul (unordered list).
<!doctype html> <html> <body> <ul> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ul> </body> </html>
- Harry
- Sally
- Jack
Di default avremo un elenco puntato dei tre elementi dell’esempio. Possiamo anche creare combinazioni di liste ordinate e non ordinate. Proviamo a creare un elenco non ordinato che contiene un elenco ordinato.
<!doctype html> <html> <body> <ul> <li>Personaggi dei Film!</li> <ol> <li>Harry</li> <li>Sally</li> <li>Jack</li> </ol> <li>Dove appaiono?</li> <ol> <li>Harry ti presento Sally</li> <li>Grosso guaio a Chinatown</li> </ol> </ul> </body> </html>
- Personaggi dei Film!
- Harry
- Sally
- Jack
- Dove appaiono?
- Harry ti presento Sally
- Grosso guaio a Chinatown
Ora usiamo il tag <a> per aggiungere un collegamento ad un elemento della lista.
<!doctype html> <html> <body> <ul> <li>Personaggi dei Film!</li> <ol> <li>Harry</li> <li>Sally</li> <li><a href="https://pad.mymovies.it/filmclub/2006/05/020/locandina.jpg">Jack</a></li> </ol> <li>Dove appaiono?</li> <ol> <li>Harry ti presento Sally</li> <li>Grosso guaio a Chinatown</li> </ol> </ul> </body> </html>
- Personaggi dei Film!
- Harry
- Sally
- Jack
- Dove appaiono?
- Harry ti presento Sally
- Grosso guaio a Chinatown
Così operando, potremmo creare un menu di navigazione per il nostro primo sito web.
<!doctype html> <html> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </body> </html>
Una Homepage in genere ha il suo menu principale di navigazione e in questo modo possiamo crearne uno basilare in semplice HTML5.
Con gli elenchi, termina l’ultima lezione di HTML5 in 5 Step. Ovviamente, queste lezioni introduttive non sono affatto esaustive, il linguaggio HTML ha tantissime altre sfaccettature. Tuttavia, esse sono utili ad iniziare a programmare in HTML.
Ritorna al Menu Iniziale <– []