Elenchi e tabelle
Elenchi, tabelle e liste ordinate, sono strutture utili per dare ordine ai contenuti, e consentono una lettura più agevole dei dati sulle pagine web.
Le tabelle devono essere usate solo per dati tabellari e non per il layout per il quale si dovranno utilizzare le proprità di posizionamento
Elenchi non ordinati
Il tag ul definisce un elenco in cui la sequenza delle singole voci li (list item) non è rilevante, e quindi possono essere elencate senza un ordine preciso.
tag iniziale <ul>
tag finale </ul>
Le voci dell'elenco sono racchiuse tra i tag <li> e </li>
Questo è il markup html di un elenco non ordinato
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce<li/>
</ul>
Questo esempio è visualizzato dal browser nel seguente modo predefinito
- prima voce
- seconda voce
- terza voce
Le voci dell'elenco sono visualizate come punti elenco. Questo può essere variato attribuendo agli stili elenco, valori diversi tramite C.S.S.; utilizzando la proprietà list-style-type:
ul {
list-style-type:square;
}
I valori possibili sono: disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | none | inherit. Valore iniziale: disc
Elenchi ordinati
Definisce un elenco in cui le singole voci (li) hanno un ordine di sequenza e per avere senso devono essere elencate con un ordine preciso.
tag iniziale <ol>
tag finale </0l>
Le singole voci dell'elenco sono marcate con il tag iniziale
<li>e dal tag finale</li>
Questo è il markup html di un elenco ordinato
<ol>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce<li/>
</ol>
Questo esempio è visualizzato dal browser nel seguente modo predefinito
- prima voce
- seconda voce
- terza voce
Le voci (list item) dell'elenco sono visualizate dai browser come numeri. Questo può essere variato attribuendo stili elenco diversi con CSS; proprietà list-style-type
es:
ol li{
list-style-type:lower-roman;
}
Alla lista ordinata ol sono applicati i seguenti attributi:
start: fa partire l'elenco ordinato dal numero specificato;
es: <ol start="5"> fa iniziare la prima voce elenco con il numero 5
value: si applica alla voce elenco es: <li value="3"> assegna quel numero alla voce di riferimento, la succesiva incrementerà questo valore (4).
L'attributo reversed fa iniziare l'elenco con il marcatore di lista all'incontrario:
<ol reversed="reversed">
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce<li/>
<li>quarta voce<li/>
</ol>
Questo esempio è visualizzato dal browser nel seguente modo:
- prima voce
- seconda voce
- terza voce
- quarta voce
L'attributo <ol reversed="reversed"> può essere scritto anche <ol reversed>
segue il resto dell'elenco.
Reversed non è supportatato da I.E. nemmeno nella versione 9.
La voce li è un elemento di blocco e può contenere anche elementi di blocco come p o elementi rimpiazzati come img
Annidare elenchi ordinati e non ordinati
Gli elenchi non ordinati ed ordinati possono essere annidati all'interno del tag li es: vale sia per ul che per ol
Elenco non ordinato con elenco annidato alla terza voce
Questo è il markup html di un elenco ordinato annidato nella terza voce
<ul>
<li>prima voce elenco</li>
<li>seconda voce elenco</li>
<li>terza voce elenco
qui la terza voce non si chude
<ul> inizio elenco annidato
<li>prima voce elenco annidato</li>
<li>seconda voce elenco annidato</li>
</ul> fine elenco annidato
</li>qui si chiude la terza voce)
<li>quarta voce elenco</li>
<li>quinta voce elenco</li>
</ul>>
Questo esempio è visualizzato dal browser nel seguente modo predefinito
- prima voce elenco
- seconda voce elenco
- terza voce elenco
- prima voce elenco annidato
- seconda voce elenco annidato
- quarta voce elenco
- quinta voce elenco
Immagini come voci elenco
Se come marcatore della voce elenco si preferisce un'immagine, si deve applicare il seguente stile:
ul li {
list-style-image:url(percorso/nomefile);
}
Liste di definizione
definition list
L'elemento in una lista di definizione è formato da due parti: un termine(dt) e una descrizione (dd)
l'elemento dt può essere seguito da più elemnti dd, quando per esempio un termine ha più significati.
Le liste di definizione sono usate per spiegare un termine come nei dizionari
tag iniziale <dl>
tag finale </dl>
Il termine da spiegare è posto all'interno dei tag definition term
tag iniziale <dt>
tag finale </dt>
la descrizione è posta all'interno del tag (definition data)
tag iniziale <dd>
tag finale </dd>
es:
Questo è il markup html per una lista di definizione con tre dt e loro descrizione contenuta in tre dd. L'ultimo dd contiene un'immagine e un collegamento esterno
<dl>
<dt>Html</dt>
<dd>HyperText Markup Language; il linguaggio di markup usato per la realizzazione delle pagine web
</dd>
<dt>CSS</dt>
<dd>Cascading style sheets, i fogli stile utilizzati per conferire la presentazione e il layout alle pagine web
</dd>
<dt>Xhtml</dt>
<dd>Extensible hypertext markup language. Html che utilizza la sintassi rigorosa del XML. Marchio di validazione assegnato dal <a href="https://www.w3c.org">w3c</a><br /> <img src="ima/xhtml.png" alt="simbolo del XHTML del W3C" title="Validare le pagine per ottenere un marchio di qualità" />
</dd>
</dl>
Questo markup è visualizzato dal browser nel seguente modo:
- Html
- HyperText Markup Language; il linguaggio di markup usato per la realizzazione delle pagine web
- CSS
- Cascading style sheets, i fogli stile utilizzati per conferire la presentazione e il layout alle pagine web
- Xhtml
- Extensible hypertext markup language. Html che utilizza la sintassi rigorosa del XML. Marchio di validazione
assegnato dal w3c
L'elemento dd come il tag li degli elenchi ordinati e non ordinati, può contenere elementi di blocco
p div o rimpiazzati come img, ed elementi in linea come l'elemento a vedi l'esempio.
Tabelle
Le tabelle sono utilizzate per dati tabellari e non per dare layout alle pagine
tag iniziale
<table>
tag finale
</table>
Il tag caption contiene una breve didascalia o titolo della tabella.
tag iniziale
<caption>
tag finale
</caption>
Può essere posizionato sopra o sotto la tabella tramite la proprietà css caption-side. caption-side:top; o caption-side:bottom, rispettivamente per collocare la didascalia sopra o sotto la tabella.
Es:
caption{
caption-side:top;
}
Tutti gli aspetti di presentazione delle tabelle possono essere caratterizzati dalle regole CSS
Le tabelle sono formate da righe e colonne; molti sono gli elemnti e gli attributi che le compongono
| principali elementi | principali attributi |
|---|---|
| table, caption, thead, tr, th, td | summary, scope, rowspan, colspan |
Costruire una tabella
La forma più semplice di tabella consiste in:
<table border="1">
<tr>
<td>prima cella della prima riga>/td>
<td>seconda cella della prima riga</td>
</tr>
<tr>
<td>prima cella della seconda riga</td>
<td>seconda cella della seconda riga</td>
</tr>
</table>
Questa tabella dal browser è visualizzata così:
| prima cella della prima riga | seconda cella della prima riga |
| prima cella della seconda riga | seconda cella della seconda riga |
Una tabella più complessa
| 1+ 10=55 | ||
| n° | n° | n° |
|---|---|---|
| 1no | 2ue | 3re |
| 4uattro | 5inque | 6ei |
| 7ette | 8tto | 9ove |
| 10eci | ||
Tabelle annidate
Le tabelle si possono annidare all'interno di un elemento <td> es:
| prima cella della prima riga | seconda cella della prima riga | ||||
| prima cella della seconda riga |
|
Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever
