Sei sulla pagina 1di 47

M

.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Multimedia
Fondamenti
di informatica
Michele Tomaiuolo
tomamic@ce.unipr.it
http://www.ce.unipr.it/people/tomamic
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
!aratteri e te"to
Necessaria convenzione per codifica numerica
(binaria) dei caratteri
Codifica ASC (American Standard Code for
nformation nterchange): 7 o 8 bit, per codificare:

Caratteri alfanumerici: lettere maiuscole, minuscole,


numeri, spazio

Simboli (punteggiatura, @, #, .)

Caratteri di controllo: non sono simboli visualizzabili;


TAB, LF, CR, BELL, etc.)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
D
e
c
D
e
c
#
e
$
#
e
$
!
h
r
!
h
r
Ta%ella &'!II di %a"e
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
00
00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
NUL
NUL
SOH
SOH
STX
STX
ETX
ETX
EOT
EOT
ENQ
ENQ
ACK
ACK
BEL
BEL
BS
BS
HT
HT
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
0A
0A
0B
0B
0C
0C
0D
0D
0E
0E
0F
0F
LF
LF
VT
VT
FF
FF
CR
CR
SO
SO
S
S
20
20
21
21
22
22
23
23
24
24
25
25
26
26
27
27
28
28
29
29
30
30
31
31
32
32
33
33
34
34
35
35
36
36
37
37
38
38
39
39
40
40
41
41
42
42
43
43
44
44
45
45
46
46
47
47
48
48
49
49
50
50
51
51
52
52
53
53
54
54
55
55
56
56
57
57
58
58
59
59
60
60
61
61
62
62
63
63
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
1A
1A
1B
1B
1C
1C
1D
1D
1E
1E
1F
1F
20
20
21
21
22
22
23
23
24
24
25
25
26
26
27
27
28
28
29
29
2A
2A
2B
2B
2C
2C
2D
2D
2E
2E
2F
2F
30
30
31
31
32
32
33
33
34
34
35
35
36
36
37
37
38
38
39
39
3A
3A
3B
3B
3C
3C
3D
3D
3E
3E
3F
3F
80
80
81
81
82
82
83
83
84
84
85
85
86
86
87
87
88
88
89
89
90
90
91
91
92
92
93
93
94
94
95
95
96
96
97
97
98
98
99
99
100
100
101
101
102
102
103
103
104
104
105
105
106
106
107
107
108
108
109
109
110
110
111
111
112
112
113
113
114
114
115
115
116
116
117
117
118
118
119
119
120
120
121
121
122
122
123
123
124
124
125
125
126
126
127
127
DLE
DLE
DC1
DC1
DC2
DC2
DC3
DC3
DC4
DC4
NAK
NAK
SYN
SYN
ETB
ETB
CAN
CAN
EM
EM
SUB
SUB
ESC
ESC
FS
FS
GS
GS
RS
RS
US
US
!
!
"
"
#
#
$
$
%
%
&
&
'
'
(
(
)
)
*
*
+
+
,
,
-
-
.
.
/
/
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
:
:
;
;
<
<
=
=
>
>
?
?
64
64
65
65
66
66
67
67
68
68
69
69
70
70
71
71
72
72
73
73
74
74
75
75
76
76
77
77
78
78
79
79
40
40
41
41
42
42
43
43
44
44
45
45
46
46
47
47
48
48
49
49
4A
4A
4B
4B
4C
4C
4D
4D
4E
4E
4F
4F
@
@
A
A
B
B
C
C
D
D
E
E
F
F
G
G
H
H

J
J
K
K
L
L
M
M
N
N
O
O
50
50
51
51
52
52
53
53
54
54
55
55
56
56
57
57
58
58
59
59
5A
5A
5B
5B
5C
5C
5D
5D
5E
5E
5F
5F
P
P
Q
Q
R
R
S
S
T
T
U
U
V
V
W
W
X
X
Y
Y
Z
Z
[
[
\
\
]
]
^
^
_
_
60
60
61
61
62
62
63
63
64
64
65
65
66
66
67
67
68
68
69
69
6A
6A
6B
6B
6C
6C
6D
6D
6E
6E
6F
6F
`
`
a
a
b
b
c
c
d
d
e
e
f
f
g
g
h
h
i
i
j
j
k
k
l
l
m
m
n
n
o
o
70
70
71
71
72
72
73
73
74
74
75
75
76
76
77
77
78
78
79
79
7A
7A
7B
7B
7C
7C
7D
7D
7E
7E
7F
7F
p
p
q
q
r
r
s
s
t
t
u
u
v
v
w
w
x
x
y
y
z
z
{
{
|
|
}
}
Tabulazione
Tabulazione
Avanzam.
riga
Avanzam.
riga
Ritorno
carrello
Ritorno
carrello
Spazio
(blank)
Spazio
(blank)
Suono
Suono
~
~
.
.
Minuscole
dopo maiusc.
Minuscole
dopo maiusc.
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Interruzione di riga
Unix: LF

