corso HTML

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	colonna2, riga1 colonna2, 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; in particolare, nella prossima lezione sono riportati quelli per ITALIA ON LINE

lezione 6 (elenchi e tabelle)

consigli per la progettazione di un sito