Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Costruire un Sito Web.ppt

VIEWS: 43 PAGES: 62

									   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:
    <HTML>
    <HEAD>
    <TITLE>Primo esempio di tabelle</TITLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>

   Ora salvatelo come tabella1.html nella
    cartella Lezione4 da creare sul desktop
        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?
<TABLE BORDER=0>
<TR>
<TD>Scarlett Johansson</TD>
</TR>
</TABLE>




        Come potete vedere il valore di default
         è bordo nullo!
         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
          <TABLE BORDER=3 WIDTH=100>
          <TR>
          <TD>Scarlett Johansson</TD>
          </TR>
          </TABLE>




   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
            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                   <TABLE BORDER=3
WIDTH=100 HEIGHT=75 >             WIDTH=100 HEIGHT=75 >
<TR>                              <TR>
<TD ALIGN=RIGHT>Scarlett          <TD ALIGN=LEFT>Scarlett
Johansson</TD>                    Johansson</TD>
</TR>                             </TR>
</TABLE>                          </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                    <TABLE BORDER=3
WIDTH=100 HEIGHT=75 >              WIDTH=100 HEIGHT=75 >
<TR>                               <TR>
<TD ALIGN=LEFT                     <TD ALIGN=LEFT
VALIGN=BOTTOM>Scarlett             VALIGN=MIDDLE>Scarlett
Johansson</TD>                     Johansson</TD>
</TR>                              </TR>
</TABLE>                           </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
            <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
            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
<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>

    Il valore di default per CELLSPACING é 2
             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>

								
To top