HTML5 Gli Elenchi

Scritto da ambrix on . Postato in Corsi Programmazione, NotInHome, Web Design

logo html

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).

  1. Harry
  2. Sally
  3. 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> 
  1. Harry
  2. Sally
  3. 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> 
  1. Harry
  2. Sally
  3. 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> 
  1. Harry
  2. Sally
  3. 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 <– []

Per Richieste, Avvisi e Lasciti Ereditari

Disclaimer

I contenuti di questo Blog (testi, immagini, foto, etc.) sono di mia creazione, tranne nei casi dove espressamente indicato.