Mark J. Collins - Pro HTML5 with CSS, JavaScript, and Multimedia: Complete Website Development and Best Practices

Pro HTML5 withCSS, JavaScript,and Multimedia Complete Website Development and Best Practices Mark J. Collins Pro HTML5 with CSS, JavaScript, and Multimedia Complete Website Development and Best Practices Mark J. Collins Pro HTML5 with CSS, JavaScript, and Multimedia: Complete Website Development and Best Practices Mark J. Collins ISBN-13 (pbk): 978-1-4842-2462-5 ISBN-13 (electronic): 978-1-4842-2463-2 DOI 10.1007/978-1-4842-2463-2 Library of Congress Control Number: 2017935969 Copyright 2017 by Mark J. Collins This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.

Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Todd Green Development Editor: Laura Berendson Technical Reviewer: Gaurav Mishra Coordinating Editor: Jill Balzano Copy Editor: Karen Jameson Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover image designed by Freepik Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013.

Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail press Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales.

Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at www.apress.com/9781484224625. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper To my beautiful and precious wife, Donna. Thank you for sharing your life with me.Contents at a Glance About the Author xxv About the Technical Reviewer xxvii Acknowledgments xxix Introduction xxxi Part I: HTML5 Technologies 1 Chapter 1: Hypertext Markup Language 3 Chapter 2: Cascading Style Sheets 15 Chapter 3: JavaScript Essentials 29 Part II: HTML 57 Chapter 4: Structural HTML Elements 59 Chapter 5: Phrasing HTML Elements 81 Chapter 6: Table HTML Elements 103 Chapter 7: Embedded HTML Elements 115 Chapter 8: HTML Form Elements 131 Part III: CSS 161 Chapter 9: CSS Selectors 163 Chapter 10: Positioning Content 175 Chapter 11: Text Styles 199 Chapter 12: Borders and Backgrounds 219 v Contents at a GlanCe Chapter 13: Styling Tables 245 Chapter 14: Flexbox 271 Chapter 15: Animation and Transforms 287 Part IV: JavaScript 305 Chapter 16: Browser Environment 307 Chapter 17: Window Object 323 Chapter 18: DOM Elements 339 Chapter 19: Dynamic Styling 351 Chapter 20: Events 365 Part V: Advanced Applications 375 Chapter 21: Audio and Video 377 Chapter 22: Scalable Vector Graphics 389 Chapter 23: Canvas 409 Chapter 24: Drag and Drop 439 Chapter 25: Indexed DB 467 Chapter 26: Geolocation and Mapping 495 Appendix A: AJAX 513 Appendix B: Drag and Drop Source Code 517 Appendix C: References 525 Index 551 vi Contents About the Author xxv About the Technical Reviewer xxvii Acknowledgments xxix Introduction xxxi Part I: HTML5 Technologies 1 Chapter 1: Hypertext Markup Language 3 HTML Document 3 Elements 4 DOCTYPE 4 Attributes 5 Miscellaneous Structure Rules 5 Html Element 6 Head Element 6 Title Element 6 Meta Element 7 Script Element 8 Link Element 9 Style Element 11 Base Element 12 Summary 13 Chapter 2: Cascading Style Sheets 15 Styling Guidelines 15 Organizing Content 15 vii Contents Applying Styles 16 CSS3 Specifications 17 CSS Concepts 17 Selectors 17 Declarations 18 Units 19 Precedence 21 Style Sheet Sources 22 Specificity Rule 22 Important Keyword 23 Box Model 23 Vendor Prefixes 24 Style Attribute 25 Summary 26 Chapter 3: JavaScript Essentials 29 Introducing JavaScript 29 Objects 29 Constructors 30 Prototypes 32 Inheritance 32 Using Prototypes 33 Using Create 35 Using the Class Keyword 36 Overriding Members 37 Properties 37 Arrays 38 Attributes 39 Special Types 40 viii Contents Miscellaneous Topics 40 Comparison Operators 40 Variable Scope 41 Strict Mode 42 Functions 43 Context 45 Immediately-Invoked Functions 46 Namespaces 47 Exceptions 48 Promises 49 Array Methods 50 Accessing Elements 50 Outputting an Array 51 Manipulating Elements 51 Searching 53 Creating Subsets 54 Processing 55 Summary 56 Part II: HTML 57 Chapter 4: Structural HTML Elements 59 Content Categories 59 Sectioning Content 60 Section 60 Article 60 Aside 61 Nav 61 Address 61 Outlines 62 Explicit Sections 62 Document Headings 64 Header and Footer 65 ix Contents Planning the Page Layout 66 Sectioning Roots 67 Blockquote 67 Details 67 Figure 68 Grouping Elements 69 Paragraph 69 Horizontal Rule 69 Preformatted 69 Main 70 Division 71 Listing Elements 71 List 71 Description List 73 Inline Frames 76 Deprecated Elements 77 hgroup 77 dir 77 frame and frameset 77 Summary 77 Chapter 5: Phrasing HTML Elements 81 Highlighting Text 81 Importance (strong) 82 Emphasis (em) 82 Relevance (mark) 82 Alternative Voice (i) 83 Small (small) 84 Strikethrough (s) 84 Stylistically Offset (b) 85 Unarticulated (u) 86 Element Review 87 x Contents Other Semantic Phrasing 87 Code, Sample, Keyboard, and Variable 88 Abbreviations and Definitions 89 Subscripts and Superscripts 90 Time 91 Edits 91 Quoting 92 Span 94 Adding Carriage Returns 94 Line Break 94 Word Break Opportunity 95 Hyphens 96 Bidirectional Text 97 Text Direction 97 Flow Direction 97 Tightly Wrapping 99 Using Isolation 99 Overriding the Direction 100 Ruby 100 Summary 101 Chapter 6: Table HTML Elements 103 Simple Table 103 Column and Row Headings 104 Column Groups 105 Table Heading and Footer 107 Spanning Cells 108 Summary 113 xi Contents Chapter 7: Embedded HTML Elements 115 Anchor 115 Images 116 Multiple Sources 117 Image Map 120 Audio 122 Using the Native Controls 123 File Formats 124 Video 125 Tracks 127 HTML5 Plug-Ins 129 Summary 130 Chapter 8: HTML Form Elements 131 Overview 131 Form Element 132 Form Action 132 Form Method 133 Additional Attributes 134 Input Elements 134 Textual Form Data 134 Selection Elements 139 Miscellaneous Types 143 Date and Time Data 148 Other Visual Elements 153 Labels 153 Output Element 153 Meter Element 154 Progress Element 156 Button Types 156 xii Contents Organizing a Form 157 Validation 158 Summary 159 Part III: CSS 161 Chapter 9: CSS Selectors 163 Selector Overview 163 Element Selectors 164 Class Selectors 164 ID Selectors 164 Attribute Selectors 164 Pseudo-Class Selectors 165 Pseudo-Elements 167 Using Combinators 168 Combining Element and Class Selectors 168 Pseudo-Selectors 169 Combinator Operators 169 The Not Selector 170 Group Operator 170 Resolving Conflicts 171 Media Queries 171 Media Attributes 171 Using Media Queries 172 Summary 173 Chapter 10: Positioning Content 175 Display 175 Defining Sizes 177 Absolute Size 177 Relative Size 179 Setting Maximum Values 179 xiii Contents Content-Based 180 IE Work Around 182 Min-Content Example 182 Box Sizing 183 Float 185 Clearing Floats 187 Containing Floats 189 Inline Block 191 Position 192 Relative Positioning 193 Absolute Positioning 195 Fixed Positioning 196 Z-Index 196 Centering Content 198 Summary 198 Chapter 11: Text Styles 199 Fonts 199 Obtaining Fonts 199 Font Families 201 Font Settings 202 Shorthand Notation 208 Text Formatting 209 Horizontal Alignment 209 Indent 209 Overflow 209 Quotes 210 Shadow 211 Capitalization 212 Spacing and Alignment 212 Basic Spacing 212 xiv Contents Handling Whitespace 213 Vertical Alignment 214 Break 216 Word Wrap 216 Page Break 217 Cursor 217 Summary 218 Chapter 12: Borders and Backgrounds 219 Borders 219 Basic Styles 219 Individual Edges 221 Radius 223 Using Images 225 Gradients 230 Box Shadows 233 Outlines 235 Backgrounds 236 Image Attributes 236 Clipping 238 Background Shorthand 239 Examples 239 Summary 243 Chapter 13: Styling Tables 245 Styling Tables 245 Basic Table Styling 247 Additional Table Styling 253 Creating Tables with CSS 258 Display Attribute 258 CSS Table Demonstration 259 Applications 261 xv Contents Styling Lists 268 Type 269 Image 269 Position 270 Shorthand 270 Summary 270 Chapter 14: Flexbox 271 Container Configuration 271 Flex Direction 271 Flex Wrap 273 Justification 274 Aligning Items 276 Item Configuration 277 Grow and Shrink 278 Order 282 Overriding Alignment 283 Vertical Example 284 Summary 285 Chapter 15: Animation and Transforms 287 Animation 287 Keyframes 287 Configuring Animations 288 Cubic Bzier 291 Transitions 293 Transforms 296 Translation 296 Rotation 297 Scale 297 Skew 298 xvi Contents Demonstration 299 3D Transforms 300 Summary 303 Part IV: JavaScript 305 Chapter 16: Browser Environment 307 Browser Object Model 307 Screen 308 Location 309 History 310 Navigator 312 Window Object 313 Console 314 Cache 317 Browser Interface Elements 320 Timers 320 Summary 321 Chapter 17: Window Object 323 Create a Window 323 Pop-Up Blocker 324 Reusing the Window 326 Configuration Parameter 326 Manipulating Windows 328 Modal Dialog Windows 331 Standard Pop-Up Dialogs 332 Custom Modal Dialogs 333 Frames 336 Simple Example 336 Accessing Frames 337 Using Sandbox 338 Summary 338 xvii Contents Chapter 18: DOM Elements 339 Document Object Model 339 Element Inheritance 340 Simple Demonstration 341 Basic DOM Manipulation 341 Finding Elements 342 Creating Elements 342 Moving Elements 343 Modifying Elements 344 Related Elements 346 Using jQuery 346 Fundamentals 347 Manipulating DOM Elements 348 Summary 350 Chapter 19: Dynamic Styling 351 Changing Style Sheets 351 Enabling Style Sheets 351 Choosing a Style Sheet 353 Alternate Style Sheets 354 Using Style Elements 355 Modifying Rules 357 Modifying Classes 359 Modifying Inline Styles 360 Using CSSStyleDeclaration 360 Setting Style Properties 361 Using setAttribute 362 Computed Style 362 Summary 363 xviii Contents Chapter 20: Events 365 Initial Example 365 Event Registration 366 Event Propagation 367 Unregistering Events 370 Event Interface 371 Common Event Properties 371 Canceling Events 372 Exploring Events 372 Summary 373 Part V: Advanced Applications 375 Chapter 21: Audio and Video 377 Overview 377 Custom Audio Controls 378 Supporting Play and Pause 379 Supporting Progress and Seek 381 Controlling the Volume 382 Adjusting the Style 383 Changing the Audio Source 384 Custom Video Controls 385 Summary 387 Chapter 22: Scalable Vector Graphics 389 Introducing SVG 389 Adding Some Simple Shapes 389 Adding Styles 391 Using SVG Image Files 392 Creating an SVG Image 392 Using an SVG Background 393 xix Contents Creating an Interactive Map 393 Using Path Elements 394 Implementing the Initial Map 397 Styling the State Elements 399 Using Basic Fill Colors 399 Using Gradient Fills 400 Using a Background Image 402 Altering Styles with JavaScript 403 Adding Animation 405 Summary 408 Chapter 23: Canvas 409 Creating a Chess Board 409 Drawing Rectangles 410 Using Gradients 412 Using Images 413 Adding Simple Animation 420 Modeling the Solar System 423 Using Paths 423 Drawing Arcs 424 Using Transformations 424 Saving the Context State 426 Drawing the Solar System 427 Applying Scaling 432 Clipping a Canvas 433 Understanding Compositing 434 Summary 438 Chapter 24: Drag and Drop 439 Understanding Drag and Drop 439 Handling Events 439 xx Contents Using the Data Transfer Object 441 Enabling Draggable Elements 442 Creating the Checkers Application 443 Creating the Project 443 Drawing the Checkers Board 444 Adding Drag-and-Drop Support 447 Allowing a Drop 447 Performing the Custom Drop Action 448 Providing Visual Feedback 450 Enforcing the Game Rules 453 Verifying a Move 453 Promoting to King 457 Moving in Turn 460 Using Advanced Features 464 Changing the Drag Image 464 Dragging Between Windows 465 Summary 466 Chapter 25: Indexed DB 467 Introducing Indexed DB 467 Using Object Stores 468 Defining the Database 469 Processing Asynchronously 470 Using Transactions 471 Creating the Application 471 Creating the Web Project 471 Drawing the Canvas 472 Configuring the Pieces 474 Creating the Database 476 Opening the Database 476 Defining the Database Structure 477 xxi Contents Drawing the Pieces 480 Using a Cursor 481 Retrieving a Single Object 482 Testing the Application 483 Moving the Pieces 485 Defining the Moves 485 Converting the Position 487 Making a Move 487 Obtaining the Object Key 489 Performing the Update 489 Starting the Animation 490 Tracking the Captured Pieces 491 Summary 493 Chapter 26: Geolocation and Mapping 495 Understanding Geolocation 495 Surveying Geolocation Technologies 495 Using Geolocation Data 496 Using the Geolocation API 496 Creating the Web Project 496 Using the Geolocation Object 497 Displaying the Location 499 Using Mapping Platforms 501 Creating a Bing Maps Account 501 Adding a Map 503 Adding Pushpins 507 Summary 511 Appendix A: AJAX 513 Making a Request 513 Handing the Response 514 Summary 515 xxii Contents Appendix B: Drag and Drop Source Code 517 Appendix C: References 525 Part 2 525 HTML Elements 525 Global Attributes 528 Self-Closing Tags 529 Input Types 530 Part 3 532 Color Units 532 Distance Units Absolute 532 Distance Units Relative 533 Angle Units 533 Time Units 533 CSS Property List 534 Part 4 539 Array Methods 539 Window Members 541 Navigator Members 544 Console Methods 545 Element Inheritance 546 Index 551 xxiii