HTML - Dare struttura ai documenti

Fabio Giovanetti

Liceo di Luino

Riepilogo

• Fino ad ora abbiamo visto alcuni tag per fornire struttura ai documenti:
  • p per i paragrafi
  • h1,h2, ..., h6 per i titoli
  • li per le liste

Tabelle

• Quando si devono presentare dati in modo strutturato si usano le tabelle
• Le tabelle sono state usate molto (e continuano ad essere usate) anche per definire il layout di una pagina
• Usare una tabella a scopo grafico ha indubbi vantaggi nella precisione della collocazione
• Così facendo però si introduce una forte commistione tra la presentazione e i contenuti
• Ragioni di accessibilità portano a sconsigliare fortemente questa condotta

table

• Il marcatore per definire una tabella è table
• All'interno di una tabella si definiscono delle righe con il marcatore tr
• e delle celle dentro le righe con il marcatore td
• table ha delle proprieà che ne definiscono l'aspetto (bordi e margini) ma è meglio come al solito usare i CSS

Esempio di tabella (1)

<table>
<tr>
<td>Rossi</td>
<td>0332 737373</td>
</tr>
<tr>
<td>Verdi</td>
<td>0332 5454545</td>
</tr>
</table>

viene reso come:


Rossi
0332 737373


Verdi
0332 5454545

Miglioriamo la tabella

• Per definire meglio la struttura di una tabella possiamo usare:
  • delle intestazioni th
  • un titoli caption
  • un sommario summary

Esempio di tabella (2)

<table summary="Telefono di ogni dipendente">
<caption>Rubrica</caption>
<tr>
<th>Nome</th>
<th>Telefono</th>
</tr>
<tr>
<td>Rossi</td>
<td>0332 737373</td>
</tr>
<tr>
<td>Verdi</td>
<td>0332 5454545</td>
</tr>
</table>

Esempio di tabella (2): la resa

o con un po' di css

Raggruppare parti di documento

• Quando si devono raggruppare sezioni di documento, in assenza di marcatori più specifici, si possono usare div e span
• Entrambi servono per creare un raggruppamento
• span è un elemento inline e non manda a capo
• con div il contenuto viene seprato con degli a capo
• div e span vengono molto usati insieme alla proprietà class per poter associare meglio i css
• <div class="esempio">testo</div>

Credits e licenza

• Questa presentazione è realizzata con S5 di Eric Meyer
• Si tratta di uno strumento per realizzare presentazioni scrivendo semplicemente un file html, quindi con strumenti standard e non proprietari
• Eccetto dove diversamente specificato, i contenuti di questa presentazione sono rilasciati sotto Licenza Creative Commons

  

• Il CSS della tabella è gentilemente offeryo dal wiki di Porte Aperte sul Web