img

FONDAMENTI: 12).Elenchi

ELENCHI

Per definire un elenco o lista nell'HTML abbiamo a disposizione diversi tag che ci permettono di creare tre tipi di elenchi: elenco ordinato, elenco non ordinato e, infine, elenco di definizione.

Elenchi ordinati

Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per Ordered List. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li> ossia List Item. Ogni elemento verrà automaticamente preceduto da un numero.
È utile l'uso dell'attributo start, il quale specifica il numero da cui partirà la numerazione dell'elenco.

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:

  • Elemento uno
  • Elemento due
  • Elemento tre

Elenchi di definizioni

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

- Un elemento di testo
- Una spiegazione dell'elemento

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
FONDAMENTI: 13).Immagini
Inserire un'immagine

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

<img src="indirizzo reale dell'immagine" alt="testo alternativo">

Questi due attributi sono obbligatori e oltre agli attributi globali, validi per tutti gli elemnti HtmL5, img supportorta anche quelli riportatati nella tabella che segue.

Attributo Significato
width forza la dimensione della foto in larghezza
height forza la dimensione della foto in altezza

È 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

Testo visualizzato se manca l'immagine

esempio pratico: Con immagine ASSENTE

Testo visualizzato se manca l'immagine

FONDAMENTI: 14).Tabelle

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

...... per dichiarare le righe e per creare le celle all'interno di ogni riga.

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.

esempio:
<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> 
risultato:
...
cella 1 cella 2 cella 3
cella 4 cella 5 cella 6

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.


Ecco un esempio di tabella preformattata:
 +-------------------+-----------------+------------------+
 | prima colonna   | seconda colonna | terza colonna  |
 +-------------------+-----------------+------------------+
 | primo elemento  | primo elemento  | primo elemento |
 +-------------------+-----------------+------------------+
 | secondo elemento | secondo elemento| secondo elemento|
 +-------------------+-----------------+------------------+