TY - BOOK AU - TI - Learning Web Design SN - 9789352137381 U1 - 006.7 PY - 2022/// CY - New Delhi PB - Shroff Publisher N2 - 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 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 ER -