Head First html and css

table
 
of
 
contents

---

xiv
 
5
Meeting the Media
adding images to your pages
Here’s one pixel.
Here’s a lot 
of pixels that 
together make up 
the upper part of 
the right wing of 
the butterfly.
This image is made up 
of thousands of pixels 
when it’s displayed on 
a computer screen.
Smile and say “cheese.” Actually, smile and say “gif,” 
“jpg,” or “png”
—
these are going to be your choices when “developing 
pictures” for the Web. In this chapter you’re going to learn all about adding your 
first media type to your pages: images. Got some digital photos you need to get 
online? No problem. Got a logo you need to get on your page? Got it covered. 
But before we get into all that, don’t you still need to be formally introduced to 
the element? So sorry, we weren’t being rude; we just never saw the “right 
opening.” To make up for it, here’s an entire chapter devoted to . By the end 
of the chapter you’re going to know all the ins and outs of how to use the  
element and its attributes. You’re also going to see exactly how this little element 
causes the browser to do extra work to retrieve and display your images. 
How the browser works with images 
 
 
 
164
How 
images 
work 
167

: it’s not just relative links anymore 
 
 
171
Always 
provide 
an 
alternative 
173
Sizing 
up 
your 
images 
174
Creating the ultimate fan site: myPod
 
 
175
Whoa! The image is way too large 
 
 
 
178
Open 
the 
image 
182
Resizing 
the 
image 
183
Fixing up the myPod HTML
 
 
 
188
More 
photos 
for 
myPod 
190
Turning the thumbnails into links 
 
 
 
196
Create individual pages for the photos
 
 
197
So, how do I make links out of images?
 
 
198
What format should we use?
 
 
 
203
To be transparent, or not to be transparent? That is the question… 204
Wait, what is the color of the web page background? 
 
206
Check out the logo with a matte 
 
 
 
207
Add the logo to the myPod web page
 
 
208
Exercise 
Solutions 
213