5T H 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 Jennifer Niederst Robbins N A BEGINNER'S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS IO Learning Web Design IT —JEN SIMMONS, MOZILLA AND W3C CSS WORKING GROUP ED “Unlike all the other books that start at the beginning, this one will get you to the good stuff, fast Jennifer will explain every step you need, including some very advanced concepts.” 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 available for most titles (oreilly.com/safari) For more information, contact our corporate/institutional sales department: 800-9989938 or corporate@oreilly.com EDITORS:   Meg Foley and Jeff Bleiel PRODUCTION EDITOR:   Kristen COVER DESIGNER:   Edie Brown 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’ReillyMedia, Inc Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either registered 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 trademarks Where those designations appear in this book, and O’ReillyMedia, Inc was aware of a trademark claim, the designations 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-04-16] CONTENTS FOREWORD xi PREFACE xiii Part I.  GETTING STARTED Getting Started in Web Design Where Do I Start? It Takes a Village (Website Creation Roles) Gearing Up for Web Design 14 What You’ve Learned 20 Test Yourself 20 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 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 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 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  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 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 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 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 Index GitHub Desktop tool 588 GitHub service 581–582, 588 GitLab service 581 Git program about 581 additional resources 583, 587–588 how Git works 582–587 reasons for using 581–582 terminology for 582–586 Glide script 664 global attributes (HTML5) 101–102, 753–754 globally scoped variables 611–612 GMT (Greenwich Mean Time) 94 Google Brotli algorithm 724–725 color picker 307–308, 310, 325 element names study 82 Make the Web Faster information 46 PageSpeedInsights tool 46 site performance survey 44 Web Fonts service 265, 268, 364 graceful degradation 38 gradient line 341 gradient ray 343 gradients about 311, 340–341, 662 browser support 345–347 designing 347–348 linear 341–343 processor power 383 radial 340, 343–344 repeating 345 Graham, Geoff 521 graphic (visual) design 9–10, 17–18 greater than or equal to (>=) operator 603 greater than sign (>) 106, 603 Green, Tom 220 Greenwich Mean Time (GMT) 94 grid and grid containers about 449, 451–452 analysis tools for 454 defining grid areas 458–459 defining grid tracks 452–457 flexible grids 488–489 grid shorthand property 459–460, 471, 478, 483 implicit grid behavior 468–471 nesting 449 placing grid items 463–468 properties listed 478, 483–484 repeating track sizes 457–458 RWD and 487–489 776 Index setting display property 451 setting up 451–462 spacing between tracks 472–478 terminology for 449–451 tools supporting 461–462 grid-area property 465–467, 478, 484 grid areas about 450 aligning items within 473–474 defining 458–459, 466 positioning items by 465–468 grid-auto-columns property 468–469, 478, 483 grid-auto-flow property 470–471, 478, 483 grid-auto-rows property 468–470, 478, 483 grid cells about 450–451 aligning items in 472–474 items flowing into 453, 463, 470–471 items spanning 463 margins and 474 grid-column-end property 463–465, 478, 484 grid-column-gap property 472–473, 478, 483 grid-column property 465, 478, 484 grid columns about 450 implicit grid behavior 468–471 spacing between tracks 472 spanning 464 grid-column-start property 463–465, 478, 484 grid-gap property 472, 478, 483 Grid Inspector 453–454, 461–462 grid items about 449–451 aligning 472–476 changing order of 469 flow direction and density 470 implicit grid behavior 468–470 margins and 474 overlapping 469 placing 463–468 properties listed 478, 484 Grid Layout Module about 394, 447–448 browser support 448–449 declaring grid display 451 how Grid Layout works 449 implicit grid behavior 468–471 language direction dependence 422 online resources 478 properties listed 483–484 setting up the grid 451–462 terminology for 449–451 grid lines about 450 numbers and names 453–454, 457–459, 462–464 positioning items using 463–465 grid media feature 493 grid property 459–460, 471, 478, 483 grid-row-end property 463–464, 478, 484 grid-row-gap property 472, 478, 483 grid-row property 465, 478, 484 grid rows about 450 implicit grid behavior 468–471 spacing between tracks 472 spanning 464 grid-row-start property 463–464, 478, 484 grid-structural selector 758 grid-template-areas property 458–459, 465, 478, 483 grid-template-columns property 452– 460, 478, 483 grid-template property 460, 478, 483 grid-template-rows property 452–455, 457–461, 478, 483 grid tracks about 450–451 aligning 475–476 content-based sizing 456–457 defining 452–454 repeating track sizes 457–458 spacing between 472 specifying track size values 455–457 Grigsby, Jason 159, 507, 664, 685, 690 grouped selectors 252–253, 281, 316 Grunt task runner 346, 577–579, 699 Gulp task runner 577–579, 699 Gustafson, Aaron 39, 190 Gzip tool 724 H h1 (heading level 1) element 112 h2 (heading level 2) element h3 (heading level 3) element h4 (heading level 4) element h5 (heading level 5) element h6 (heading level 6) element 62, 72–73, 72–73, 112 72–73, 112 72–73, 112 72, 112 72, 112 Index H.264 video codec 220, 224 halos 677–678 Halvorson, Kristina 5, 500 Handbrake video tool 222 Handlebars tool 580 hanging indent 288–289 hanging-punctuation property 294, 301 hardware pixels 147–148 Hartl, Michael 571–572 hashes (Git ID) 583 :has() selector 758 Hay, Stephen 37, 515 head commit (Git) 584 head element about 70 in document structure 57–59, 246–247 style element and 245, 268–269 header element 82–84, 112 headers table 167, 170–171 web pages 82–84 headers attribute td element 171, 176 th element 176 headings 72–74 Head, Val 538 hearing impairment 42 height attribute canvas element 234 embed element 234 iframe element 216, 234 img element 137, 162, 490 input element types 212 object element 235 svg element 707, 724–726 video element 223, 235 height media feature 493 height property 357, 386, 520 HEVC (High Efficiency Video Coding) 220 hexadecimal numbering system 308– 309 Hicks, John 667 hidden global attribute 101, 753 hidden input control 198, 210, 212 high attribute, meter element 202, 210 high-density displays 147–149, 658–659, 686–690 High Efficiency Video Coding (HEVC) 220 highlighted text 89, 94 history property, window object 613 Hivelogic Enkoder Form 127 Hixon, Jeremy 576 HLS (HTTP Streaming Video) 221 Hogan, Lara 46, 512 home directory 571 horizontal rule (thematic breaks) 62, 74 horizontal text alignment 289–290 hostname 25 hotlinking images 135 hover media feature 493 :hover selector about 317–319, 756 SVG and 141 transforms and 527 triggering transitions 518 href attribute a element 84, 114–128, 130, 132 link element 350 hr (horizontal rule) element 62, 74, 112 HSB color model 307, 310 HSLa color model 309, 311 HSL color model 307, 309–311, 317 htaccess file 133 HTML5 API support 764–765 browser support 82 global attributes 101–102, 753–754 history of 29, 762 markup component 763 organizing page content 82–87 validating 763 web standards 71, 83 XML serialization of 763 HTML5 Shiv script 82–83, 631 HTML documents anatomy of 27–33 attaching styles to 241–243 creating in Notepad 51 creating in TextEdit 52 inheritance considerations 246–247 marking up by hand 50 parsing 30, 32 recommended minimal structure 56–58 Responsive Web Design 40–41 site performance and 44 structuring 11, 31, 55–59, 241–242 SVG considerations 141–142 validating 68–69, 763 html element about 57–59, 70 in document structure 246–247 lang attribute 97 HTML (Hypertext Markup Language) about 29 adding images 62–65, 131–162 adding links 113–130 browser rendering engines 24, 30–31 capitalization in 56 checking browser support 156 creating simple pages 49–70 designer familiarity with 10 DOM support 621 embedded media 215–235 forms 31, 43, 177–213 frontend development 10–11 history of 759–762 obsolete elements 89 table markup 163–176 text markup 71–112 web standards 38 HTML tags See tags HTTP headers 32, 57 HTTP (HyperText Transfer Protocol) about 21 browsers and 23–24 server software and 22–23 URLs and 24–27 HTTP requests/responses 32–33, 44, 133 HTTPS protocol 25–26, 181 HTTP status codes 32 HTTP Streaming Video (HLS) 221 HTTP (web) servers 22 hub model (Git) 582 hue (HSL color model) 309 hypertext links See a (anchor) element Hypertext Markup Language See HTML HyperText Transfer Protocol See HTTP hyphen-separated attribute value selector 323, 756 hyphens property 294, 301 I i18n (internationalization) 97 IANA.org website 226 ICC color profiles 652, 655, 698 icons adaptive 731 creating 667 favicons 665–667 finding for web pages 644 Icon Slate tool 666 identical to (===) operator 603–604 id global attribute about 100–102, 753 accessing nodes by 624 datalist element and 189 explicitly assigned form labels 203 Index 777 Index fragment identifier 124–125 ID selector and 243, 282 Microformat standard and 103 idiomatic JavaScript 605 id reference 282 ID selectors about 243, 282–284, 316, 755 jQuery and 636 specificity and 249, 284–285 if/else statements 604–606 iframe (inline frame) element about 215–216 embedding videos with 217 sandbox attribute 217, 234 SVG considerations 143, 727 IIFE (Immediately Invoked Functional Expression) 612 IIS (Internet Information Services) 22, 180 i (italic) element 89–91, 106, 112 Ilic, Manoela 542 Illustrator (Adobe) 17, 142, 642, 687–688, 718 ImageAlpha tool 694–695 image asset production about flowchart strategy for 660–665 image optimization 9, 691–700 responsive image production tips 680–690 saving images in web formats 671–676 working with transparency 676–680 image buttons 190, 212 image editors image format support 672–674 image resolution 657–658 optimizing file sizes 693–698 resizing images 672, 684 RGB color mode 306–307, 675 saving images in web formats 671–672 vector illustration tools 718–720 web-based 17 image formats about 132–133, 644–645 choosing best 656 compression and 646–647, 651, 653, 693 cumulative image quality loss 646 GIF See GIF format JPEG See JPEG format Photoshop support 672 PNG See PNG format providing alternative 155 RGB color model and 644, 675 saving images in GIMP 671, 673–674 778 Index saving images in Photoshop CC 671–673 SVG See SVG transparency and 647, 650–651, 653, 678–680 WebP 132, 645, 654–656 image markup 134–137 See also responsive images imagemin plug-in 699 ImageOptim tool 699 image resolution 657–658 images accessibility considerations 136 adding 62–65, 131–162 adding SVGs 139–145 background 324–340 background origin 331–333 caching image files 136 CSS sprites 557–559 external 132–133 favicons 665–667 image asset production See image asset production image-based text wraps 400 image formats See image formats image replacement techniques 556–557 image size and resolution 657–660 image sources 641–644 optimizing 9, 691–700 permissions for using 135 providing dimensions for 137 resizing 137, 664, 684 responsive image markup 146–158 rotating 528–529 RWD and 487, 490–491 site performance and 44 SVG See SVG transparent 400 writing pathnames to 123 img (image) element about 30–32, 134–135 alt attribute 136, 149, 162, 556 default image alignment 135–136 as empty element 56, 62–63, 134 as replaced element 135–136 required attributes in 134 src attribute 134–135, 149, 162 srcset attribute 148–150, 152, 162 SVG considerations 140–141, 144, 709, 714, 727–728 troubleshooting problems 68 usemap 162 width attribute 137, 162, 490 Immediately Invoked Functional Expression (IIFE) 612 implicit animation 537 See transitions implicit association (form labels) 203 !important indicator 250 importing external style sheets 350 @import rule 245, 251, 349–350 :indeterminate selector 758 index (default) file 26–27, 584 indexed color 648, 653, 697 indexed numbers (arrays) 603 index of files (Git) 584 Information Architect Information Designer inheritance about 246 box-sizing attribute and 360 color and 281, 311–312 document structure and 246–247 parents and children 247 properties and 247–248 in (inch) unit 253–254 initial containing block 409 initial-scale attribute, meta element 488 Inkscape editor 719 inline (horizontal) axis 450–451 inline (phrasing) elements about 61, 72, 134 backstory of 89 as containing blocks 410 floating 390–391 lists of supported 88–98 margins on 379 non-replaced 135, 357, 379, 390–391 inline styles 245–246, 251, 284, 713 inner edges (element box) 356 innerHTML property 626 input controls See form controls input element type="button" 190, 209–210, 212 type="checkbox" 192, 194, 203, 210, 212 type="color" 201–202, 210, 213 type="date" 198–199, 210, 213 type="datetime-local" 198–199, 210, 213 type="email" 210, 213 type="file" 197–198, 210, 212 type="hidden" 198, 210, 212 type="image" 210, 212 type="month" 198–200, 210, 213 type="number" 200–201, 210, 213 type="password" 210, 212 type="radio" 192–193, 203, 210, 212 type="range" 200–201, 210, 213 type="reset" 182, 190–192, 210, 212 Index type="search" 210, 213 type="submit" 182, 190–192, 210, 212 type="tel" 210, 213 type="text" 184, 210, 212 type="time" 198–199, 210, 213 type="url" 210, 213 type="week" 198–200, 210, 213 inputmode attribute, textarea element 211 :in-range selector 758 insertBefore() method 628–629 ins (insert text) element 89, 96, 112 Interaction Design (IxD) 6–9 interlacing 652–653 internationalization (i18n) 97 International Standard Book Numbers (ISBNs) 100 internet about 21 history of 22 Internet Information Services (IIS) 22, 180 intranets 23 :invalid selector 758 invisible characters 107 IP addresses 22–23 Irish, Paul 630 ISBNs (International Standard Book Numbers) 100 isindex element 89 iStockPhoto website 643 italics See font-style property IxD (Interaction Design) 6–9 J JavaScript See also scripts and scripting about 593–597 adding behaviors with 31 adding to web pages 597–598 additional resources 617 animation support 540–541 browser object 612–613 canvas drawing area 228–232 capitalization in 627 case sensitivity 599, 601, 609, 613 data types 601–602 DOM and See DOM drop-down functionality 189 events 613–616 frontend development 10–11 idiomatic 605 libraries 632–637 libraries supported 717 polyfills and 630–632 pop-up windows 126 premade custom widgets 205 progressive enhancement 39 site performance and 44 SVG support 140, 715–718 validating forms 190 what JavaScriptS can 595–597 window object 612–613 JavaScript Object Notation (JSON) 633 JavaServer Pages 180 Jehl, Scott 39, 156, 495, 632 Jones, Alex 161 JPEG format about 132, 645–647, 657 GIMP support 674 optimizing 693–694 Photoshop support 672 transparency and 676, 710 JPEGmini program 699 jQuery library 205, 633–636 JSON (JavaScript Object Notation) 633 JSON-LD standard 103 justify-content property about 428–429, 437, 475, 478, 482, 483 aligning items with margins 433 justify-items property 474–475, 478, 483 justify-self property 473–474, 478, 484 K Kadlec, Tim 515 Kanouni, Hasma 161 kbd (keyboard) element 89, 93, 112 Keith, Jeremy 630, 762 Kellum, Scott 559 kerning 279 keyframe animation See animation @keyframes rule 538–539 kind attribute, track element 226, 235 Kleinfeld, Sanders 230 Koblentz, Thierry 398, 491–492 Koch, Peter-Paul 126 Kraken.io service 159, 664, 690, 699 Krug, Steve L label attribute optgroup element 196, 210 option element 210 track element 226, 235 label element attributes for 210 form accessibility and 180, 184, 192, 203 label attribute and 196 lang global attribute 97, 101, 753 :lang() selector 320, 757 language codes (IANA) 226 Larson, Rob 39 :last-child selector 320, 757 :last-of-type selector 320, 757 Lawson, Bruce 762 layout patterns 501–502 layout (rendering) engines 24 Lazaris, Louis 322 LazyLinePainter library 717 left property 406–407, 418, 521 legend element 180, 204–205, 210, 549 length property 607, 610, 623 Lesiński, Kornel 694–695 LESS preprocessor 346, 351, 572–573, 576 less than or equal to (