Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
Introduzione
Il linguaggio HTML
Parte 4
HTML e CSS
Libri di testo consigliati:
Laura Lemay, Rafe Colburn
HTML & CSS
McGraw-Hill Italia. (2007)
ISBN 978-88-386-4478-8
Libri di testo consigliati:
Daniele Bochicchio e Stefano Mostarda
HTML5 con CSS e JavaScript
Editore Ulrico Hoepli Milano. (2015)
ISBN 978-88-203-6983-5
Per chi desidera approfondire le innovazioni introdotte con HTML5 e la gestione avanzata dei contenuti multimediali
Le tabelle
(seconda parte)Attributo
Valore
bgcolor=col
Colore di sfondo (nome o #codice)
bordercolor=col
Colore del bordo
background=“URL del
file immagine”
Immagine di sfondo della tabella
Attributi tag <table>
Tabelle: composizione e impaginazione
<table bgcolor="grey" bordercolor="red" border="1"> <tr> <th>Cognome</th> <th>Nome</th> <th>Telefono</th> </tr> <tr> <td>Bianchi</td> <td>Franco</td> <td>02-555-667788</td> </tr> … </table>
Il tag <th>..</th> è analogo a <td> tranne per il fatto che il testo che contiene viene visualizzato con uno stile diverso (di solito in grassetto). Si usa per differenziare l’intestazione delle tabelle.
Esercizio n.11
Realizzare il codice HTML che produce la tabella mostrata qui al lato. Si riproducano i colori, gli stili e le dimensioni del carattere.
Tabelle: composizione e impaginazione
Attributo
Valore
height=nn, width=nn
Dimensioni della tabella (come per le
immagini) % è riferito alle dimensioni
della pagina.
align="left",
"center","right"
Allineamento della tabella rispetto alla
finestra del browser
Attributi tag <table>
<tr> <th>[0,1]</th><th>[0,2]</th> </tr> <tr> <td>[1,1]</td><td>[1,2]</td> </tr> <tr> <td>[2,1]</td><td>[2,2]</td> </tr> </table>
Le si impostano le dimensioni della tabella uguali a quelle dell’immagine della mela, in modo che l’immagine riempia perfettamente il fondo della tabella.
Tabelle: composizione e impaginazione
<table height="458" width="458" background="mela.jpg" border="1"> <tr> <th>[0,1]</th><th>[0,2]</th> </tr> <tr> <td>[1,1]</td><td>[1,2]</td> </tr> <tr> <td>[2,1]</td><td>[2,2]</td> </tr> </table>
Lo spazio occupato dalla tabella è diviso tra le celle in «parti uguali».
altezza celle = altezza tabella / numero righe larghezza celle = larghezza tabella / numero colonne
Spaziatura tra le celle (cell spacing)
Margini interni alla cella (cell padding)
Contenuto
della cella
Bordo
Tabelle: composizione e impaginazione
Attributo
Valore
cellpadding=nn distanza tra il contenuto della cella ed il
suo bordo interno
cellspacing=nn distanza tra il bordo esterno delle celle
border=nn
spessore del bordo esterno della tabella
(0 indica nessun bordo)
Attributi delle tabelle HTML
<p>Tabella 2 (border=1, cellspacing=6)</p> <table border="1" cellspacing="6">
<tr> <th>[0,1]</th><th>[0,2]</th> </tr> <tr> <td>[1,1]</td><td>[1,2]</td> </tr> <tr><td>[2,1]</td><td>[2,2]</td> </tr> </table>
Tabelle: composizione e impaginazione
<table border="1" cellpadding="6" bgcolor="yellow">
E’ possibile impostare il colore di sfondo e le dimensioni anche di
singole celle o delle celle appartenenti a una intera riga
Tabelle: composizione e impaginazione
<table border="2" bordercolor="red"> <tr bgcolor="#cccccc"> <th>[0,1]</th><th>[0,2]</th></tr> <tr> <td bgcolor="yellow">[1,1]</td> <td bgcolor="#cc4444">[1,2]</td> </tr> … 17
<table border="2" bordercolor="red" bgcolor="red"> <tr bgcolor="#cccccc"> <th>[0,1]</th><th>[0,2]</th></tr> <tr> <td bgcolor="yellow">[1,1]</td> <td bgcolor="#cc4444">[1,2]</td> </tr> <tr> <td>[2,1]</td><td>[2,2]</td> </tr> </table>
Impostazioni di riga
Attributo
Valore
height=nn,
Altezza di tutte le celle della riga. Se in
% è riferito alle dimensioni della tabella.
align="left", "center",
"justify","right"
Allineamento orizzontale del testo in
tutte le celle
valign="top",
"center","bottom"
Allineamento verticale del testo in tutte
le celle
Attributi tag <tr>
testo
testo
<tr align=“center valign=“center”>
testo
testo
<tr align=“left” valign=“top”>
img
img
Impostazioni di cella
Attributo
Valore
height=nn,
Altezza della cella. L’altezza della riga è
pari a quella della cella più alta. Se in %
è riferito alle dimensioni della tabella.
align="left", "center",
"justify","right"
Allineamento orizzontale del testo
valign="top",
"center","bottom"
Allineamento verticale del testo
Attributi tag <td>
Attributo
Valore
width=nn,
Larghezza della cella. La larghezza della
colonna è pari a quella della cella più
larga. Se in % è riferito alle dimensioni
della tabella.
bgcolor="col"
Colore dello sfondo
valign="top",
"center","bottom"
Allineamento verticale del testo
Attributi tag <td>
Impostazioni di tabella, riga e cella
Si tenga presente che:
• se esplicitati, gli attributi dei tag di livello inferiore
modificano gli stessi definiti a livello superiore;
• altrimenti, gli attributi specificati più in alto nella gerarchia,
restano validi in tutti i tag sottostanti.
testo
testo
<tr valign=“center”>
testo
<td align=“left”>
<td align=“center” bgcolor=“yellow”>
<td align=“right” valign=“bottom”>
Tabelle: esercizi
Nome Cognome Data di nascita Luogo di nascita
Giuseppe Garibaldi 4 luglio 1807 Nizza (Francia) Giuseppe Mazzini 22 giugno 1805 Genova
Giuseppe Meazza 23 agosto 1910 Milano
Giuseppe Ungaretti 8 febbraio 1888 Alessandria d’Egitto Giuseppe Verdi 10 ottobre 1813 Le Roncole (PR)
Esercizio n.12
Realizzare il codice HTML che produce la tabella mostrata qui sopra. Si riproducano i colori, gli stili e le dimensioni del carattere.
X
X
O
X
O
X
O
Esercizio n.13 : Tic-tac-toe
Realizzare il codice HTML che produce la tabella mostrata qui al lato. Si riproducano i colori, gli stili e le dimensioni del carattere. Si usi il font «Arial»
Tabelle: esercizi
mela1.jpg mela2.png mela3.png 458x170 458x170 458x118Esercizio n.14 : «Il puzzle»
Supponiamo di disporre di una immagine jpg ritraente una mela dalle dimensioni originale 458x458 pixel e di tagliarla in tre parti come raffigurato qui al lato;
Supponiamo di disporre di una immagine jpg ritraente una mela dalle dimensioni originale 458x458 pixel e di tagliarla in tre parti come raffigurato qui al lato;
Si scriva il codice HTML necessario per visualizzare la tabella riprodotta qui a fianco in cui:
Tabelle: esercizi
border=1
Esercizio n.14 : «Il puzzle»
Supponiamo di disporre di una immagine jpg ritraente una mela dalle dimensioni originale 458x458 pixel e di tagliarla in tre parti come raffigurato qui al lato;
Si scriva il codice HTML necessario per visualizzare la tabella riprodotta qui a fianco in cui:
1
Ciascuna cella contiene un pezzo dell’immagine. Dimensioni e formattazione delle celle devono essere tali che l’immagine venga ricomposta senza imprecisioni.Supponiamo di disporre di una immagine jpg ritraente una mela dalle dimensioni originale 458x458 pixel e di tagliarla in tre parti come raffigurato qui al lato;
Si scriva il codice HTML necessario per visualizzare la tabella riprodotta qui a fianco in cui:
1
Ciascuna cella contiene un pezzo dell’immagine. Dimensioni e formattazione delle celle devono essere tali che l’immagine venga ricomposta senza imprecisioni.2
Ciascuna immagine deve essere l’ancora di un link che punta a un diverso sito web sulle mele.Tabelle: esercizi
50px
Esercizio n.15 : «mela scomposta»
Sapreste reimpostare la tabella dell’esercizio precedente, per avere una mela «scomposta» così?