Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05

Transcript

1 Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05

2 Le tabelle Creazione di una tabella: <TABLE> </TABLE> le tabelle vengono utilizzate sia per inserire dati che per migliorare l impaginazione. Attributi: BORDER= assegna un bordo alla tabelle (BORDER=0 nessun bordo, utile per l impaginazione nascosta ) WIDTH = consente di variare l ampiezza della tabella

3 Righe e colonne nelle tabelle E necessario inserire le righe che compongono la tabella: <TR> </TR> questo comando si ripete per ogni riga. All interno di ogni riga si inseriscono le colonne o celle: <TD> </TD> a questo comando faremo seguire il testo desiderato.

4 Alcuni miglioramenti Celle vuote: <TD></TD> si ottengono non racchiudendo alcun valore nel comando. Header: <TH> si inserisce una riga destinata a delimitare i campi della tabella, centrando il contenuto (es. la prima).

5 Descrizione: <CAPTION> aggiunge la descrizione della tabella. Attributi: ALIGN = top (la descrizione apparirà sopra la tabella), bottom (la descrizione apparirà sotto la tabella). Allineamento del testo delle celle: ALIGN = center o left o right viene assegnato alle celle, colloca il testo nella posizione richiesta

6 Variazioni sul tema Variare il numero di celle: attributo COLSPAN di <TD> estensione delle colonne, contiene il numero di colonne desiderato. Variare l altezza delle righe: attributo ROWSPAN di <TD> altezza di una singola cella, contiene il valore numerico desiderato.

7 Delimitazione tra le celle: attributo CELLSPACING associato a <TABLE> definisce lo spessore che intercorre tra le singole celle, si ottengono bordi interni più spessi. attributo CELLPADDING associato a <TABLE> concede maggior respiro al testo all interno di una singola cella, secondo il valore numerico assegnato.

8 Colorare i bordi Colore del bordo bidimensionale: attributo BORDERCOLOR di <TABLE> definisce il colore del bordo ma ne annulla la tridimensionalità. Colore del bordo tridimensionale: attributo BORDERCOLORDARK di <TABLE> colore della parte scura delle cornici tridimensionali. attributo BORDERCOLORLIGHT colore della parte chiara delle cornici tridimensionali

9 Esempio 1 <TABLE WIDTH="60%" BORDER="3" BORDERCOLOR="red"> <CAPTION ALIGN="bottom">La mia prima tabella in HTML</CAPTION> <TH> <TD ALIGN="left">Prima cella</td> <TD ALIGN="center">Seconda cella</td> <TD ALIGN="right">Terza cella</td> </TH> <TR> <TD ALIGN="left" BGCOLOR="yellow">Prima cella</td> <TD></TD> <TD ALIGN="right" BGCOLOR="orange">Terza cella</td> </TR> <TR> <TD COLSPAN="2"><FONT COLOR="green">Allargo le celle!</font></td> <TD COLSPAN="2"><FONT COLOR="blue">Allargo anche queste!</font></td> </TR> </TABLE>

10 Esempio 2 <TABLE WIDTH="60%" BORDER="3" BORDERCOLORDARK="red" BORDERCOLORLIGHT="orange"> <CAPTION ALIGN="bottom">La mia seconda tabella in HTML</CAPTION> <TH> <TD ALIGN="left"><B>Prima cella</b></td> <TD ALIGN="center"><B>Seconda cella</b></td> <TD ALIGN="right"><B>Terza cella</b></td> </TH> <TR> <TD ALIGN="left" BGCOLOR="yellow"><I>Prima cella</i></td> <TD></TD> <TD ALIGN="right" BGCOLOR="orange"><U>Terza cella</u></td> </TR> <TR> <TD COLSPAN="2"><FONT COLOR="green"><BIG>Allargo le celle!</big></font></td> <TD COLSPAN="2"><FONT COLOR="blue"><SMALL>Allargo anche queste!</small></font></td> </TR> </TABLE>

11 Esercizio n 1 Creare una pagina Orario con: Titolo: Orario del primo semestre Più sotto, una tabella con i 6 giorni della settimana (Lunedì/Sabato) e le ore a due a due (es. 8-10, 10-12, etc.). I giorni sono in grassetto centrati, le ore in corsivo allineati a sinistra. Le materie sono centrate. I bordi della tabella sono dimensione 3, con attributi del colore tridimensionali definiti a piacere. Definire una descrizione per la tabella creata. Dove non si ha lezione si deve inserire una cella vuota.

