6 Adding Images and Other Media

 

It's like what they say about the perfect picture book. The art and the text stand alone, but together, they create something even better. —Deborah Wiles

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

Online:

CSS

HTML

Understanding Image File Formats

Getting Graphics

Inserting an HTML5 Figure

HTML

Setting Up an Image as a Link

HTML

Using an Image as a Custom Bullet

CSS

HTML

Aligning Images and Text

HTML

Lesson 6.2: Working with Background Images

CSS

HTML

Controlling the Background Repeat

Setting the Background Position

Adding a Hero Image

CSS

HTML

The Background Shorthand Property

Optimizing Images

Adding Video and Audio to the Page

Web Video Formats

Web Audio Formats

Lesson 6.3: Embedding Video in a Web Page

HTML

HTML

Lesson 6.4: Embedding Audio in a Web Page

HTML

HTML

Summary