EL1-2_3ST TABELLEAutore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Compila l’intestazione scrivendo il tuo nome e cognome, la data e la classe

A2) Crea una sottocartella di ES1 con nome uguale a quello di questa esercitazione (EL1-2_3ST Tabelle)

A3) All'interno della sottocartella EL1-2_3ST Tabelle salva questo file Word

B) TABELLE

B1) Usando come modello il template di pagina che avevi creato e salvato nell'esercitazione precedente, crea una pagina vuota dentro la cartella di questa esercitazione di nome tabella1.html e poi incolla dentro il body della pagina il seguente codice HTML:

<table border="1"> <tr>

<td>1</td><td>2</td><td>3</td>

</tr> <tr>

<td>4</td><td>5</td><td>6</td>

</tr></table>

B2) Aggiungi un TITLE alla pagina (es. Tabelle) e un header H1 con l'intestazione principale prima della tabella (es. "Esercizi sulle tabelle").

B3) Visualizza la pagina precedente nel browser e incolla qui sotto una schermata:

RIGHE E COLONNE

La tabella che hai visualizzato è formata da 2 righe (orizzontali) e da 3 colonne (verticali). Per brevità si dice che è una tabella 2x3.

Ricordati che quando si scrive che una tabella ha dimensioni per esempio 4 x 3, il primo numero (4) si riferisce alle righe e il secondo numero (3) alle colonne.

B4) In base a come vedi la pagina, secondo te, TABLE è un elemento inline oppure di blocco? Spiegami:

L'elemento TABLE serve per creare una tabella. Una tabella rappresenta una serie di dati organizzati in celle (cell) e distribuiti in righe (row) e in colonne (column):

L'elemento TABLE è un elemento contenitore e al proprio interno contiene tanti elementi TR (Table Row) quante sono le righe della tabella che si vuole costruire. Ogni riga TR contiene a sua volta le celle TD (Table Data):

ATTENZIONE

Ogni riga deve contenere esattamente lo stesso numero di celle. La stessa tabella non può contenere ad esempio una riga con 3 celle e un'altra riga con 5 celle.

In pratica creare una tabella è abbastanza semplice. Basta decidere quante righe e quante colonne deve contenere. Per esempio, 6 righe e 5 colonne. In questo caso devo usare tanti elementi TR

quante sono le righe (nel nostro caso 6 TR) e dentro ogni TR devo mettere tanti TD quante sono le celle di ogni riga (cioè quante sono le colonne – nel nostro esempio 5 celle per ogni riga).

Eccoti qui i riferimenti per la spiegazioni e gli esperimenti su Programmiamo e W3School:

http://www.programmiamo.altervista.org/HTML/tabelle/tab.html

https://www.w3schools.com/tags/tag_table.asp

B5) In tabella1.html aggiungi una seconda tabella con dimensioni 4 x 6 (4 righe e 6 colonne). Riempi le celle della tabella con i numeri progressivi da 1 a 24 e incolla qui sotto il codice html (Courier New):

SUGGERIMENTO

Quando si crea una tabella è facile dimenticarsi di chiudere una riga, una cella o la tabella stessa. Per evitare di fare questo errore (frequentissimo) ti consiglio di procedere in questo modo con Notepad++.

1) Per prima cosa crea la tabella, scrivendo subito il tag di apertura e quello di chiusura:

<table></table>

2) Quindi, all'interno dell'elemento table appena creato, crea una riga (aprendo e chiudendo il tag tr):

<table><tr></tr></table>

3) Dentro la riga tr, crea tante celle quante ti servono, aprendo e chiudendo ogni volta il tag td:

<table><tr><td></td><td></td><td></td></tr></table>

4) Infine copia e incolla l'elemento tr tante volte quante sono le righe che vuoi creare:

<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr>

<td></td><td></td><td></td></tr>...</table>

C) L'ATTRIBUTO BORDER

C1) In <table border="1"> abbiamo un attributo con un valore ad esso assegnato. Qual è l'attributo e qual è il suo valore?

I valori possibili di border sono soltanto due: zero (0) oppure (1).

VALORI AMMESSI PER BORDER

