costruire un sito web 4a lezione: martedì 20 febbraio – html – tabelle
TRANSCRIPT
Costruire un Sito Web
4a Lezione: Martedì 20 Febbraio – HTML – Tabelle
Perché usare le tabelle? Sia per inserire informazioni in forma
tabellare:
Ma, soprattutto, sono utili per creare graziose pagine web, che possono essere costruite semplicemente facendo buon uso dei <TABLE> tags!
Esempio di pagina web creata utilizzando le
tabelle
La stessa pagina con uno sfondo grigio e i bordi della tabella
evidenziati
Come si creano le tabelle? Il tutto si ottiene giocando in pratica su TRE
soli tags: <TABLE>
Il tag principale. Utilizzato per indicare al browser "questa é una tabella", assieme ad altri attributi come le dimensioni, i bordi ecc...
<TR> TableRow definisce una riga orizzontale di <TD>
(TableData) celle. <TD>
Specifica i singoli elementi o celle in una riga. Idea: Una tabella é fatta di righe fatte a loro
volta di celle.
Esempio di tabella
Perché imparare i tags delle tabelle?
Se si è davvero intenzionati ad imparare a fare delle belle pagine web, allora é necessario perdere un po' di tempo ad imparare i vari tags
Se ci si basa esclusivamente sui "table wizards" degli editor HTML le possibilità verranno seriamente limitate, inoltre il risultato finale potrà essere differente da quello che si vuole ottenere
I migliori editor cercano infatti di rendere più facile la creazione delle pagine
Non cercheranno di creare le pagine al posto vostro!
Esempio 1 Aprire il Blocco Note e copiare il
seguente codice:
Ora salvatelo come tabella1.html nella cartella Lezione4 da creare sul desktop
<HTML><HEAD><TITLE>Primo esempio di tabelle</TITLE></HEAD><BODY></BODY></HTML>
Esempio 1 - continua Ora scriviamo i tags di tabella Questi significano semplicemente
"qui comincia una tabella" e "qui finisce la tabella“<HTML>
<HEAD><TITLE>Primo esempio di tabelle</TITLE></HEAD><BODY>
<TABLE></TABLE>
</BODY></HTML>
Esempio 1 - continua Ogni tabella ha bisogno di
perlomeno UNA riga <HTML><HEAD><TITLE>Primo esempio di tabelle</TITLE></HEAD><BODY>
<TABLE><TR></TR> </TABLE>
</BODY></HTML>
Esempio 1 - continua E ovviamente ogni riga necessita
di perlomeno una cella di dati<HTML><HEAD><TITLE>Primo esempio di tabelle</TITLE></HEAD><BODY>
<TABLE><TR><TD></TD></TR> </TABLE>
</BODY></HTML>
Esempio 1 - continua D'ora in poi, per semplificarci la
vita, scriverò solo le istruzioni che riguardano le tabelle
Ometterò quindi HEAD, BODY, TITLE, etc..
<TABLE><TR><TD></TD></TR> </TABLE>
Esempio 1 - continua Adesso ci serve qualcosa da
mettere nella cella Che ne dite di Scarlett Johansson
(le ragazze possono inserirci George Clooney)? mettiamo Scarlett Johansson nella <TD> cell
<TABLE><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Ora proviamo a vedere cosa abbiamo
creato fino ad ora…..
Questo è quello che abbiamo creato...
Scarlett Johansson
Questa è la prima tabella che abbiamo creato!
Esempio 1 - continua Dato che quello che abbiamo
creato fino ad ora assomiglia poco ad una tabella, facciamolo somigliare di più ad una tabella e diamogli un bordo
<TABLE BORDER=1><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Proviamo a fare il bordo un po' più
grosso <TABLE BORDER=5><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua E se lo facessimo ENORME?
<TABLE BORDER=25><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua E se lo levassimo di mezzo?
Come potete vedere il valore di default è bordo nullo!
<TABLE BORDER=0><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Per ora lavoriamo con un bordo
non troppo largo
<TABLE BORDER=3><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Se non viene specificata alcuna
dimensione la tabella verrà visualizzata grande quel tanto che basta<TABLE BORDER=3>
<TR><TD>Scarlett Johansson, Angelina Jolie</TD></TR> </TABLE>
Esempio 1 - continua In ogni caso non è difficile
specificare la grandezza della tabella<TABLE BORDER=3 WIDTH=100% >
<TR><TD>Scarlett Johansson, Angelina Jolie</TD></TR> </TABLE>
Esempio 1 - continua Se vogliamo specificare una
grandezza per la tabella è meglio farlo in modo sensato!
<TABLE BORDER=3 WIDTH=75% ><TR><TD>Scarlett Johansson, Angelina Jolie</TD></TR> </TABLE>
Esempio 1 - continua Per adesso leviamoci dalle scatole
Angelina Jolie<TABLE BORDER=3 WIDTH=75% ><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Riduciamo la dimensione della
tabella al 50% della dimensione totale della finestra del Browser
<TABLE BORDER=3 WIDTH=50% ><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Proviamo a specificare una
dimensione di 50 invece che il 50%
<TABLE BORDER=3 WIDTH=50><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Ora 100
Come potete vedere ci sono due modi di specificare la dimensione di un tabella
Ciascuno dei due ha la sua utilità ma discuteremo un'altra volta i criteri per la scelta di uno dei due
<TABLE BORDER=3 WIDTH=100><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua Potremmo essere anche interessati
all'altezza. <TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua E' possibile controllare il punto della cella
in cui appariranno i dati<TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD ALIGN=CENTER>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua<TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD ALIGN=RIGHT>Scarlett Johansson</TD></TR> </TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD ALIGN=LEFT>Scarlett Johansson</TD></TR> </TABLE>
Come potete vedere il valore di default è ALIGN=LEFT
Esempio 1 - continua E' anche possibile controllare la
visualizzazione verticale all'interno di una cella. <TABLE BORDER=3 WIDTH=100 HEIGHT=75
><TR><TD ALIGN=LEFT VALIGN=TOP>Scarlett Johansson</TD></TR> </TABLE>
Esempio 1 - continua<TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD ALIGN=LEFT VALIGN=BOTTOM>Scarlett Johansson</TD></TR> </TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75 ><TR><TD ALIGN=LEFT VALIGN=MIDDLE>Scarlett Johansson</TD></TR> </TABLE>
In questo caso per default i dati vanno nel mezzo
Esempio 1 - continua Adesso vediamo qualcosa di diverso Le immagini possono essere incasellate
e manipolate come facenti parte di dati di una tabella
Proviamo ad andare su Internet e cercare una foto di Scarlett Johansson
Copiatela nella directory in cui state lavorando (quella dove c'è tabella1.html per intendersi)
Sostituite il testo Scarlett Johansson con un Tag di immagine
Esempio 1 - continua
Ricordatevi che è buona norma includere gli attributi di altezza e larghezza in tutti i tag di immagine
Senza scendere nel dettaglio, farlo rende la vita più facile al browser e evita sorprese sgradite
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC= "Scarlett.jpg" WIDTH=50 HEIGHT=50></TD></TR></TABLE>
Esempio 1 - continua Torniamo un attimo indietro alla semplice
Scarlett Johansson<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=MIDDLE>Scarlett Johansson</TD></TR></TABLE>
Esempio 1 - continua Per semplicità leviamo gli attributi di allineamento Già sappiamo cosa accadrà dal momento che
conosciamo quali sono i valori di default A questo proposito, un TAG dice al browser di fare
qualcosa Un ATTRIBUTO va dentro al TAG e specifica al
browser come farlo
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD>Scarlett Johansson</TD></TR></TABLE>
Esempio 1 - continua Adesso ingrandiamo di un po’ la tabella
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD>Scarlett Johansson</TD></TR></TABLE>
Esempio 1 - continua L'amica di Scarlett, Angelina é tornata e
vuole la sua cella personale stavolta! <TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD>Scarlett Johansson</TD> <TD>Angelina Jolie</TD></TR></TABLE>
Esempio 1 - continua Quando non viene fornita alcuna istruzione al
browser, di solito (ma non sempre) ogni cella assume una dimensione diversa
E' sempre una buona idea specificare quanto é grande ciascuna cella
Controllate attentamente che i vostri calcoli siano giusti, altrimenti quello che la gente vedrà visualizzato sarà MOLTO diverso da quello che volete fargli vedere! <TABLE BORDER=3 WIDTH=300
HEIGHT=75><TR><TD WIDTH=150 >Scarlett Johansson</TD> <TD WIDTH=150 >Angelina Jolie</TD></TR></TABLE>
Esempio 1 - continua Gli attributi di LARGHEZZA possono anche
essere espressi come valori percentuale<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=50% >Scarlett Johansson</TD> <TD WIDTH=50%>Angelina Jolie</TD></TR></TABLE>
Esempio 1 - continua Assegnamo a Scarlett una cella più grande
visto che lei é qui dall'inizio! <TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=80% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD></TR></TABLE>
Esempio 1 - continua Adesso pure Monica é arrivata e,
ovviamente, anche lei vuole la sua cella personale
Dobbiamo decidere quanto spazio assegnarle
Direi che il 20% é più che sufficiente Fate attenzione ad aggiustare pure la
quota di spazio che spetta a Scarlett! <TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD><TD WIDTH=20%>Monica Bellucci</TD></TR></TABLE>
Esempio 1 - continua
Esempio 1 - continua Tre tizi sull'altro lato della strada vedono quello
che sta succedendo e decidono che pure loro vogliono stare nella tua tabella!
Mi sa che dovremo assegnare una riga tutta per loro
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD><TD WIDTH=20%>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD></TR> </TABLE>
Esempio 1 - continua
ATTENZIONE: Gli attributi di LARGHEZZA vengono estesi anche alle righe successive!
Esempio 1 - continua Se Nicola si scoccia e se ne va la tabella
resta intatta Al suo posto rimane una casella vuota
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD><TD WIDTH=20%>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD></TR> </TABLE>
Esempio 1 - continua
Esempio 1 - continua Rimettiamo Nicola al suo posto e leviamo
tutti gli attributi tranne il BORDER
<TABLE BORDER=3><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Adesso parleremo di due attributi che si
chiamano CELLPADDING e CELLSPACING Sono entrambi definiti all'interno del Tag
<TABLE> iniziale CELLPADDING é lo spazio che c'é fra il
bordo della cella e il contenuto della cella stessa
Il valore di default per questo attributo é 1. La ragione per cui il default é 1 e non 0 é che altrimenti il testo starebbe schiacciato contro i bordi della cella e questo non é bello a vedersi (in ogni caso se lo desiderate si può specificare 0)
Esempio 1 - continua
<TABLE BORDER=3 CELLPADDING=12><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Se sostituiamo CELLSPACING al posto di
CELLPADDING otteniamo un effetto un po' diverso
Il valore di default per CELLSPACING é 2
<TABLE BORDER=3 CELLSPACING=12><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Ovviamente siamo anche liberi di
usare una combinazione dei due attributi<TABLE BORDER=3 CELLPADDING=12
CELLSPACING=12><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Leviamoci di torno CELLPADDING e
CELLSPACING e torniamo alla nostra vecchia e semplice tabella
<TABLE BORDER=3><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Una caratteristica interessante è la possibilità di
specificare un colore di sfondo per ciascuna cella, riga o per l'intera tabella
Per fare questo si usa l'attributo BGCOLOR<TABLE BORDER=3 BGCOLOR=“GREEN"><TR><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua
<TABLE BORDER=3><TR BGCOLOR=“GREEN”><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR BGCOLOR=“CYAN”><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua
<TABLE BORDER=3><TR BGCOLOR=“GREEN”><TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD BGCOLOR=“CYAN”>Luca</TD><TD BGCOLOR=“RED”>Gianmichele</TD><TD BGCOLOR=“BROWN”>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Un'ultima cosa riguardo ai colori di sfondo nelle
tabelle Un colore di sfondo di cella (<TD>) copre quello
di riga (<TR>) e uno di riga (<TR>) copre uno di tabella (<TABLE>) <TABLE BORDER=3 BGCOLOR=“GREEN”>
<TR BGCOLOR=“RED”><TD BGCOLOR=“CYAN”>Scarlett Johansson</TD> <TD>Angelina Jolie</TD><TD>Monica Bellucci</TD></TR><TR><TD>Luca</TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esempio 1 - continua Naturalmente all'interno di una cella
è possibile utilizzare tutti gli altri codici HTML <TABLE BORDER=3>
<TR><TD><B>Scarlett Johansson</B></TD> <TD><I>Angelina Jolie</I></TD><TD>Monica Bellucci</TD></TR><TR><TD><A HREF=http://www.libanore.it>Luca</A></TD><TD>Gianmichele</TD><TD>Nicola</TD> </TR> </TABLE>
Esercizio 1
Creare la seguente pagina Internet utilizzando una tabella
La foto della torta di mele la potete trovare al seguente indirizzo:
http://www.libanore.it/applepie.gif
Tabella dentro a tabella Sarà mica possibile mettere una
tabella dentro una tabella?? Proviamo subito Iniziamo ad inserire Scarlett
<TABLE BORDER=3><TR><TD>Scarlett Johansson</TD></TR></TABLE>
Tabella dentro a tabella - continua
Ingrandiamo di un po’ la tabella
<TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD>Scarlett Johansson</TD></TR></TABLE>
Tabella dentro a tabella - continua
Sostituiamo Scarlett con una Scarlett completa di tabella
<TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD><TABLE BORDER=3><TR><TD>Scarlett Johansson</TD></TR></TABLE></TD></TR></TABLE>
Tabella dentro a tabella - continua
Possiamo centrare facilmente la nostra seconda tabella
<TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD><CENTER><TABLE BORDER=3><TR><TD>Scarlett Johansson</TD></TR></TABLE></CENTER></TD></TR></TABLE>