6 Adding Images and Other Media
This chapter covers
- Embedding an image on a web page
- Working with background images
- Optimizing images for the web
- Adding videos, music, and other media
When you come across a page that’s nothing but text, how does it make you feel? It probably makes you feel disappointed or perhaps even sad. Unless the text is absorbing and the typography exceptionally good, it also probably makes you want to click the Back button and look for some place where your sore eyes can catch a break. You don’t want people feeling disappointed, sad, or eager to leave your site, so throw them a visual bone or two by sprucing up your pages with images and perhaps even a video once in a while. In this chapter, I show you how it’s done.
Lesson 6.1: Adding an Image to the Page
Covers: The img element
So far in this book, you’ve seen that the innards of a web page are text with a few HTML tags and CSS rules sprinkled strategically here and there. So, you may be wondering how images fit into this text-only landscape. The short answer is that they don’t! Unlike with a word processing document or a presentation, you don’t insert images directly into a web page. Instead, you upload the image as a separate file to your website and then insert into your page text a special HTML tag that tells the browser where to locate the image. Then the browser retrieves the file from the server and displays the image on the page in the location you specified.