La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Costruire un Sito Web 4a Lezione: Martedì 20 Febbraio – HTML – Tabelle."— Transcript della presentazione:

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 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: Il tag principale. Utilizzato per indicare al browser "questa é una tabella", assieme ad altri attributi come le dimensioni, i bordi ecc... TableRow definisce una riga orizzontale di (TableData) celle. 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 Primo esempio di tabelle

9 Esempio 1 - continua Ora scriviamo i tags di tabella Questi significano semplicemente "qui comincia una tabella" e "qui finisce la tabella“ Primo esempio di tabelle

10 Esempio 1 - continua Ogni tabella ha bisogno di perlomeno UNA riga Primo esempio di tabelle

11 Esempio 1 - continua E ovviamente ogni riga necessita di perlomeno una cella di dati Primo esempio di tabelle

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

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 cell Scarlett Johansson

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

16 Esempio 1 - continua Proviamo a fare il bordo un po' più grosso Scarlett Johansson

17 Esempio 1 - continua E se lo facessimo ENORME? Scarlett Johansson

18 Esempio 1 - continua E se lo levassimo di mezzo? Come potete vedere il valore di default è bordo nullo! Scarlett Johansson

19 Esempio 1 - continua Per ora lavoriamo con un bordo non troppo largo Scarlett Johansson

20 Esempio 1 - continua Se non viene specificata alcuna dimensione la tabella verrà visualizzata grande quel tanto che basta Scarlett Johansson, Angelina Jolie

21 Esempio 1 - continua In ogni caso non è difficile specificare la grandezza della tabella Scarlett Johansson, Angelina Jolie

22 Esempio 1 - continua Se vogliamo specificare una grandezza per la tabella è meglio farlo in modo sensato! Scarlett Johansson, Angelina Jolie

23 Esempio 1 - continua Per adesso leviamoci dalle scatole Angelina Jolie Scarlett Johansson

24 Esempio 1 - continua Riduciamo la dimensione della tabella al 50% della dimensione totale della finestra del Browser Scarlett Johansson

25 Esempio 1 - continua Proviamo a specificare una dimensione di 50 invece che il 50% Scarlett Johansson

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

27 Esempio 1 - continua Potremmo essere anche interessati all'altezza. Scarlett Johansson

28 Esempio 1 - continua E' possibile controllare il punto della cella in cui appariranno i dati Scarlett Johansson

29 Esempio 1 - continua Scarlett Johansson Scarlett Johansson 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. Scarlett Johansson

31 Esempio 1 - continua Scarlett Johansson Scarlett Johansson 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 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 Scarlett Johansson

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

36 Esempio 1 - continua Adesso ingrandiamo di un po’ la tabella Scarlett Johansson

37 Esempio 1 - continua L'amica di Scarlett, Angelina é tornata e vuole la sua cella personale stavolta! Scarlett Johansson Angelina Jolie

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! Scarlett Johansson Angelina Jolie

39 Esempio 1 - continua Gli attributi di LARGHEZZA possono anche essere espressi come valori percentuale Scarlett Johansson Angelina Jolie

40 Esempio 1 - continua Assegnamo a Scarlett una cella più grande visto che lei é qui dall'inizio! Scarlett Johansson Angelina Jolie

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! Scarlett Johansson Angelina Jolie Monica Bellucci

42 Esempio 1 - continua

43 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 Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

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 Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele

46 Esempio 1 - continua

47 Rimettiamo Nicola al suo posto e leviamo tutti gli attributi tranne il BORDER Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

48 Esempio 1 - continua Adesso parleremo di due attributi che si chiamano CELLPADDING e CELLSPACING Sono entrambi definiti all'interno del Tag 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 Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

50 Esempio 1 - continua Se sostituiamo CELLSPACING al posto di CELLPADDING otteniamo un effetto un po' diverso Il valore di default per CELLSPACING é 2 Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

51 Esempio 1 - continua Ovviamente siamo anche liberi di usare una combinazione dei due attributi Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

52 Esempio 1 - continua Leviamoci di torno CELLPADDING e CELLSPACING e torniamo alla nostra vecchia e semplice tabella Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

53 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 Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

54 Esempio 1 - continua Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

55 Esempio 1 - continua Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

56 Esempio 1 - continua Un'ultima cosa riguardo ai colori di sfondo nelle tabelle Un colore di sfondo di cella ( ) copre quello di riga ( ) e uno di riga ( ) copre uno di tabella ( ) Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

57 Esempio 1 - continua Naturalmente all'interno di una cella è possibile utilizzare tutti gli altri codici HTML Scarlett Johansson Angelina Jolie Monica Bellucci Luca Gianmichele Nicola

58 Esercizio 1 Creare la seguente pagina Internet utilizzando una tabella La foto della torta di mele la potete trovare al seguente indirizzo:

59 Tabella dentro a tabella Sarà mica possibile mettere una tabella dentro una tabella?? Proviamo subito Iniziamo ad inserire Scarlett Scarlett Johansson

60 Tabella dentro a tabella - continua Ingrandiamo di un po’ la tabella Scarlett Johansson

61 Tabella dentro a tabella - continua Sostituiamo Scarlett con una Scarlett completa di tabella Scarlett Johansson

62 Tabella dentro a tabella - continua Possiamo centrare facilmente la nostra seconda tabella Scarlett Johansson


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

Presentazioni simili


Annunci Google