Esercitazione 2 - HTML "avanzato": tabelle e form

Marco Porta – 2008/09
CIM – Sistemi e Tecnologie Multimediali A
Esercitazione 2 – HTML “avanzato”: tabelle e form
Traccia di lavoro:
1. Creare la cartella tabelle nella propria cartella di lavoro (o al limite sul desktop)
2. All’interno della cartella tabelle, creare il file (di testo) periodi.html, che definisce una
pagina web con contenuto simile al seguente:
CIM - Calendario didattico 2008/2009
Periodo\Trim
Primo trim.
Secondo trim.
Terzo trim.
Quarto trim.
Lezioni
29/09 – 08/11
24/11 – 24/01
23/02 – 04/04
27/04 – 06/06
Sospensione
10/11 – 22/11
26/01 – 21/02
06/04 – 24/04
08/06 – 26/09
3. Modificare la tabella creata al punto 2 come mostrato nella tabella seguente: nella prima riga,
fondere la seconda e la terza cella, inserendo il contenuto Primo semestre; analogamente,
fondere la quarta e la quinta cella, inserendo il contenuto Secondo semestre (utilizzare
l’attributo colspan del tag <th> o <td>). Infine, nella prima colonna fondere la seconda e la
terza cella (dall’alto), inserendo il contenuto Lezioni e sospensioni (utilizzare l’attributo
rowspan del tag <th> o <td>).
Periodo\Trim
Lezioni e
sospensioni
Primo semestre
Secondo semestre
29/09 – 08/11
24/11 – 24/01
23/02 – 04/04
27/04 – 06/06
10/11 – 22/11
26/01 – 21/02
06/04 – 24/04
08/06 – 26/09
4. Creare la cartella form nella propria cartella di lavoro (o al limite sul desktop). All’interno della
cartella form, creare il file (di testo) iscrizione.html, e lì definire un form che si presenti,
grossomodo, come mostrato nella pagina seguente (si tengano presenti gli allineamenti, da
realizzare attraverso una o più tabelle – Suggerimento: conviene utilizzare una tabella di due
colonne; nelle celle della colonna di sinistra verranno messi i nomi dei campi, come Cognome,
Nome, ecc., mentre nelle celle della colonna di destra saranno posti i campi di input. Per ottenere
allineamenti corretti nel caso di giorno, mese e anno di nascita, occorre creare una sottotabella. In
pratica, nella cella della seconda colonna, cioè nel suo <td>, si apre nuovamente il tag <table>
e si definisce una tabella di due righe e tre colonne: nella riga superiore staranno “Giorno”,
“Mese” e “Anno”, mentre in quella inferiore i tre campi di input testuale. Qualcosa di analogo, ma
con una tabella di tre righe e due colonne, vale per la parte dedicata all’indicazione delle modalità
di ricezione di maggiori informazioni. Non si dimentichi poi l’attributo colspan per occupare
più colonne…):
Marco Porta – 2008/09