1 / 62

Costruire un Sito Web

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

palma
Download Presentation

Costruire un Sito Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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!

  3. Esempio di pagina web creata utilizzando le tabelle

  4. La stessa pagina con uno sfondo grigio e i bordi della tabella evidenziati

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

  6. Esempio di tabella

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

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

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

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

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

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

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

  14. 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!

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

  16. Esempio 1 - continua • Proviamo a fare il bordo un po' più grosso <TABLE BORDER=5> <TR><TD>Scarlett Johansson</TD> </TR> </TABLE>

  17. Esempio 1 - continua • E se lo facessimo ENORME? <TABLE BORDER=25> <TR><TD>Scarlett Johansson</TD> </TR> </TABLE>

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

  19. Esempio 1 - continua • Per ora lavoriamo con un bordo non troppo largo <TABLE BORDER=3> <TR><TD>Scarlett Johansson</TD> </TR> </TABLE>

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

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

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

  23. Esempio 1 - continua • Per adesso leviamoci dalle scatole Angelina Jolie <TABLE BORDER=3 WIDTH=75%> <TR><TD>Scarlett Johansson</TD> </TR> </TABLE>

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

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

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

  27. Esempio 1 - continua • Potremmo essere anche interessati all'altezza. <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR><TD>Scarlett Johansson</TD> </TR> </TABLE>

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

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

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

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

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

  33. Esempio 1 - continua <TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="Scarlett.jpg" WIDTH=50 HEIGHT=50></TD></TR></TABLE> • 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

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

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

  36. Esempio 1 - continua • Adesso ingrandiamo di un po’ la tabella <TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD>Scarlett Johansson</TD></TR></TABLE>

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

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

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

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

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

  42. Esempio 1 - continua

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

  44. Esempio 1 - continua • ATTENZIONE: Gli attributi di LARGHEZZA vengono estesi anche alle righe successive!

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

  46. Esempio 1 - continua

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

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

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

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

More Related