lezione 6 (elenchi e tabelle)
L'ultima lezione è la più complessa e riguarda l'uso degli elenchi e delle tabelle. Vi servono? Sì, perché sono utili per i commercianti, gli statistici, e per gestire le pagine WEB.
Come primo passo, mostriamo gli elenchi. Il tipo più semplice ha la forma mostrata nel riquadro di sinistra (nomi preceduti da circoletti); a destra ci sono i TAG che lo hanno generato
Come si vede, l'elenco non è ordinato alfabeticamente: il codice HTML vi fornisce la struttura di un elenco, però l'ordinamento è a vostra cura.
- Pisolo
- Cucciolo
- Mammolo
- Gongolo
- Eolo
- Brontolo
- Dotto
|
<UL>
<LI>Pisolo
<LI>Cucciolo
<LI>..........
<LI>Dotto
</UL>
|
- il tag <UL> (Unordered List) dichiara che si apre un elenco;
- il tag <LI> (ListIndex) dichiara la voce di elenco
- il tag </UL> dichiara la fine dell'elenco
E come si costruisce il riquadro colorato? Il riquadro, è in realtà una tabella. Questo è un esempio:
| colonna1, riga1 | colonna2, riga1 | colonna3, riga1 |
| colonna1, riga2 | colonna2, riga2 | colonna3, riga2 |
| colonna1, riga3 | colonna2, riga3 | colonna3, riga3 |
Questo è il codice che ha generato la tabella
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD>colonna2, riga1</TD><TD>colonna3, riga1</TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna2, riga2</TD><TD>colonna3, riga2</TD>
</TR>
<TD>colonna1, riga3</TD><TD>colonna2, riga3</TD><TD>colonna3, riga3</TD>
</TABLE >
|
- il tag <TABLE BORDER=1> dichiara che si apre una tabella con bordi (=0 senza bordi);
- il tag <TD> (TableData) indica i dati racchiusi in ogni cella, il tag </TD> indica il termine della cella;
- il tag <TR> (TableReturn) indica la fine di una riga;
- il tag </TABLE> dichiara la chiusura della tabella
Ora proviamo una piccola modifica:
| colonna1, riga1 | colonna2, riga1 | colonna3, riga1 |
| colonna1, riga2 | colonna 2, riga2 | colonna3, riga2 |
| colonna1, riga3 | colonna2, riga3 | colonna3, riga3 |
Questo è il codice che ha generato la tabella, le varianti sono in rosso:
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD><B>colonna2, riga1</B></TD><TD>colonna3, riga1</TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna2, riga2</TD><TD>colonna3, riga2</TD>
</TR>
<TD>colonna1, riga3</TD><TD>colonna2, riga3</TD><TD>colonna3, riga3</TD>
</TABLE >
|
- nella seconda cella si sono aggiunti i due TAG <B> per rendere il testo in grassetto;
ecco una modifica più interessante:
| colonna1, riga1 | colonna2, riga1
colonna2, riga2 | colonna3, riga1 |
| colonna1, riga2 | colonna3, riga 2 |
| colonna1, riga 3 | colonna2, riga3 | colonna3, riga3 |
Come si vede, la seconda colonna comprende lo spazio riservato a due caselle. Nel riquadro seguente, in rosso sono indicate le modifice effettuate.
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD ROWSPAN=2>colonna2, riga1<BR>colonna2, riga2 </TD><TD>colonna3, riga1</TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna3, riga2</TD>
</TR>
<TD>colonna1, riga3</TD><TD>colonna2, riga3</TD><TD>colonna3, riga3</TD>
</TABLE >
|
- all'interno del secondo TAG di apertura TD è stato inserito il TAG ROWSPAN=2 per indicare che la seconda cella si espande ROWexPANd comprendendo 2 righe;
- i due TAG TableData di apertura e chiusura riferiti alla cella della seconda riga e seconda colonna sono stati eliminati ed il contenuto della cella (colonna2 riga2) traferito nella cella espansa
modifichiamo ancòra la tabella:
| colonna 1, riga 1 | colonna2, riga1 | colonna3, riga1
colonna3, riga2
colonna3, riga3 |
| colonna1, riga2 | colonna2, riga2 |
| colonna1, riga3 | colonna2, riga3 |
Come si vede, ora la terza colonna comprende lo spazio riservato a tre caselle. Il codice è nel riquadro seguente, con le modifiche apportate in colore rosso
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD ROWSPAN=2> colonna2, riga1<TD>colonna2, riga2 </TD><TD ROWSPAN=3 >colonna3, riga1<BR >colonna3, riga2 <BR >colonna3, riga3</TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna2, riga 2</TD>
</TR>
<TD>colonna1, riga 3</TD><TD>colonna2, riga3</TD>
</TABLE >
|
ora sostituiamo un'immagine al testo contenuto nella terza colonna:
| colonna1, riga1 | colonna2, riga1 |  |
| colonna1, riga2 | colonna2, riga2 |
| colonna1, riga3 | colonna2, riga3 |
Come si vede, ora è stata inserita una figura. Nel riquadro seguente è riportato il codice:
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD ROWSPAN=2> colonna2, riga1<TD>colonna2, riga2 </TD><TD ROWSPAN=3 ><IMG SRC="dante3.gif"></TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna2, riga2</TD>
</TR>
<TD>colonna1, riga3</TD><TD>colonna2, riga3</TD>
</TABLE >
|
Per finire, ecco una diversa modifica alla tabella:
| colonna1, riga1 | colonna2, riga1 - colonna3, riga1 |
| colonna1, riga2 | colonna2, riga2 | colonna3, riga2 |
| colonna1, riga3 | colonna2, riga3 | colonna3, riga3 |
Il codice è il seguente e dovete capirlo da soli, altrimenti iniziate nuovamente la lettura di questa lezione:
<TABLE BORDER=1>
<TD>colonna1, riga1</TD><TD COLSPAN=2>colonna2, riga1 - colonna3, riga1</TD>
<TR>
<TD>colonna1, riga2</TD><TD>colonna2, riga2</TD><TD>colonna3, riga2</TD>
</TR>
<TD>colonna1, riga3</TD><TD>colonna2, riga3</TD><TD>colonna3, riga3</TD>
</TABLE >
|
A questo punto avete le nozioni sufficienti per scrivere la vostra pagina; nella prossima lezione avrete alcuni consigli.
Quando avrete terminato il lavoro, dovrete metterla sul server del Vostro provider.
Per far questo, dovete seguire alcuni passi abbastanza generali.
|