Multics, Unix etc., Mac OS X, BeOS, Amiga, RSC OS


Windows: CR+LF

Most early OSes, DOS, OS/2, Windows, Symbian


Apple: CR

Commodore machines, Apple family, Mac OS up to


version 9
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Ta%ella &'!II e"te"a
Caratteri accentati + caratteri per grafici
Code Page 437 per PC (DOS) in Nord America

Possibile mischiare testo in inglese e francese (anche se


in Francia CP850); ma non assieme greco (CP737),
russo ecc.
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
I'( ))*+
Estensioni standard per ASC ad 8 bit
SO 8859-1 (o Latin1): Lingue dell'Europa
Occidentale
SO 8859-2: Lingue dell'Europa Orientale
SO 8859-5: Alfabeto cirillico
SO 8859-15: Latin1 con simbolo euro (C)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Unicode
Unicode associa un preciso code-point (32 bit) a
ciascun simbolo
Possibile rappresentare miliardi di simboli
Primi 256 code-point = Latin1
Attualmente >30 sistemi di scrittura

Proposte per geroglifici


e caratteri cuneiformi

Proposta per Klingon


(da Star Trek. rifiutata!)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
UTF,)- UTF,./
Unicode Transformation Format: codifica per
mappare (un sottinsieme de) i code-points in
sequenze di bit, o code-values
UTF-8 codifica con base ad 8-bit ma lunghezza
variabile (1-4 byte), max compatibilit con ASC
UTF-16 base a 16-bit
lunghezza variabile
UTF-32 codifica a 32-bit,
lunghezza fissa
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Immagini
Digitalizzazione:
trasformazione
immagine sequenza
binaria
mmagine raster
suddivisa in una griglia
di punti (pixel)
Ogni pixel descritto
da un codice, che ne
individua il colore
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Immagini ra"ter
Profondit dell'immagine: # bit per rappresentare il
colore di un pixel

1, 2, 8, 12, 16, 24, 32. bit per pixel (bpp)

Es. 8 bit per 256 (2


8
) possibili colori

Colore diretto o indicizzato da una palette


Risoluzione: # punti per pollice (dpi)

n tipografia dimensioni (wh) in pollici

Spesso (ma non sempre) la risoluzione orizzontale


uguale a quella verticale
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Modelli di colore
Occhio sensibile
a variaz. luminosit
(6 mln di coni, 125
di bastoncelli)
Occhio sensibile
a variaz. luminosit
(6 mln di coni, 125
di bastoncelli)
RGB: rosso, verde, blu

8 bit: 3 bit R e G, 2 B

24 bit: 8 bit R, G e B

32 bit: canale alpha


YUV: luminosit,
crominanza di R e B

Sistema PAL, MPEG


HSB: tonalit,
saturazione e luminosit
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Formati di file grafici
BMP: immagine (normalmente) non compressa
TFF, PNG: comprimono l'immagine, per ridurne
l'occupazione, senza deteriorarla (compressione
lossless)
JPEG: comprime (molto di pi), ma deteriora
l'immagine (compressione lossy)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Formato 0MP
FLE NFO HEADER (14)

