Capitolo 5adding images to your web pages

(1)

Capitolo 5

adding images to your web pages

(2)

2

JPEG

(3)

GIF

(4)

4

 Sono usate per immagini con molti colori, come le fotografie

JPEG vs GIF

 Sono usate per immagini con pochi colori e a tinte piatte, come i loghi

(5)

 Possono rappresentare immagini con al massimo di 16 milioni di colori

JPEG vs GIF

 Possono rappresentare immagini con “solo” 256 colori

(6)

6

 Non supportano la trasparenza

JPEG vs GIF

 Supportano la trasparenza

(7)

Attributi di <img>

<img src=“images/pencil.gif”

alt=“Pencil line 35 miles long” />

<img src=“images/drinks.gif”

width=“48” height=“100” />

width height

(8)

8

Esercizio: myPod (1)

mypod

photos

seattle.jpg

index2.html index2.html

http://www.sci.unich.it/~bista/didattica/tecnologie-web/

materiale2007-08/hfhtml-esercizi/HFHTML_ch05/mypod/

(9)

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

Esercizio: myPod (1) index2.html

Aggiungere l’immagine seattle.jpg

(10)

10

Ridimensionamento immagini

11

22

33

(11)

photos thumbnails index2.html mypod

seattle_med.jpg seattle_shuffle.jpg seattle_downtown.jpg

(12)

12

Creazione di anteprime

 Vedi ridimensionamento immagine

600px

400px 150px

100px

seattle_med.jpg

seattle_downtown.jpg

seattle_shuffle.jpg

(13)

index2.html

seattle_downtown.html

seattle_med.html seattle_shuffle.html

(14)

14

photos thumbnails index2.html

mypod

html

seattle_med.html seattle_shuffle.html seattle_downtown.html

(15)

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

seattle_med.html

mypod

html

(16)

16

Esercizio: myPod

mypod

html

(17)

Esercizio: myPod

…

<p>

<a href="html/seattle_med.html">

<img src=“thumbnails/seattle_med.jpg"

alt="My iPod in Seattle, WA“ />

</a>

…

</p>

…

index2.html