• Non ci sono risultati.

Laboratorio di Informatica 3 Anno Accademico 2019-2020

N/A
N/A
Protected

Academic year: 2021

Condividi "Laboratorio di Informatica 3 Anno Accademico 2019-2020"

Copied!
16
0
0

Testo completo

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

(2)

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

(3)

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)

(4)

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.

(5)

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>

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

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

(7)

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

(8)

<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

(9)

<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

(10)

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

(11)

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>

(12)

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.

(13)

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.

(14)

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 458x118

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;

(15)

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.

(16)

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ì?

Riferimenti

Documenti correlati

In these studies, gas emissions are continuously measured by a gas analysers system and the sample is taken from the stack gas through an insulated and externally heated

glh International Symposium on Metal lons in Biology and Medicine Book of Abatracta.. 9 th INTERNATIONAL SYMPOSIUM ON MET AL

(2) Auf der Grundlage des Berichts nach Artikel 22 des Vertrags zur Gründung der Europäischen Gemeinschaft kann der Rat unbeschadet der anderen Bestimmungen des genannten Vertrags

RESOLVED to mark a new stage in the process of European integration undertaken with the establishment of the European Communities, RECALLING the historic importance of the ending of

glh International Symposium on Metal lons in Biology and Medicine Book of Abatracta.. 9 th INTERNATIONAL SYMPOSIUM ON MET AL

a Department of Chemistry, University of Sassari, Via Vienna 2, 07100, Sassari, ITALY. b Cerm, Centro di Risonanze Magnetiche, Università di Firenze,

107-8, preferisce ipotizzare uno sbarco della flotta punica nell'insenatura di Is Are- nas, più prossima a Cornus, ma sfavorita dal gioco delle correnti, assai forti, rispetto

Paul Bairoch souligne qu'au 18e siècle, la révolution industrielle n'a pas encore bouleversé la répartition de la population eu­ ropéenne, car elle n'affecte que des