Alcune vecchie versioni del linguaggio HTML prevedevano anche la possibilità di specificare un border più spesso usando i valori 2, 3 eccetera. Attualmente questi valori non sono più validi e non possono più essere usati.

Gli unici valori ammessi per border sono 0 (nessun bordo) e 1 (bordo). Tuttavia molti browser continuano ad interpretare correttamente anche i valori maggiori di 1 (e a disegnare di conseguenza una tabella con bordi più spessi).

Attualmente l'attributo border è deprecato e dovrebbe essere sostituito con gli stili (come impareremo a fare più avanti).

C2) Fai un esperimento. Prova a mettere border uguale a zero in una delle due tabelle in tabella1.html e poi spiegami cosa succede:

Le tabelle con border uguale a zero (dette anche tabelle nascoste) erano un tempo molto usate per il layout di una pagina, cioè per distribuire i diversi elementi sulla pagina stessa:

Questo uso delle tabelle è attualmente deprecato e deve essere sostituito con il posizionamento con i fogli stile (che vedremo più avanti).

C3) Cosa vuol dire che l'uso delle tabelle per il layout della pagina è deprecato? Spiegami perché, secondo te, è deprecato:

In realtà anche l'attributo border è deprecato e dovrebbe essere sostituito con gli stili, come vedremo fra poco. Infatti, provando a validare la pagina...

C4) Valida la pagina con NU Validator e incolla qui sotto una schermata. Se hai fatto tutto correttamente, l'uso dell'attributo border dovrebbe essere segnalato con warning (avvertimento):

ERROR E WARNING

Gli error segnalano errori veri e propri che devono essere assolutamente corretti per validare la pagina. I warning invece sono semplici avvertimenti ed è possibile validare la pagina anche senza correggerli (anche se è consigliabile correggere anche i warning).

Nel caso dell’attributo border, esso dovrebbe essere sostituito con gli stili (come vedremo in seguito).

D) LA TABELLA SI ADATTA AL SUO CONTENUTO

D1) Nella cartella dell'esercitazione crea un file vuoto (usando il template) di nome tabella2.html

D2) Nella pagina crea una tabella con border uguale a 1 e costituita da 4 righe e 3 colonne (4 x 3). Non scrivere nulla dentro le celle TD. Incolla qui sotto una visualizzazione della pagina nel browser:

Come hai notato, in assenza di contenuto le celle collassano, cioè si riducono al solo bordo (se c'è il bordo – altrimenti non si vede nulla del tutto).

Le celle TD adattano le proprie dimensioni al contenuto. Se non c'è contenuto, la cella collassa.

D3) Sempre nella tabella 4x3 scrivi dentro ogni cella una singola parola dell'inizio della Divina Commedia (Nel – mezzo – del – cammin – di – nostra etc. – 12 parole in totale). Incolla qui sotto una schermata con la pagina visualizzata nel browser:

D4) Ogni colonna della tabella assume le dimensioni di... che cosa? La larghezza (orizzontale) di ciascuna colonna, da cosa dipende? Spiegami. Per esempio, nella tua tabella, quale parola impone le dimensioni della prima colonna? E della seconda?

Le celle della tabella possono contenere altri elementi, per esempio paragrafi, immagini eccetera (bisogna solo rispettare l'annidamento corretto degli elementi, chiudendo gli elementi interni prima della chiusura della cella).

DIMENSIONI CONTENITORE (PARENT) E CONTENUTO (CHILD)

Se non vengono indicate esplicitamente, le dimensioni (larghezza e altezza) dell'elemento contenitore (parent) si adattano sempre a quelle dell'elemento contenuto (child).

Per esempio, se una cella di una tabella contiene un'immagine, la larghezza e l'altezza della cella si adattano a quelle dell'immagine. Ragionevole, non ti pare?

D5) Nella cartella dell'esercitazione crea un file vuoto (usando il template) di nome tabella3.html e in esso crea una tabella 2x2 (due righe e due colonne) vuota e con border a uno.

D6) Scegli da internet 4 immagini a piacere, purché non troppo grandi (max 200 pixel per lato) e tutte con le stesse identiche dimensioni. Inserisci in ogni cella della tabella precedente un'immagine e un paragrafo con una didascalia. Il risultato deve essere simile a quello della mia figura qui sopra (scegli tu l'argomento e le immagini – a me basta che l'aspetto visivo sia simile, compreso il grassetto e la centratura delle didascalie). Incolla qui sotto il codice html della pagina:

