pro html5 with css, javascript, and multimedia - springer978-1-4842-2463-2/1.pdf · pro html5 with...
TRANSCRIPT
Pro HTML5 with CSS, JavaScript, and
MultimediaComplete 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-2DOI 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 SpahrEditorial Director: Todd GreenAcquisitions Editor: Todd GreenDevelopment Editor: Laura BerendsonTechnical Reviewer: Gaurav MishraCoordinating Editor: Jill BalzanoCopy Editor: Karen JamesonCompositor: SPi GlobalIndexer: SPi GlobalArtist: SPi GlobalCover 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 [email protected], or visit www.springeronline.com. Apress 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 [email protected], or visit http://www.apress.com/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 book’s 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.
v
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
■ Contents at a GlanCe
vi
■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
vii
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
■ Contents
viii
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
■ Contents
ix
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
■ Contents
x
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
■ Contents
xi
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
■ Contents
xii
■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
■ Contents
xiii
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
■ Contents
xiv
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
■ Contents
xv
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
■ Contents
xvi
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 Bézier ���������������������������������������������������������������������������������������������������������������������������������������� 291
Transitions �������������������������������������������������������������������������������������������������������������������� 293
Transforms ������������������������������������������������������������������������������������������������������������������� 296
Translation ������������������������������������������������������������������������������������������������������������������������������������������ 296
Rotation ���������������������������������������������������������������������������������������������������������������������������������������������� 297
Scale ��������������������������������������������������������������������������������������������������������������������������������������������������� 297
Skew ��������������������������������������������������������������������������������������������������������������������������������������������������� 298
■ Contents
xvii
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
■ Contents
xviii
■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
■ Contents
xix
■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
■ Contents
xx
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
■ Contents
xxi
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
■ Contents
xxii
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
■ Contents
xxiii
■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
xxv
About the Author
Mark J. Collins has been developing software solutions for 35 years. Some of the key technology areas of his career include COM, .NET, SQL Server, and SharePoint. He has built numerous enterprise-class applications in a variety of industries. He currently serves as an application and data architect for multiple organizations. You can see more info on his website, www.TheCreativePeople.com. For questions and comments, contact Mark at [email protected].
xxvii
About the Technical Reviewer
Gaurav Mishra is an expert in User interface Development and UX Design with more than 10 years of experience. He provides workshops and training in UI development, UX Design, and Drupal. Gaurav has played a key role in the success of many organizations and likes to build products and services from scratch. Gaurav lives in New Delhi, India, and likes to spend his leisure time with his baby Yuvika and wife Neeti. He likes all genres of music, from Indian classical to club music. Gaurav can be reached at [email protected] and also tweets at @gauravmishr.
xxix
Acknowledgments
First and foremost, I acknowledge my Lord and Savior, Jesus Christ. The divine and eternal perspective on life, which can only be found in You, is an anchor, steadfast and sure. I humbly conclude that Your hand has guided me, often carrying me, through every endeavor, great and small. I submit that nothing of any value or significance is possible without You.
I want to say a very big thank you to my beautiful wife, Donna. I can honestly say that I would not be who I am if it were not for what you have sown into my life. I am truly blessed to be able to share my life with you. Thank you for your loving support and for making life fun!
Next, I’d like to thank all the people at Apress who made this book possible and for all their hard work that turned it into the finished product you see now; this is truly a team effort. Jill, thanks for keeping everything rolling smoothly and for being patient with all the work; Gaurav, thank you for your input and critique, helping to improve the quality and accuracy of this book; and to all the other contributors at Apress, thanks for overseeing the many details. Everyone at Apress has made writing this book a pleasure.
xxxi
Introduction
My goal in writing this book is to provide everything you need to know to be proficient in creating professional quality web applications that take advantage of all the great features in HTML5. I also wanted this to be equally helpful for both novices and seasoned professionals. I’ll let you be the ultimate judge of how well I fulfilled those goals.
There is a tremendous amount of information presented in this book, and I knew that organizing it would be my top priority. The overall HTML5 umbrella encompasses HTML, CSS, and JavaScript; these can be thought of as the three legs of a tripod upon which your web application will depend. The first section of this book provides an introductory chapter on each one of these technologies. I recommend starting with these chapters, especially if you’re relatively new to web development. Sections 2, 3, and 4 cover each of these three areas in more detail. The last section provides demonstrations of some advanced topics such as canvas, SVG, drag and drop, and indexed DB.
Thanks to some really helpful websites provided by Mozilla, W3 Schools, and many other organizations and individuals, there is an overwhelming amount of material readily available. This book is designed to augment these resources by focusing primarily on concepts. If you understand the basic principles, you can more readily, and effectively, apply the details of a particular feature. In keeping with my first goal, however, there are a lot of details provided as well. I have included reference materials in Appendix C to keep the narrative more readable.
There is an impressive set of frameworks available such as jQuery, Angular, Bootstrap, and Knockout. If you are doing any serious web development, you will want to use one or more of these. These frameworks don’t provide any capability that you couldn’t create yourself using the techniques I will be demonstrating. They will, however, make your job a whole lot easier if you choose them, and use them, wisely. In this book, however, I will focus only on the native capabilities of the web technologies and will not use any of these frameworks.
You can download the source code for each chapter from www.apress.com. Except for the last section, the amount of code is kept relatively short so you can enter it yourself as you follow along. However, the final code for each chapter is provided in the download for your convenience. In some cases, I may demonstrate two or three ways of accomplishing the same thing. The downloaded code will sometimes have portions of code commented out in these cases.
The technology that I’ll be explaining is not platform or vendor dependent. The sample web pages that I’ll be demonstrating should work on most major browsers. The files that you’ll be editing – HTML, CSS, and JavaScript – are just simple text files that can be written with any text editor. Using a tool designed for web development will make your job easier by providing intellisense and context-sensitive formatting. I used Microsoft’s WebMatrix to create the samples for this book. WebMatrix is free and easy to install and use. However, Microsoft is dropping support for WebMatrix in November 2017, offering a free, open source version of Visual Studio instead. That might be a bit of a pill to swallow unless you happen to already be in the Microsoft camp. There are plenty of alternatives. Your favorite browser probably provides basic editing capabilities as well.
■ IntroduCtIon
xxxii
Finally, as with most technologies, the landscape is constantly changing. I have carefully chosen to describe the capabilities that are supported by the majority of platforms and avoided those that have limited availability. By the time you are reading this book, things may have changed and you may find some information outdated. You may have to do your own research for a specific feature. I trust, however, with the foundations demonstrated in this book, you will be well able to leverage the HTML5 technologies, even as they evolve over time.
I wish you every success as you master all the wonderful facets of developing web applications. Never stop learning!