Costruire un Sito Web 4a Lezione: Martedì 20 Febbraio – HTML – Tabelle.

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?


Esempio 1 - continua E se lo levassimo di mezzo?

Come potete vedere il valore di default è bordo nullo!


Esempio 1 - continua Per ora lavoriamo con un bordo

non troppo largo


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


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 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>


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 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)


<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>


<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>


<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



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>


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>

Costruire un Sito Web 4a Lezione: Martedì 20 Febbraio – HTML – Tabelle.

Documents

Transcript of Costruire un Sito Web 4a Lezione: Martedì 20 Febbraio – HTML – Tabelle.