HTML5 Gli Elenchi

Scritto da ambrix on 24/04/2018. Postato in Corsi Programmazione, NotInHome, Web Design

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!
1. Harry
2. Sally
3. Jack
Dove appaiono?
1. Harry ti presento Sally
2. 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!
1. Harry
2. Sally
3. Jack
Dove appaiono?
1. Harry ti presento Sally
2. 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.

Arrivederci!

Ritorna al Menu Iniziale <– []