HTML(creare elenchi)

Gli elenchi possono essere usati per molti scopi, ad esempio i menù, perché possono contenere link e tante altre cose che ora vedremo. Gli elenchi si possono dividere in quattro categorie: elenchi non ordinati, elenchi ordinati, elenchi descrittivi, elenchi nidificati. Partiamo dai più semplici gli elenchi non ordinati. Per ogni tipo di codice vedrete sullo schermo come appare.

Elenchi non ordinati

Il codice di un elenco non ordinato è il seguente:
<ul>
<li>Home page</li>
<li>Chi siamo</li>
<li>Contatti</li>
</ul>
Questo è come apparirebbe sul vostro sito web.

• Home page
• Chi siamo
• Contatti

Per fare l'elenco più lungo basta aggiungere una riga di codice, ad esempio se vogliamo mettere anche la parola foto, scriviamo quest'altra riga di codice: <li>Foto</li>

Se vogliamo cambiare lo stile dell'elenco, allora bisogna inserire nell'elenco la definizione dello stile e l'intestazione del codice diventa così:
<ul style="list-style-type:none;">


La parola disc può essere cambiata e sono disponibili le seguenti da scrivere in lingua inglese:
disc circle square none

Elenchi Ordinati

Nel caso si voglia creare un elenco ordinato, il codice cambia in questo modo:

 <ol>
  <li>Home Page</li>
  <li>Chi Siamo</li>
  <li>Contatti</li>
</ol> 

Sipossono usare al posto dei simboli geometrici, i numeri. In questo casp il codice cambia in questo modo:

 <ol type="1">
 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol> 

 Per default l'elenco parte dal numero 1, ma possiamo farlo partire da qualsiasi numero. Nel prossimo esempio, l'elenco parte dal numero 8.

 <ol type="8">
 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol>

Al posto dei numeri, si possono usare le lettere maiuscole dell'alfabeto, in questo caso il codice diventa così:

 <ol type="A">
 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol>

Se lettere maiuscole non ci piacciono, possiamo usare le minuscole in questo modo:

<ol type="a">

 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol>

Possiamo anche usare i numeri romani maiuscoli in questo modo:

<ol type="I">
 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol>

Se non ci piacciono i numeri romani maiuscoli, possiamo usare quelli minuscoli in questo modo:

<ol type="i">
 <li>Home Page</li>
 <li>Chi Siamo</li>
 <li>Contatti</li>

 </ol>

 

Elenchi Descrittivi

 <dl>

<dt>Succo</dt>
 <dd>Arancia e Acqua</dd>
 <dt>Cappuccino</dt>
 <dd>Caffè e Latte</dd>
 </dl>

Tra i tag <dl> è definito l'elenco. Tra i tag <dt> sono definiti i nome. Tra i tag <dd>  definita la descrizione per ogni termine. 
Ecco come apparirebbe sul vostro sito web.

Succo

Arancia e Acqua

Cappuccino

Caffè e Latte

Elenchi Nidificati 

Gli elenchi nidificati sono liste all'interno di una lista.

 <ul>
  <li>Caffè</li>
  <li>Succhi
    <ul>
      <li>Aranciata</li>
      <li>Limonata</li>
    </ul>
  </li>
  <li>Cappuccino</li>
</ul> 

Ed ecco come apparirebbe sul vostro sito.

• Caffè
• Succhi
  • Aranciata
  • Limonata
• Cappuccino

Alcuni libri suli codici di Programmazione che consigliamo

Clicca sull'immagine per i dettagli e l'anteprima gratuita