ELENCHI

Esempio di elenco ordinato:

<div>
 <ol>
  <li>primo el.</li>
  <li>secondo el.</li>
  <li>terzo el.</li>
 </ol>
</div>

Risultato:

1. primo el.
2. secondo el.
3. terzo el.

Elenchi non ordinati

Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag <ul> che sta per Unordered List. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>.

Esempio di elenco non ordinato:

<div>
 <ul>
  <li>Elemento uno</li>
  <li>Elemento due</li>
  <li>Elemento tre</li>
 </ul>
</div>

Risultato:

Elenchi di definizioni

Gli elenchi di definizioni sono degli elenchi un po' particolari che prevedono due parti:

Questa caratteristica renderà questo tipo di elenchi utili per piccoli glossari, o anche per la gestione delle FAQ sul proprio sito.

Per poterle usare sono necessari tre tag: <dl>, Definition List; <dt>, Definition Term; e <dd>, Definition Defined. Il primo tag serve per contenere l'elenco ed indicare di che tipo è, in questo caso di definizione. Il secondo tag serve per specificare la parola che verrà spiegata o meglio definita. Il terzo tag serve per contenere la spiegazione che verrà rientrata rispetto alla parola da definire.

Vediamo un esempio che chiarirà meglio le idee:

<div>
 <dl>
  <dt>Libri</dt>
   <dd>distribuz. gratis</dd>
  <dt>Matematica</dt> 
   <dd>Titolo del libro.</dd>
 </dl>
</div>

Risultato:

Libri

distribuz. gratis

Matematica

Titolo del libro

La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente

È fortemente consigliato inserire testo alternativo per ogni immagine, in modo da migliorare l'accessibilità del sito per i non vedenti in quanto il suo contenuto può essere 'letto' da browser adatti.
Il testo alternativo verrà inoltre visualizzato in automatico se il browser non riesce a visualizzare l'immagine.

I valori di width e height possono essere espressi in pixel.

Esempio di inserimento di un'immagine:

<div>
 <img src="../img/Home.gif"
 alt="Testo visualizzato se manca l'immagine"
 width="102px" height="58px"
 title="Testo visualizzato quando si passa sopra il mouse">
</div>

esempio pratico: Con immagine PRESENTE

esempio pratico: Con immagine ASSENTE

Indica una tabella utilizzata per visualizzare righe e colonne di dati o informazioni.
Gli elementi minimi necessari per definire una tabella sono

Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>.
Indica una tabella utilizzata per visualizzare righe e colonne di dati o informazioni.
È tra questi due tag che si devono inserire colonne e righe, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). È importante notare come è sempre una riga ad includere una colonna: cioè il tag <td> è sempre incluso in un tag <tr>.

Se si vuole indicare al browser di creare una cella che faccia da intestazione ad una colonna (solitamente renderizzata con il contenuto in neretto e centrato) si può usare il tag <th> (Table Header), ideato appositamente per questo tipo di funzione.

per modificare la dimensione semantica di una colonna si utilizza l'attributo colspan (Column span), mentre rowspan è l'equivalente per le colonne.

• colspan: quante colonne pesa una singola <td>
• rowspan: quante righe pesa una singola <td>

Vi è un tag interessante che è <caption> che permette di aggiungere una descrizione alla tabella (una sorta di didascalia)
con l'attributo border="numero di pixel" si specifica la larghezza (in pixel) dei bordi attorno alla tabella e alle celle.
Impostando questo attributo a 0 (zero) i bordi vengono disattivati, il valore predefinito è 1.
Aggiungendo l’attributo border senza specificare alcun valore si otterrà un bordo di spessore pari a 1.

Gli elementi minimi necessari per definire una tabella sono <table>...</table>, che imposta la tabella stessa,
<tr>...</tr> per dichiarare le righe e <td>...</td> per creare le celle all'interno di ogni riga.

<table border>
 <tr>
  <td>cella 1</td>
  <td>cella 2</td>
  <td>cella 3</td>
 </tr>
 <tr>
  <td>cella 4</td>
  <td>cella 5</td>
  <td>cella 6</td>
 </tr>
</table> 

Tabelle preformattate

È possibile creare delle tabelle anche attraverso spazi e senza l'ausilio del tag <table>: ci si può servire infatti del tag <pre> che dirà all'interprete di visualizzare il testo così com'è stato scritto all'interno del documento HTML, pertanto con i medesimi spazi e a capo.
L'inconveniente è che il testo all'interno del tag <pre> verrà visualizzato monospaziato, scelta esteticamente non ottimale, e sarà inoltre meno gestibile in termini di modifiche successive.

 +-------------------+-----------------+------------------+
 | prima colonna   | seconda colonna | terza colonna  |
 +-------------------+-----------------+------------------+
 | primo elemento  | primo elemento  | primo elemento |
 +-------------------+-----------------+------------------+
 | secondo elemento | secondo elemento| secondo elemento|
 +-------------------+-----------------+------------------+