Capitolo 5
adding images to your web pages
JPEG
2
GIF
3
JPEG vs GIF
Sono usate per immagini
con molti colori, come le
fotografie
Sono usate per immagini
con pochi colori e a tinte
piatte, come i loghi
4
JPEG vs GIF
Possono rappresentare
immagini con al massimo
di 16 milioni di colori
Possono rappresentare
immagini con “solo” 256
colori
5
JPEG vs GIF
Non supportano la
trasparenza
Supportano la
trasparenza
6
Attributi di <img>
<img src=“images/pencil.gif”
alt=“Pencil line 35 miles long” />
<img src=“images/drinks.gif”
width=“48” height=“100” />
height
width
7
Esercizio: myPod (1)
mypod
photos
index2.html
seattle.jpg
http://www.sci.unich.it/~bista/didattica/tecnologie-web/
materiale2007-08/hfhtml-esercizi/HFHTML_ch05/mypod/
8
Esercizio: myPod (1)
index2.html
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da; }
</style>
</head>
<body>
<h1>Welcome to myPod</h1>
<p>Welcome to the place to show off your iPod, wherever you might
be. Wanna join the fun? All you need is any iPod, from the early
classic iPod to the latest iPod Nano, the smallest iPod Shuffle
to the largest iPod Photo, and a digital camera. Just take a
snapshot of your iPod in your favorite location and we'll be
glad to post it on myPod. So, what are you waiting for?
</p>
<h2>Seattle, Washington</h2>
<p>Me and my iPod in Seattle! You can see rain clouds and the
Space Needle. You can't see the 628 coffee shops.
</p>
</body>
</html>
Aggiungere l’immagine seattle.jpg
9
Ridimensionamento immagini
10
Esercizio: myPod (2)
mypod
photos
thumbnails
index2.html
seattle_med.jpg
seattle_shuffle.jpg
seattle_downtown.jpg
11
Creazione di anteprime
Vedi ridimensionamento immagine
150px
400px
seattle_med.jpg
100px
seattle_downtown.jpg
600px
seattle_shuffle.jpg
12
Esercizio: myPod (2)
seattle_downtown.html
index2.html
seattle_shuffle.html
seattle_med.html
13
Esercizio: myPod (2)
mypod
photos
thumbnails
html
index2.html
seattle_med.html
seattle_shuffle.html
seattle_downtown.html
14
Esercizio: myPod (2)
seattle_med.html
<html>
<head>
<title>myPod: Seattle Ferry</title>
<style type="text/css">
body { background-color: #eaf3da; }
</style>
</head>
<body>
<h1>Seattle Ferry</h1>
<p>
<img src="../photos/seattle_med.jpg"
alt="An iPod on the Seattle ferry“ />
</p>
</body>
</html>
mypod
photos
seattle_med.jpg
thumbnails
html
seattle_med.html
index2.html
15
Esercizio: myPod
mypod
photos
thumbnails
html
index2.html
16
Esercizio: myPod
index2.html
…
<p>
<a href="html/seattle_med.html">
<img src=“thumbnails/seattle_med.jpg"
alt="My iPod in Seattle, WA“ />
</a>
…
</p>
…
17
Scarica