NON SCARICARE LE IMMAGINI!

Usa immagini presenti in rete e nell'attributo src del tag IMG metti l'URL dell'immagine. Non scaricare le immagini in locale sul tuo PC.

Per copiare l'indirizzo URL di un'immagine trovata con Google Search, usa il tasto destro (vedi figura qui sotto):

D7) Incolla qui sotto la pagina tabella3.html visualizzata nel browser:

D8) Valida la pagina precedente con NU Validator. Se ci sono errori correggili e poi incolla qui sotto una schermata della validazione:ATTENZIONE: non verranno accettate validazioni in cui non è visibile l'indirizzo della pagina validata

E) FISSARE LE DIMENSIONI DELLE CELLE

Per fare in modo che le celle abbiano una larghezza e altezza fissa, dobbiamo usare le proprietà width e height degli stili.

E1) Nella cartella dell'esercitazione crea un file vuoto (usando il template) di nome tabella4.html. Dentro al file crea una tabella 3 x 4 con bordo e senza contenuto.

E2) Su tutte le celle TD della tabella applica i seguenti stili:

style="width:50px; height:50px"

Salva la pagina e incolla qui sotto una visualizzazione nel browser:

Come puoi notare adesso le celle non collassano, ma vengono tutte dimensionate con una larghezza di 50 pixel e con un'altezza di 50 pixel.

APPLICARE PIU' STILI ALLO STESSO ELEMENTO

Nell'esempio precedentestyle="width:50px; height:50px"

stiamo applicando due stili allo stesso elemento.

Come puoi notare i due stili (formati da proprietà: valore) vanno separati fra loro da un punto e virgola. In questo modo puoi applicare tutti gli stili che vuoi.

ATTENZIONE: non devi usare due (o più) attributi style! Questa scrittura qui sotto è sbagliata:

style="width:50px" style="height:50px"

Le dimensioni (larghezza, width, e altezza, height) possono essere specificate in pixel (px), centimetri (cm) e in altre strane unità di misura.

WIDTH E HEIGHT

Queste due parole sono difficili da scrivere senza errori: osserva in particolare la posizione delle lettere T e H in fondo alle parole, posizione che è diversa in widTH e heigHT. Per evitare di sbagliare a scrivere, copia e incolla queste proprietà oppure (meglio ancora) utilizza la funzione di completamento automatico di Notepad++ (basta cominciare a scrivere per esempio wid... e Notepad++ completa con width).

Non occorre in realtà applicare larghezza (width) e altezza (height) a tutte le celle. Infatti:

basta applicare la larghezza (width) solo alla prima cella di ogni colonna basta applicare la altezza (height) solo alla prima cella di ogni riga

E3) Per quale motivo è possibile applicare le dimensioni solo alle celle indicate (senza doverle applicare a tutte le celle)? Come lo spieghi?

E4) Sempre nello stesso file tabella4.html crea una seconda tabella 3x4 con bordo e senza contenuto (come la precedente). Però stavolta applica gli stili per le dimensioni solo alle celle di intestazione di riga e di colonna (vedi figura qui sopra). Incolla qui sotto il codice html della tabella (Courier New):

L'altezza (height) può anche essere applicata all'elemento TR di ogni riga. In questo modo il valore viene ereditato automaticamente da tutti gli elementi TD che sono child di TR (cioè da tutte le celle della riga).

E5) Per dimostrarmi che hai capito, crea una terza tabella (sempre nello stesso file e sempre con le stesse dimensioni) però stavolta applicata lo stile height alle righe TR. Incolla qui sotto il codice HTML:

Si possono usare anche dimensioni diverse per celle diverse nella tabella, con la condizione che:

non si possono assegnare larghezze (width) diverse a due celle della stessa colonna non si possono assegnare altezze (height) diverse a due celle della stessa riga

E6) Sempre nel file tabella4.html crea un'altra tabella 3x4, assegnando liberamente altezze e larghezze diverse alle celle (tenendo conto delle due regole scritte sopra). Incolla qui sotto il codice HTML della tabella:

E7) Incolla qui sotto tabella4.html visualizzata nel browser:

E8) Prova adesso a fare il seguente esperimento. In una delle celle a tua scelta della tabella precedente, inserisci un'immagine IMG avente dimensioni orizzontali e/o verticali maggiori di quelle della cella. ATTENZIONE: se per esempio hai messo width="50px" cerca con Google un'immagine con una larghezza maggiore di 50 pixel. Non scaricare l'immagine sul tuo PC (usa l'url copiato da internet)

E8) Incolla qui sotto tabella4.html visualizzata nel browser dopo l'inserimento dell'immagine:

E9) Cosa succede alle dimensioni della cella (fissate con width e height come visto prima), se il contenuto è più grande? Spiegami:

E10) Valida la pagina con NU Validator, correggi eventuali errori (non ti preoccupare del warning sul border) e incolla qui sotto una schermata:ATTENZIONE: non verranno accettate validazioni in cui non è visibile l'indirizzo della pagina validata

F) PAGINE SOLIDE E PAGINE LIQUIDE

Invece di indicare le dimensioni dei vari elementi in pixel (o in centimetri) è possibile usare le dimensioni percentuali. In questo modo si realizza una pagina cosiddetta liquida, cioè le cui dimensioni si adattano dinamicamente.

In generale una pagina in cui la disposizione dei vari elementi (layout) è rigidamente specificata, viene detta solida. Viceversa una pagina in cui gli elementi vengono specificati in proporzione agli altri, generalmente usando misure percentuali, viene detta liquida.

F1) Nella cartella dell'esercitazione crea un file vuoto (usando il template) di nome tabella5.html. Dentro al file crea una tabella 3 x 4 con bordo e riempi le celle con i numeri progressivi 1,2,3 etc.

F2) Incolla qui sotto una schermata della pagina visualizzata nel browser:

F3) Adesso applica all'intera tabella (tag TABLE) il seguente stile:style="width:50%"

Salva e poi incolla qui sotto una schermata della pagina visualizzata nel browser:

Come puoi notare, la larghezza della tabella è cambiata. Essa è diventata uguale al 50% delle dimensioni della pagina, cioè in pratica il 50% delle dimensioni dello schermo.

Usando le dimensioni percentuali, la percentuale si riferisce all'elemento parent (contenitore) dell'elemento corrente (il body, ovvero l'intera pagina, se non ci sono altri contenitori).

F4) Usa di nuovo lo stile:style="width:50%"

ma stavolta applicalo alla prima cella TD della tabella (quella in cui hai scritto il numero 1). Salva e poi incolla qui sotto una schermata della pagina visualizzata nel browser:

F5) Che cosa è successo? Il valore width:50% a cosa si riferisce? Il 50% di cosa?

PAGINE SOLIDE E LIQUIDE

Cosa cambia se si usano dimensioni percentuali (liquide) rispetto a dimensioni solide? Il vantaggio in questo caso è che la dimensioni degli elementi della pagina si adattano dinamicamente alle dimensioni dello schermo. Per esempio su uno schermo piccolo (tablet o smartphone) o grande (PC) una tabella con larghezza percentuale occuperà una data percentuale dello schermo. Viceversa una tabella solida occuperò sempre lo stesso spazio, indipendentemente dalle dimensioni dello schermo.

Per esempio questa è una pagina solida visualizzata su uno schermo 1024x600:

e questa è la stessa pagina visualizzata su uno schermo 320 x 480:

F6) Cosa noti nella figura precedente? Perché una parte della pagina risulta "tagliata"?

Questo problema non si verificherebbe usando dimensioni percentuali (pagine liquide), poiché la dimensione degli elementi si adatterebbe automaticamente allo schermo.

Per contro, le pagine liquide non consentono un controllo preciso del layout (della posizione e delle dimensioni dei singoli elementi).

G) OPERAZIONI FINALI

G1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

G2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

G3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL1-2_3ST Tabelle Word Il file di questa esercitazionetabella1.html HTMLtabella2.html HTMLtabella3.html HTMLtabella4.html HTMLtabella5.html HTML

G4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.