Capitolo 5 adding images to your web pages. 2 JPEG.
-
Upload
vincente-cozzi -
Category
Documents
-
view
216 -
download
3
Transcript of Capitolo 5 adding images to your web pages. 2 JPEG.
![Page 1: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/1.jpg)
1
Capitolo 5adding images to your web
pages
![Page 2: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/2.jpg)
2
JPEG
![Page 3: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/3.jpg)
3
GIF
![Page 4: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/4.jpg)
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
![Page 5: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/5.jpg)
5
Possono rappresentare immagini con al massimo di 16 milioni di colori
JPEG vs GIF
Possono rappresentare immagini con “solo” 256 colori
![Page 6: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/6.jpg)
6
Non supportano la trasparenza
JPEG vs GIF
Supportano la trasparenza
![Page 7: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/7.jpg)
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
![Page 8: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/8.jpg)
8
Esercizio: myPod (1)
mypod
photos
seattle.jpg
index2.htmlindex2.html
http://www.sci.unich.it/~bista/didattica/tecnologie-web/materiale2007-08/hfhtml-esercizi/HFHTML_ch05/mypod/
![Page 9: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/9.jpg)
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
![Page 10: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/10.jpg)
10
Ridimensionamento immagini11
22
33
![Page 11: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/11.jpg)
11
Esercizio: myPod (2)
photos thumbnails index2.html
mypod
seattle_med.jpg
seattle_shuffle.jpg
seattle_downtown.jpg
![Page 12: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/12.jpg)
12
Creazione di anteprime Vedi ridimensionamento immagine
600px
400px150px
100px
seattle_med.jpg
seattle_downtown.jpg
seattle_shuffle.jpg
![Page 13: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/13.jpg)
13
Esercizio: myPod (2)
index2.html
seattle_downtown.html
seattle_med.html
seattle_shuffle.html
![Page 14: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/14.jpg)
14
Esercizio: myPod (2)
photos thumbnails index2.html
mypod
html
seattle_med.html
seattle_shuffle.html
seattle_downtown.html
![Page 15: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/15.jpg)
15
Esercizio: myPod (2)<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
photos thumbnails index2.html
mypod
html
seattle_med.htmlseattle_med.jpg
![Page 16: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/16.jpg)
16
Esercizio: myPod
photos thumbnails index2.html
mypod
html
![Page 17: Capitolo 5 adding images to your web pages. 2 JPEG.](https://reader036.fdocuments.in/reader036/viewer/2022070312/5542eb50497959361e8bfc64/html5/thumbnails/17.jpg)
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