Table Of Content“Unlike all the other books that start at the beginning, this one
will get you to the good stuf, fast. Jennifer will explain every
step you need, including some very advanced concepts.”
—JEN SIMMONS, MOZILLA AND W3C CSS WORKING GROUP
Learning
Web Design
A BEGINNER'S GUIDE TO HTML, CSS,
JAVASCRIPT, AND WEB GRAPHICS
Jennifer Niederst Robbins
5TH EDITION
Whether you’re a beginner or bringing your skills up to date, this book gives you a solid footing in
modern web production. I teach each topic visually at a pleasant pace, with frequent exercises
to let you try out new skills. Reading it feels like sitting in my classroom! —Jennifer Robbins
Fifth Edition
LEARNING WEB DESIGN
A BEGINNER’S GUIDE TO HTML, CSS,
JAVASCRIPT, AND WEB GRAPHICS
Jennifer Niederst Robbins
Beijing • Boston • Farnham • Sebastopol • Tokyo
Learning Web Design, Fifth Edition
A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
by Jennifer Niederst Robbins
Copyright © 2018 O’Reilly Media, Inc. All rights reserved.
Printed in Canada.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also avail-
able for most titles (oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-
9938 or
CONTENTS
FOREWORD .... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
PREFACE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Part I. GETTING STARTED
1. Getting Started in Web Design .......................................... 3
Where Do I Start? ............................................................................. 4
It Takes a Village (Website Creation Roles) ........................................ 4
Gearing Up for Web Design ............................................................ 14
What You’ve Learned ...................................................................... 20
Test Yourself ................................................................................... 20
2. How the Web Works ........................................................ 21
The Internet Versus the Web ........................................................... 21
Serving Up Your Information .......................................................... 22
A Word About Browsers .................................................................. 23
Web Page Addresses (URLs) ............................................................ 24
The Anatomy of a Web Page ............................................................ 27
Putting It All Together ..................................................................... 32
Test Yourself ................................................................................... 34
3. Some Big Concepts You Need to Know ............................ 35
A Multitude of Devices ................................................................... 36
Sticking with the Standards ............................................................. 38
Progressive Enhancement ................................................................ 38
iii
Responsive Web Design .................................................................. 40
One Web for All (Accessibility) ....................................................... 42
The Need for Speed (Site Performance) ............................................ 44
Test Yourself ................................................................................... 46
Part II. HTML FOR STRUCTURE
4. Creating a Simple Page ................................................... 49
A Web Page, Step-By-Step ............................................................... 49
Launch a Text Editor ....................................................................... 50
Step 1: Start with Content ............................................................... 53
Step 2: Give the HTML Document Structure ................................... 55
Step 3: Identify Text Elements ......................................................... 59
Step 4: Add an Image ...................................................................... 62
Step 5: Change the Look with a Style Sheet ..................................... 66
When Good Pages Go Bad .............................................................. 67
Validating Your Documents ............................................................. 68
Test Yourself ................................................................................... 70
Element Review: HTML Document Setup ...................................... 70
5. Marking Up Text .............................................................. 71
Paragraphs ...................................................................................... 71
Headings ......................................................................................... 72
Thematic Breaks (Horizontal Rule) .................................................. 74
Lists ................................................................................................ 74
More Content Elements ................................................................... 78
Organizing Page Content ................................................................. 82
The Inline Element Roundup ........................................................... 88
Generic Elements (div and span) ...................................................... 98
Improving Accessibility with ARIA ............................................... 102
Character Escapes ......................................................................... 105
Putting It All Together ................................................................... 108
Test Yourself ..................................................................................111
Element Review: Text Elements ..................................................... 112
iv Contents
6. Adding Links ................................................................. 113
The href Attribute ..........................................................................114
Linking to Pages on the Web ......................................................... 115
Linking Within Your Own Site ......................................................116
Targeting a New Browser Window ................................................ 126
Mail Links .................................................................................... 127
Telephone Links ............................................................................ 128
Test Yourself ................................................................................. 128
Element Review: Links .................................................................. 130
7. Adding Images .............................................................. 131
First, a Word on Image Formats .................................................... 132
The img Element ........................................................................... 134
Adding SVG Images ...................................................................... 139
Responsive Image Markup ............................................................ 146
Whew! We’re Finished .................................................................. 159
Test Yourself ................................................................................. 159
Element Review: Images ................................................................162
8. Table Markup ................................................................ 163
How to Use Tables ........................................................................ 163
Minimal Table Structure ............................................................... 165
Table Headers ............................................................................... 167
Spanning Cells .............................................................................. 168
Table Accessibility .........................................................................169
Row and Column Groups ...............................................................171
Wrapping Up Tables ...................................................................... 173
Test Yourself ..................................................................................175
Element Review: Tables ..................................................................176
9. Forms ........................................................................... 177
How Forms Work.......................................................................... 177
The form Element ...........................................................................179
Variables and Content ................................................................... 182
The Great Form Control Roundup................................................. 183
Form Accessibility Features ........................................................... 203
Contents v
Form Layout and Design ............................................................... 206
Test Yourself ................................................................................. 208
Element Review: Forms ................................................................. 209
10. Embedded Media .......................................................... 215
Window-In-A-Window (iframe) .................................................... 215
Multipurpose Embedder (object) ....................................................218
Video and Audio ........................................................................... 219
Canvas .......................................................................................... 228
Test Yourself ................................................................................. 233
Element Review: Embedded Media ................................................ 234
Part III. CSS FOR PRESENTATION
11. Introducing Cascading Style Sheets .............................. 239
The Benefits of CSS ....................................................................... 239
How Style Sheets Work ................................................................. 240
The Big Concepts .......................................................................... 246
CSS Units of Measurement ............................................................ 253
Developer Tools Right in Your Browser ......................................... 256
Moving Forward with CSS ............................................................ 258
Test Yourself ................................................................................. 259
12. Formatting Text ............................................................ 261
Basic Font Properties ..................................................................... 261
Advanced Typography with CSS3 .................................................. 277
Changing Text Color ..................................................................... 280
A Few More Selector Types ........................................................... 281
Text Line Adjustments .................................................................. 287
Underlines and Other “Decorations” ............................................. 290
Changing Capitalization ................................................................ 291
Spaced Out ................................................................................... 292
Text Shadow ................................................................................. 293
Changing List Bullets and Numbers .............................................. 296
Test Yourself ................................................................................. 299
CSS Review: Font and Text Properties ........................................... 301
vi Contents
13. Colors and Backgrounds ............................................... 303
Specifying Color Values ................................................................. 303
Foreground Color ...........................................................................311
Background Color ......................................................................... 312
Clipping the Background ................................................................314
Playing with Opacity ..................................................................... 315
Pseudo-Class Selectors ...................................................................316
Pseudo-Element Selectors .............................................................. 320
Attribute Selectors ......................................................................... 323
Background Images ........................................................................324
The Shorthand background Property ............................................. 338
Like a Rainbow (Gradients) ........................................................... 340
Finally, External Style Sheets ......................................................... 348
Wrapping It Up ............................................................................. 351
Test Yourself ................................................................................. 352
CSS Review: Color and Background Properties .............................. 354
14. Thinking Inside the Box ................................................ 355
The Element Box ........................................................................... 355
Specifying Box Dimensions ........................................................... 356
Padding ........................................................................................ 361
Borders ......................................................................................... 366
Margins .........................................................................................376
Assigning Display Types ................................................................ 380
Box Drop Shadows ........................................................................ 382
Test Yourself ................................................................................. 384
CSS Review: Box Properties .......................................................... 384
15. Floating and Positioning ............................................... 387
Normal Flow ................................................................................. 387
Floating ........................................................................................ 388
Fancy Text Wrap with CSS Shapes ............................................... 399
Positioning Basics .......................................................................... 405
Relative Positioning ....................................................................... 407
Absolute Positioning ...................................................................... 408
Fixed Positioning ............................................................................416
Contents vii
Test Yourself ..................................................................................417
CSS Review: Floating and Positioning Properties ............................418
16. CSS Layout with Flexbox and Grid ................................. 419
Flexible Boxes with CSS Flexbox ....................................................419
CSS Grid Layout ........................................................................... 447
Test Yourself ................................................................................. 478
CSS Review: Layout Properties ...................................................... 482
17. Responsive Web Design ................................................ 485
Why RWD? ................................................................................... 485
The Responsive Recipe .................................................................. 486
Choosing Breakpoints ................................................................... 495
Designing Responsively ................................................................. 499
A Few Words About Testing .......................................................... 512
More RWD Resources ....................................................................514
Test Yourself ..................................................................................516
18. Transitions, Transforms, and Animation ....................... 517
Ease-y Does It (CSS Transitions) .....................................................517
CSS Transforms ............................................................................ 527
Keyframe Animation ..................................................................... 536
Wrapping Up ................................................................................ 542
Test Yourself ................................................................................. 542
CSS Review: Transitions, Transforms, and Animation ................... 545
19. More CSS Techniques .................................................... 547
Styling Forms ................................................................................ 547
Styling Tables ................................................................................ 551
A Clean Slate (Reset and Normalize.css) ........................................ 554
Image Replacement Techniques ..................................................... 556
CSS Sprites .................................................................................... 557
CSS Feature Detection................................................................... 559
Wrapping Up Style Sheets ............................................................. 564
Test Yourself ................................................................................. 564
CSS Review: Table Properties ........................................................ 566
viii Contents