12 Inserire suoni e filmati E necessario creare un collegamento con un file scaricabile dal nostro server. <A HREF= audio.wav > Il file audio </A> <A HREF= video.avi > Il filmato </A> E un ottima abitudine inserire accanto al link le dimensioni del file!

13 Sottofondo musicale Inserire un suono di sottofondo ad una pagina: <BGSOUND SRC= file_audio > Attributi: LOOP = ripete per il numero di volte inserito il contenuto del file audio. Se si vuole una ripetizione sino all abbandono della pagina, si assegna il valore infinite oppure -1.

14 Esempio 3 <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <H1>Che bella musichina!</h1> <BGSOUND SRC="Nabucco.mp3" LOOP="infinite"> </BODY> </HTML>

15 I moduli Creazione di un modulo: <FORM> </FORM> Attributi: NAME = etichetta attribuita al form ACTION = URL indirizzo a cui inviare i dati. METHOD = get o post metodo usato nella trasmissione dei dati

16 I campi del modulo Vengono inseriti tramite il medesimo comando e differiscono grazie agli attributi: <INPUT> Attributi: NAME = etichetta assegnata al campo (nome non valore). TYPE = indica che tipo di campo deve essere inserito.

17 I campi del modulo TYPE = submit pulsante che permette l invio dei dati. TYPE= reset pulsante che annulla i dati inseriti sino a quel momento. Attributi: VALUE = segue type, contiene ciò che si visualizza sul pulsante.

18 I campi del modulo TYPE = button tasto personalizzato TYPE = text campo di testo Attributi: NAME = etichetta del campo di testo. SIZE = lunghezza della finestra. MAXLENGTH = numero massimo di caratteri da inserire.

19 I campi del modulo Aree di testo: <TEXTAREA> usate solitamente per i commenti. Attributi: NAME = etichetta dell area di testo. ROWS = numero di righe. COLS = numero di colonne.

20 I campi del modulo Pulsanti a scelta singola: TYPE = radio Pulsanti a scelta multipla: TYPE = checkbox Attributi: NAME = etichetta del pulsante radio/checkbox. VALUE = valore attribuito all elemento. CHECKED = scelta di default.

21 I campi del modulo Finestea menù: <SELECT> </SELECT> Ogni voce deve essere contenuta tra: <OPTION> </OPTION> per avere il menù completamente visibile: SIZE = numero voci inserite MULTIPLE = rende possibili più scelte.

22 I campi del modulo TYPE = password inserisce i dati contrassegnandoli con asterischi.

23 Esempio 4 <FORM NAME="primo_form" ACTION="miosito.php" METHOD="post"> <P> <INPUT TYPE="text" NAME="primo_testo" SIZE="50"><BR> <INPUT TYPE="text" NAME="secondo_testo" MAXLENGTH="10"><BR> </P> <P> <INPUT TYPE=radio NAME="uno" VALUE="1" CHECKED>Prima scelta<br> <INPUT TYPE=radio NAME="due" VALUE="2">Seconda scelta<br> <INPUT TYPE=radio NAME="tre" VALUE="3">Terza scelta<br> </P> <P> <INPUT TYPE="checkbox" NAME="uno" VALUE="1b">Uno <INPUT TYPE="checkbox" NAME="due" VALUE="2b">Due <INPUT TYPE="checkbox" NAME="tre" VALUE="3b" CHECKED>Tre </P>

24 Esempio 4 bis <P> <SELECT SIZE="2"> <OPTION>Voce n 1</OPTION> <OPTION>Voce n 2</OPTION> </SELECT> </P> <P> <SELECT> <OPTION>Voce n 1</OPTION> <OPTION>Voce n 2</OPTION> </SELECT> </P> <P> <TEXTAREA NAME="area1" ROWS="5" COLS="20"></TEXTAREA> </P> <INPUT TYPE="submit" VALUE="Invia il form!"> <INPUT TYPE="reset" VALUE="Cancella!"> </FORM>

25 Esercizio n 2 Creare una pagina Form con: Titolo: Conosciamoci meglio! Un modulo che permetta di inserire, utilizzando il campo più consono: Nome e cognome Tipo di foto preferito: bionco/nero o colore Soggetti fotografici che interessano:»persone»natura»arte

26 Da quanto tempo ci si interessa di fotografia: Meno di 1 anno Più di 1 anno 2-5 anni Più di 5 anni Che tipo di macchina fotografica utilizza: Analogica Digitale Si sono mai utilizzati filtri colorati o effetti particolari: Si No Se si, descriviceli! Pulsante per inviare i dati e per cancellarli.