Web Design Web Learning Jennifer Niederst Robbins Niederst Jennifer JAVASCRIPT, WEB AND GRAPHICS TO CSS, GUIDE HTML, A BEGINNER'S “Unlike other allthe books start that thisone beginning, atthe step you some need, very including advanced concepts.” will getyou to goodstuff, the fast. Jennifer will explain every —JEN SIMMONS, MOZILLA ANDW3C CSS WORKING GROUP
5TH EDITION 5TH
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 [email protected].
EDITORS: Meg Foley and Jeff Bleiel
PRODUCTION EDITOR: Kristen Brown
COVER DESIGNER: Edie Freedman
INTERIOR DESIGNER: Jennifer Robbins
PRINT HISTORY: March 2001: First edition. June 2003: Second edition. June 2007: Third edition. August 2012: Fourth edition. May 2018: Fifth edition.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. “O’Reilly Digital Studio” and related trade dress are trademarks of O’Reilly Media, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either regis- tered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trade- marks. Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim, the designa- tions have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-1-491-96020-2 [TI] [2018-11-30] 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)...... 553 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
20. Modern Web Development Tools...... 567 Getting Cozy with the Command Line...... 567 CSS Power Tools (Processors)...... 572 Build Tools (Grunt and Gulp)...... 578 Version Control with Git and GitHub...... 581 Conclusion...... 588 Test Yourself...... 589
Part IV. JAVASCRIPT FOR BEHAVIOR
21. Introduction to JavaScript...... 593 What Is JavaScript?...... 593 Adding JavaScript to a Page...... 597 The Anatomy of a Script...... 598 The Browser Object...... 612 Events...... 613 Putting It All Together...... 616 Learning More About JavaScript...... 617 Test Yourself...... 619
22. Using JavaScript...... 621 Meet the DOM...... 621 Polyfills...... 630 JavaScript Libraries...... 632 Big Finish...... 637 Test Yourself...... 637
Part V. WEB IMAGES
23. Web Image Basics...... 641 Image Sources...... 641 Meet the Formats...... 644 Image Size and Resolution...... 657 Image Asset Strategy...... 660 Favicons...... 665
Contents ix
Summing Up Images...... 668 Test Yourself ...... 668
24. Image Asset Production...... 671 Saving Images in Web Formats...... 671 Working with Transparency...... 676 Responsive Image Production Tips...... 680 Image Optimization...... 691 Test Yourself...... 701
25. SVG ...... 703 Drawing with XML...... 705 Features of SVG as XML...... 713 SVG Tools...... 718 SVG Production Tips...... 721 Responsive SVGs...... 724 Further SVG Exploration...... 731 Test Yourself ...... 731 And...We’re Done!...... 733
Part VI. APPENDICES
A. Answers...... 737
B. HTML5 Global Attributes...... 753
C. CSS Selectors, Levels 3 and 4...... 755
D. From HTML+ to HTML5...... 759
INDEX...... 767
x Contents FOREWORD BY JEN SIMMONS
If you travel to Silicon Valley and navigate between the global headquarters of some of the world’s most famous internet companies, you can head to the Computer History Museum. Wander through the museum, past the ancient mainframes and the story of the punch card, and you’ll eventually find yourself at the beginning of the Wide World Web. There’s a copy of the Mosaic browser on a floppy disk tucked in a book of the same name, a copy of Netscape Navigator that was sold in a box, and something called “Internet in a Box,” the #1 best-selling internet solution for Windows. Then there are the websites. Some of the earliest, most notable, and most important websites are on permanent display, including something called the “Global Network Navigator,” from 1993. It was designed by none other than the author of this book, Jennifer Robbins. Long before most of us had any idea the web existed, or even before many of you were born, Jen was busy designing the first com- mercial website. She’s been there from the very beginning, and has watched, taught, and written about every stage of evolution of the web. Learning Web Design is now in its 5th edition, with a gazillion new pages and updates from those early days. I am constantly asked, “What are the best resources for learning web technol- ogy?” I learned by reading books. Blog posts are great, but you also need an in-depth comprehensive look at the subject. In the beginning, all books were beginner books, teaching HTML, URLs, and how to use a browser. When CSS came along, the books assumed you’d already been using HTML, and taught you how to change to the new techniques. Then CSS3 came along, and all the books taught us how to add new CSS properties to our preexist- ing understanding of CSS2. Of course there were always books for beginners, but they were super basic. They never touched on professional techniques for aspiring professionals. Each new generation of books assumed that you had prior knowledge. Great for those of us in the industry. Tough for anyone new.
xi Foreword
But how in the world are you supposed to read about two decades of tech- niques, discarding what is outdated, and remembering what is still correct? How are you supposed to build a career from knowledge that’s so basic that you have no idea what real pros code in their everyday jobs? You can’t. That’s why today when people ask me for a book recommendation, I have only one answer. This book. This book you are reading now doesn’t require any prior knowledge. You don’t need to have made a web page before, or to have any idea where to get a code editor. It starts at the very beginning. And yet, unlike all the other books that start at the beginning, this one will get you to the good stuff, fast. Jen will explain every step you need, including some very advanced concepts. She’s packed this book full of cutting edge, insider knowledge from top experts. I honestly don’t know how she does it. How can someone teach the basics and the advanced stuff at the same time? Usually you’ll learn those things years apart, with lots of struggling in the dark in the meantime. Here, Jen will lift you up from wherever you are in your journey, and take you farther. Every one of us—myself included, and I’m on the CSS Working Group (the group of people who invent new CSS)—can learn a lot from this book. I do every time I pick it up. Pay attention to the notes in the margins. Read the websites she recommends, watch the videos. Jen is giving you a shortcut to a professional network. Follow the people she mentions. Read the links they suggest. These might be your future colleagues. Dare to dream that you will meet them. They are, after all, only a tweet away. It is a small world, full of real people, and you can become part of it all. This book will get you started. —Jen Simmons Designer and Developer Advocate at Mozilla Member of the CSS Working Group April 2018
xii Learning Web Design