2 Tipo file (= "BM)

4 Dim. file (in byte)

4 Riservato

4 Offset immagine (in byte)


BTMAP NFO HEADER (40)

4 Dimensione struttura

4+4 Larghezza e altezza immagine

2 Piani (non usato)

2 # bit per pixel

4+4 Compressione e dim. img (0 senza compressione)

4+4 Risoluzione orizz. e vert. (pixel per metro)

4+4 # colori in palette e # colori importanti


Palette (RGBQUAD)

4 Blue, Green, Red, Riservato


M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
0000 42 4d 76 02 00 00 00 00 00 00 76 00 00 00 28 00
0010 00 00 20 00 00 00 20 00 00 00 01 00 04 00 00 00
0020 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
0030 00 00 00 00 00 00 00 00 00 00 00 00 80 00 00 80
0040 00 00 00 80 80 00 80 00 00 00 80 00 80 00 80 80
0050 00 00 80 80 80 00 c0 c0 c0 00 00 00 ff 00 00 ff
0060 00 00 00 ff ff 00 ff 00 00 00 ff 00 ff 00 ff ff
0070 00 00 ff ff ff 00 00 00 00 00 00 00 00 00 00 00
0080 00 00 00 00 00 00 00 00 00 00 00 00 00 00 09 00
0090 00 00 00 00 00 00 11 11 01 19 11 01 10 10 09 09
00a0 01 09 11 11 01 90 11 01 19 09 09 91 11 10 09 11
00b0 09 11 19 10 90 11 19 01 19 19 10 10 11 10 09 01
00c0 91 10 91 09 10 10 90 99 11 11 11 11 19 00 09 01
00d0 91 01 01 19 00 99 11 10 11 91 99 11 09 90 09 91
00e0 01 11 11 11 91 10 09 19 01 00 11 90 91 10 09 01
00f0 11 99 10 01 11 11 91 11 11 19 10 11 99 10 09 10
0100 01 11 11 11 19 10 11 09 09 10 19 10 10 10 09 01
...
1". Red%ric2.0MP
"BM
"BM
File size
File size
WH=3232
WH=3232
nizio img
nizio img
Profondit (bpp)
Profondit (bpp)
40
40
Palette
colori
Palette
colori
nizio
img
nizio
img
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
1". Red%ric2.0MP
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
3rafica 4ettoriale
mmagine: insieme di
primitive geometriche

Linee, poligoni...

Colori, sfumature...
5 Qualit, a varie risoluzioni
5 Compressione dati
5 Gestione modifiche
* Non intuitiva per alcuni
6 Possibilmente onerosa
6 Risorse non note a priori
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
3rafica 4ettoriale
&pplicazioni: editoria (DTP), video-editing,
architettura, ingegneria, grafica 3D (CAD), font
vettoriali (caratteri scalabili in dimensione senza
perdere definizione)
Formati e"i"tenti: PS (PostScript), PDF (Portable
Document Format), WMF (Windows MetaFile), DXF
(AutoCAD), CDR (CorelDraw), SWF (Flash), SVG
(Scalable Vector Graphics, per il web)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
<! !"##$b%& $'#$de a' (T)L5 f$%e *
<#+, -$d./018001 /e$,/.016001*
<2ec. 301801 &01601 -$d./012501 /e$,/.012501 2301201
f$%%01#ff00001 #.2"4e01#0000001 #.2"4e-$d./0121 5*

<2ec. 3011401 &011201 -$d./012501 /e$,/.012501 2301401
f$%%01#0000ff1 #.2"4e01#0000001 #.2"4e-$d./0121
F$%%"!ac$.&010.71 5*
<5#+,*
1"empio di file '73
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
&udio digitale
Grandezza analogica discretizzazione

Campionamento (sampling) nel tempo

Quantizzazione (quantizing) nelle ampiezze


Qualit CD: 44 kHz, 16bit

Spettro udibile: 20-20k Hz, Nyquist-Shannon


Suono: onde
di compressione e
rarefazione
Suono: onde
di compressione e
rarefazione
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Formato 8&7
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
1"empio di file 8&7
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Documenti strutturati con titoli, tabelle, foto ed
elementi multimediali
Navigazione tra le informazioni seguendo
collegamenti ipertestuali
Moduli per condurre interazioni con servizi remoti
(ricerca di informazioni, acquisti ecc.)
Standardizzato dal W3C
http://www.w3.org/html/
#9perTe$t Mar2up :anguage
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
HTML dichiara tipi di elementi
Per strutturare i documenti (paragrafi, liste, collegamenti
ipertestuali, immagini ecc.)
Tipo di elemento descritto da tre parti: un tag di
apertura, un contenuto e un tag di chiusura
B%a b%a6 <b*$' ,2a##e..".<5b*6 '"27a%e.
Molti tag permettono la definizione di attributi
<a /2ef01/..!855---.9'$!2.$.1*:'$;R<5a*
Tag semplici non hanno un contenuto
<$7, #2c01b%9e2$bb"'.,$f1 5*
Tag ed elementi
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
<html>
<head>
<title>Hello, world</title>
</head>
<body>
Hello, <i>world</i>!
</body>
</html>
&natomia di una pagina
Tipo di doc:
racchiude
l'intero file
Tipo di doc:
racchiude
l'intero file
ntestazione:
informazioni
descrittive
ntestazione:
informazioni
descrittive
Titolo: deve
essere nella
intestazione
Titolo: deve
essere nella
intestazione
Corpo:
parte principale,
contenuto
del doc
Corpo:
parte principale,
contenuto
del doc
HTML
HEAD BODY
TTLE
text
text text
text
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Una URL un riferimento per una risorsa
l nome della risorsa dipende interamente dal
protocollo. Per HTTP include:
Nome dell'host su cui risiede la risorsa
Numero di porta cui collegarsi (default = 80)
Percorso della risorsa sulla macchina
Frammento: riferimento ad una sezione con id univoco
all'interno della risorsa
http://www.ietf.org:80/rfc/rfc2732.txt
Uniform Re"ource :ocator
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Tag di formattazione te"to
<!*<9e#." = 9' !a2a,2af".<5!*
<!*;2$7a %$'ea.<b2 5*Aca!" 7a #.e##" !a2a,2af".<5!*
<!*Te#." <#.2"',*$' ,2a##e.."<5#.2"',*6 e !"$
<e7*$' c"2#$+"<5e7*.<5!*
</1*>% .$."%" !$? ,2a'de<5/1*
...
</6*>% .$."%" !$? !$cc"%"<5/6*
<!2e*Te#." !2ef"27a..a."8 9#a." 9' f"'. a %a2,/e@@a f$##aA
#!a@$ e aca!" !2e#e2+a.$<5!2e*
<! C"77e'." (T)L *
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
!ollegamenti e citazioni
<! $d01!a211*>% !2$7" !a2a,2af". Ba$ #9
<a /2ef01/..!855---.9'$!2.$.5$'de3./.7%#'e-#1*
:'$;R6 2$C9ad2" De-#<5a*.<5!*
<! $d01!a221*>% #ec"'d" !a2a,2af". T"2'a a%
<a /2ef01#!a211*!2$7" !a2a,2af".<5a*<5!*
<! #$ !9E a..2$b9$2e 9' $d ad ",'$ e%e7e'."6 7a
de+Fe##e2e 9'$+"c" 'e%%a !a,$'a *
<b%"c4C9".e c$.e01/..!855---.faC#."2,51*
<!*T/e BLGCH<:GTE e%e7e'. c"'.a$'# .e3. C9".ed
f2"7 a'"./e2 #"92ce.<5!*
<add2e##*<a /2ef01/..!855---.faC#."2,51*
Ia faC#."2,<5a*<5add2e##*
<5b%"c4C9".e*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
:i"te
<9%*
<%$*F$2#. $.e7<5%$*
<%$*Jec"'d $.e7<5%$*
<%$*T/$2d $.e7<5%$*
<59%*
<"%*
<%$*F$2#. $.e7<5%$*
<%$*Jec"'d $.e7<5%$*
<%$*T/$2d $.e7<5%$*
<5"%*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Le tabelle HTML servono per incasellare dati (e non
per gestire il layout dell'intera pagina!)
Sono marcate con <.ab%e*
<.ab%e* contiene righe di celle, marcate con <.2*
(dall'alto verso il basso )
Ogni <.2* contiene celle di dati, marcate con <.d*
(da sinistra a destra )
Le celle di intestazione sono marcate con <./*
Ta%elle
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
'emplice ta%ella
<.ab%e*
<.2*
<.d*'"2./-e#.<5.d*
<.d*'"2./ea#.<5.d*
<5.2*
<.2*
<.d*#"9./-e#.<5.d*
<.d*#"9./ea#.<5.d*
<5.2*
<5.ab%e*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Ta%ella con celle unite
<.ab%e*
<ca!.$"'*<$*A .e#. .ab%e -$./
7e2,ed ce%%#<5$*<5ca!.$"'*
<.2*
<./ 2"-#!a'0121*<5./*
<./ c"%#!a'0121*A+e2a,e<5./*
<./ 2"-#!a'0121*Red e&e#<5./*
<5.2*
<.2*
<./*/e$,/.<5./*
<./*-e$,/.<5./*
<5.2*
<.2*<./*)a%e#<5./*
<.d*1.9<5.d*<.d*0.003<5.d*<.d*40K<5.d*<5.2*
<.2*<./*Fe7a%e#<5./*
<.d*1.7<5.d*<.d*0.002<5.d*<.d*43K<5.d*<5.2*
<5.ab%e*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Tag per computer
Codice inline: <c"de*
Blocchi di codice: <!2e*<c"de*
nput da tastiera: <4bd*
Variabili e costanti: <+a2*
Output inline: <#a7!*
Catture di schermate testuali (blocchi di output)
<!2e*<#a7!*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Tag generici: di4- "pan
Aggiungere struttura e semantica ai documenti
#!a' raggruppa contenuto inline
d$+ raggruppa contenuto di livello blocco
Spesso assegnati attributi $d e c%a##
Non impongono nessun altro vincolo di
presentazione al contenuto
Elementi da usare assieme a fogli di stile
Per adattare i doc. html ai vari bisogni e gusti
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Id 4". cla""
Mentre uno stesso valore di c%a## pu essere
attribuito a molti elementi su una pagina...
$d deve essere unico all'interno del documento!
Non si pu applicare uno stesso valore di $d a pi
elementi
Si possono assegnare pi classi ad un solo elemento,
separate da spazio. Es.
<! c%a##01'e-# ,"##$!1*B%a b%a.<5!*
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Mar2up "emantico
Documenti privi di markup di presentazione
Definire un vocabolario di classi semantiche...
da assegnare agli elementi con attributo c%a##
la cui presentazione pu essere specificata in fogli di
stile validi per tutto il sito
ndicazioni di mozilla.org
http://www.mozilla.org/contribute/writing/markup
Accessibilit dei contenuti web
http://www.w3.org/TR/WCAG10-HTML-TECHS/
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
#tml *
Nuovi elementi di struttura
/eade2, 'a+, a2.$c%e, a#$de, f"".e2
#ec.$"', /,2"9!, de.a$%#, #977a2&
f$,92e, f$,ca!.$"'
Altri elementi
+$de", a9d$", ca'+a#, e7bed
7a24, c"77a'd, "9.!9., .$7e
!2",2e##, 7e.e2, da.a%$#.
http://dev.w3.org/html5/html4-differences/
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
!a"cading 't9le 'heet"
In principio il web era popolato di semantici tag p ed h1; ma
presto arrivarono font, center, color; le tabelle nascoste erano
in agguato; era gi scoppiata la Guerra dei Browser, tra
Netscape e IE.
Dopo specifiche W3C per HTML 4.0 e stili, tendenza a
miglior supporto di standard
CSS: migliore semantica e lavoro risparmiato!
Un solo file, esterno ai contenuti, controlla la
presentazione di molte pagine web
http://www.w3.org/Style/CSS/
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
'tili a ca"cata
Stili raccolti a cascata in "foglio di stile virtuale
Default del browser (priorit pi bassa)
Foglio di stile esterno (per molti documenti)
Foglio di stile interno (per un singolo doc.)
Stile inline (per un singolo elemento, priorit)
Gli stili non sono HTML, hanno sintassi diversa
Nota per le pagine seguenti
Contenuto dei file .html in verde
Contenuto dei file .css in blu
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Foglio di "tile e"terno
deale, soprattutto, per un sito di molte pagine
Cambiare l'aspetto, modificando un solo file
Ogni pagina deve essere collegata al file css
</ead*...<%$'4
2e%01#.&%e#/ee.1 .&!e01.e3.5c##1
/2ef017&#.&%e.c##1 5*<5/ead*
Browser formatta secondo 7&#.&%e.c##
CSS scritto con comune editor di testo:
b"d& L bac4,2"9'd8
92%M1$7a,e#5bac440.,$f1N O
! L 7a2,$'%ef.8 20!3 O
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
'inta""i degli "tili
La pi semplice regola css composta di tre parti: un
selettore, una propriet ed un valore:
#e%ec."2 L !2"!e2.&8 +a%9e O
Selettore: es. un elemento html da ridefinire
Propriet: aspetto cui assegnare nuovo valore
Es. b"d& ed elem. contenuti con testo in nero
b"d& L c"%"28 b%ac4 O
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
! L
.e3.a%$,'8 ce'.e2A
c"%"28 2edA
f"'.fa7$%&8 1#a'# #e2$f1A
O
/16 /26 /36 /46 /56 /6 L
c"%"28 2,bM06 2556 0NA
O
$7, L
f%"a.8 2$,/.A
!add$',8 5!3A
b"2de28 1!3 #"%$d #0000ffA
7a2,$'8 10!3A
O
&ttri%uti e "elettori multipli
Valore composto
da pi parole
tra virgolette
Valore composto
da pi parole
tra virgolette
Pi selettori
separati
da virgola
Pi selettori
separati
da virgola
Pi propriet
separate da
punto-e-virgola
Pi propriet
separate da
punto-e-virgola
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
.$7!"2.a'. L
.e3.a%$,'8 ce'.e2A
O
!.,"##$! L
d$#!%a&8 '"'eA
O
#-e2345 L
f"'.#$@e8 32!3A
f"'.-e$,/.8 b"%dA
f"'.#.&%e8 $.a%$cA
O
</1 c%a##01$7!"2.a'.1*
Ce'.e2ed /ead$',
<5/1*
<! c%a##01'e-# ,"##$!1*
P"##$!F# '". d$#!%a&ed.
<5!*
</1 $d01-e23451*
J"7e #!ec$f$c /ead$',
<5/1*
<! c%a##01$7!"2.a'.1*
)"2e .e3..
<5!*
'elettori di cla""e e id
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
!olori e dimen"ioni
Css1: 16 colori, come palette VGA di Windows
aqua, blac, blue, fuch!ia, "ra#, "reen, lime, maroon,
na$#, oli$e, purple, red, !il$er, teal, white, #ellow
Es. fuchsia == rgb(255, 0, 255) == #FF00FF
Dimensioni box e testo
px: in pixel (fissa rispetto risoluzione monitor)
pt: punti tipografici, 1/72 pollice
em: rispetto a dimensione font (carattere X)
%: rispetto alla dimensione (di font, o spazio)
dell'elemento genitore
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
0o$ model
margin, padding, border-width 1-4 valori
border-style none, dotted, da!hed, !olid...
border-color Colore
border-radius 1-4 valori (CSS3)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
'fondo e om%ra
background-color Colore di sfondo
background-image url(.), none
background-image linear/radial-gradient(...) (CSS3)
background-repeat repeat, repeat%x / %#, no%repeat
background-attachment !croll, fixed
background-position top left, top center...
background-size Dimensioni immagine (CSS3)
box-shadow 2-4 valori (offset-x, offset-y, blur,
distanza) + colore (CSS3)
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Te"to
color Colore del testo
font-size Dimensione
vertical-align nline, relativo alla riga di testo top,
middle, bottom, ba!eline, !ub, !uper
text-decoration none, underline, line%throu"h,
o$erline; font-style normal, italic; font-weight
normal, bold
font-family Lista con priorit di nomi o famiglie di
font (!erif, !an!%!erif, cur!i$e, fanta!#, mono!pace)
text-align left, ri"ht, center, &u!tif#
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
M
.

T
o
m
a
i
u
o
l
o


F
o
n
d
a
m
e
n
t
i

d
i

i
n
f
o
r
m
a
t
i
c
a
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
D
i
p
.

I
n
g
e
g
n
e
r
i
a

d
e
l
l
'
i
n
f
o
r
m
a
z
i
o
n
e


U
n
i
P
R
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
h
t
t
p
:
/
/

.
c
e
.
u
n
i
p
r
.
i
t
/
p
e
o
p
l
e
/
t
o
m
a
m
i
c
/
Po"izionamento
position Posizionamento relati$e, ab!olute, fixed
float Elementi flottanti left, ri"ht, none
z-index Numero (valori pi alti in primo piano)
overflow $i!ible, hidden, !croll, auto
visibility $i!ible, hidden (occupa spazio)
display bloc, inline, none (non occupa spazio)
Blocco centrato:
7a2,$'%ef.8 a9."A 7a2,$'2$,/.8 a9."A
-$d./8 50KA