Coursera Plus Annual is 40% Off — Ends July 13.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

HTML: Images and Figures

via LinkedIn Learning

Write review
Simplilearn Ad

Build GenAI Apps from Scratch — UCSB PaCE Certificate Program

Learn More → Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Explore the many ways to present graphics on web pages. Discover how to make your graphics accessible, reliably placed, and a smooth fit for a variety of different screens.

Syllabus

Introduction
  • Welcome
  • What you should know
  • Setting up your computer
1. Image Essentials
  • Using the img element and src attribute
  • Accessibility: alt and title attributes
  • Image size: Width and height
  • Obtaining images
2. Image Formats
  • Image format overview
  • GIF and PNG: The format for line art
  • JPEG: The format for photos
  • SVG: The format for vector line art
3. Images and CSS
  • Borders, padding, and spacing
  • Alignment
  • Challenge: Images and text
  • Solution: Images and text
  • Special effects
  • Background images
4. Responsive Images
  • Resolution and pixel density
  • Handling pixel density
  • Using srcset and sizes
  • Testing screen resolutions
  • Challenge: Use srcset
  • Solution: Use srcset
  • Art direction: The picture element
5. Figures
  • Using figure and figcaption elements
  • Autonumbering figures with CSS
Conclusion
  • Next steps

Taught by

J. David Eisenberg

Reviews

4.6 rating at LinkedIn Learning based on 174 ratings

Start your review of HTML: Images and Figures

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.