17
1 Capitolo 5 adding images to your web pages
| Date post: | 01-May-2015 |
| Category: |
Documents |
| Upload: | vincente-cozzi |
| View: | 215 times |
| Download: | 3 times |
1
Capitolo 5adding images to your web
pages
2
JPEG
3
GIF
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
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
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/
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
Ridimensionamento immagini11
22
33
11
Esercizio: myPod (2)
photos thumbnails index2.html
mypod
seattle_med.jpg
seattle_shuffle.jpg
seattle_downtown.jpg
12
Creazione di anteprime Vedi ridimensionamento immagine
600px
400px150px
100px
seattle_med.jpg
seattle_downtown.jpg
seattle_shuffle.jpg
13
Esercizio: myPod (2)
index2.html
seattle_downtown.html
seattle_med.html
seattle_shuffle.html
14
Esercizio: myPod (2)
photos thumbnails index2.html
mypod
html
seattle_med.html
seattle_shuffle.html
seattle_downtown.html
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
16
Esercizio: myPod
photos thumbnails index2.html
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
