The Definitive Guide to HTML5

Size: px

Start display at page:

Download "The Definitive Guide to HTML5"

Ralf Price
5 years ago
Views:

1 The Definitive Guide to HTML5 Adam Freeman

2 The Definitive Guide to HTML

3 Dedicated to my lovely wife, Jacqui Griffyth Adam Freeman

4 Contents at a Glance About the Author... xxxiii About the Technical Reviewers... xxxiv Acknowledgments... xxxv Part I: Getting Started...1 Chapter 1: Putting HTML5 in Context...3 Chapter 2: Getting Ready...9 Chapter 3: Getting Started with HTML...13 Chapter 4: Getting Started with CSS...39 Chapter 5: Getting Started with JavaScript...71 Part II: The HTML Elements Chapter 6: HTML Elements in Context Chapter 7: Creating HTML Documents Chapter 8: Marking Up Text Chapter 9: Grouping Content Chapter 10: Creating Sections Chapter 11: Table Elements Chapter 12: Working with Forms Chapter 13: Customizing the Input Element Chapter 14: Other Form Elements and Input Validation Chapter 15: Embedding Content Part III: Cascading Style Sheets Chapter 16: CSS in Context Chapter 17: Using the CSS Selectors Part I...411

5 Chapter 18: Using the CSS Selectors Part II Chapter 19: Using Borders and Backgrounds Chapter 20: Working with the Box Model Chapter 21: Creating Layouts Chapter 22: Styling Text Chapter 23: Transitions, Animations, and Transforms Chapter 24: Other CSS Properties and Features Part IV: Working with the DOM Chapter 25: The DOM in Context Chapter 26: Working with the Document Object Chapter 27: Working with the Window Object Chapter 28: Working with DOM Elements Chapter 29: Styling DOM Elements Chapter 30: Working with Events Chapter 31: Using the Element-Specific Objects Part V: Advanced Features Chapter 32: Using Ajax Part I Chapter 33: Using Ajax Part II Chapter 34: Working with Multimedia Chapter 35: Using the Canvas Element Part I Chapter 36: Using the Canvas Element Part II Chapter 37: Using Drag & Drop Chapter 38: Using Geolocation Chapter 39: Using Web Storage Chapter 40: Creating Offline Web Applications Index

6 Contents About the Author... xxxiii About the Technical Reviewers... xxxiv Acknowledgments... xxxv Part I: Getting Started...1 Chapter 1: Putting HTML5 in Context...3 The History of HTML...3 The Introduction of JavaScript... 3 The End of the Browser Wars... 4 The Dominance of Plugins... 4 The Emergence of Semantic HTML... 4 The Trend: The HTML Standard Lags Behind HTML Use... 5 Introducing HTML5...5 The New Standard(s)... 5 Embracing Native Multimedia... 6 Embracing Programmatic Content... 6 Embracing the Semantic Web... 7 The Current State of HTML5...7 Browser Support for HTML Site Support for HTML The Structure of This Book...7 Finding More Information About HTML5...8

7 Summary...8 Chapter 2: Getting Ready...9 Selecting a Browser...9 Selecting an HTML Editor...10 Selecting a Web Server...10 Obtaining Node.js...10 Obtaining the Multipart Module Getting the Sample Code...11 Summary...11 Chapter 3: Getting Started with HTML...13 Using Elements...14 Understanding the Elements Used in This Chapter Using Empty Elements Using Self-Closing Tags Using Void Elements Using Element Attributes...19 Applying Multiple Attributes to an Element Using Boolean Attributes Using Custom Attributes Creating an HTML Document...20 The Outer Structure The Metadata The Content Understanding Parents, Children, Descendants, and Siblings Understanding Element Types Using HTML Entities...24 The HTML5 Global Attributes...25

8 The accesskey Attribute The class Attribute The contenteditable Attribute The contextmenu Attribute The dir Attribute The draggable Attribute The dropzone Attribute The hidden Attribute The id Attribute The lang Attribute The spellcheck Attribute The style Attribute The tabindex Attribute The title Attribute Useful HTML Tools...36 Summary...36 Chapter 4: Getting Started with CSS...39 Defining and Applying a Style...40 Understanding the CSS Properties Used in This Chapter Applying a Style Inline Creating an Embedded Style Using an External Stylesheet Understanding How Styles Cascade and Inherit...47 Understanding Browser Styles Understanding User Styles Understanding How Styles Cascade Tweaking the Order with Important Styles Tie-Breaking with Specificity and Order Assessments... 51

9 Understanding Inheritance Working with CSS Colors...56 Specifying More Complex Colors Understanding CSS Lengths...57 Working with Absolute Lengths Working with Relative Lengths Other CSS Units...66 Using CSS Angles Using CSS Times Testing for CSS Feature Support...67 Useful CSS Tools...67 Browser Style Reporting Creating Selectors with SelectorGadget Enhancing CSS with LESS Using a CSS Framework Summary...69 Chapter 5: Getting Started with JavaScript...71 Getting Ready to Use JavaScript...72 Using Statements...74 Defining and Using Functions...74 Defining Functions with Parameters Defining Functions That Return Results Using Variables and Types...77 Using the Primitive Types Creating Objects Working with Objects Using JavaScript Operators...86

10 Using the Equality and Identity Operators Explicitly Converting Types Working with Arrays...92 Using an Array Literal Reading and Modifying the Contents of an Array Enumerating the Contents of an Array Using the Built-in Array Methods Handling Errors...96 Comparing the undefined and null Values...97 Checking Whether a Variable or Property Is null or undefined Differentiating Between null and undefined Useful JavaScript Tools Using a JavaScript Debugger Using a JavaScript Library Summary Part II: The HTML Elements Chapter 6: HTML Elements in Context Understanding the Sematic/Presentation Divide Understanding How to Select Elements Less Can Be More Don t Abuse Elements Be Specific and Consistent Don t Make Assumptions About the Audience Understanding Element Descriptions Element Quick Reference The Document and Metadata Elements The Text Elements

11 Grouping Content Sectioning Content Creating Tables Creating Forms Embedding Content Unimplemented Elements Summary Chapter 7: Creating HTML Documents Setting Up the Basic Document Structure The doctype Element The html Element The head Element The body Element Describing Documents with the Metadata Elements Setting the Document Title Setting the Base for Relative URLs Using Metadata to Describe the Document Defining CSS Styles Denoting External Resources Using the Scripting Elements The script Element The noscript Element Summary Chapter 8: Marking Up Text Creating Hyperlinks Creating External Hyperlinks Creating Relative URLs

12 Creating Internal Hyperlinks Targeting a Browsing Context Annotating Content with the Basic Text Elements Denoting Keywords and Product Names Adding Emphasis Denoting Foreign or Technical Terms Showing Inaccuracies or Corrections Denoting Important Text Underlining Text Adding Fine Print Adding Superscript and Subscript Creating Breaks Forcing a Line Break Indicating an Opportunity for a Safe Line Break Representing Inputs and Outputs Creating Citations, Quotations, Definitions, and Abbreviations Denoting Abbreviations Defining Terms Quoting Content from Another Source Citing the Title of Another Work Working with the Language Elements The ruby, rt, and rp Elements The bdo Element The bdi Element Wrapping Up: The Other Text Elements Denoting a Generic Span of Content Highlighting Text Denoting Added or Removed Content

13 Denoting Times and Dates Summary Chapter 9: Grouping Content Understanding the Need to Group Content Creating Paragraphs Using the div Element Working with Preformatted Content Quoting from Other Sources Adding Thematic Breaks Grouping Content into Lists The ol Element The ul Element The li Element Creating Description Lists Creating Custom Lists Dealing with Figures Summary Chapter 10: Creating Sections Adding Basic Headings Hiding Subheadings Creating Sections Adding Headers and Footers Adding Navigation Blocks Working with Articles Creating Sidebars Providing Contact Information...244

14 Creating a Details Section Summary Chapter 11: Table Elements Creating a Basic Table Adding Headers Cells Adding Structure to a Table Denoting the Headings and the Table Body Adding a Footer Creating Irregular Tables Associating Headers with Cells Adding a Caption to a Table Working with Columns Calling Out Individual Columns Applying Borders to the table Element Summary Chapter 12: Working with Forms Creating a Basic Form Defining the Form Seeing the Form Data Configuring the Form Configuring the Form action Attribute Configuring the HTTP method Attribute Configuring the Data Encoding Controlling Form Completion Specifying a Target for the Form Response Setting the Name of the Form

15 Adding Labels to a Form Automatically Focusing on an input Element Disabling Individual input Elements Grouping Form Elements Together Adding a Descriptive Label to a fieldset Element Disabling Groups of Inputs Using the fieldset Element Using the button Element Using the button Element to Submit Forms Using the button Element to Reset Forms Using button as a Generic Element Working with Elements Outside the Form Summary Chapter 13: Customizing the Input Element Using the input Element for Text Input Specifying the Element Size Setting Values and Using Placeholders Using a Data List Creating Read-Only and Disabled Text Boxes Specifying Text Directionality Using the input Element for Password Input Using the input Element to Create Buttons Using the input Element to Restrict Data Entry Using the input Element to Obtain a Number Using the input Element to Obtain a Number in a Given Range Using the input Element to Obtain a Boolean Response Using the input Element to Create Fixed Choices Using the input Element to Obtain Formatted Strings

16 Using the input Element to Obtain Times and Dates Using the input Element to Obtain a Color Using the input Element to Obtain Search Terms Using the input Element to Create Hidden Data Items Using the input Element to Create Image Buttons and Maps Using the input Element to Upload Files Summary Chapter 14: Other Form Elements and Input Validation Using the Other Form Elements Creating Lists of Options Capturing Multiple Lines of Text Denoting the Result of a Calculation Creating Public/Private Key Pairs Using Input Validation Ensuring the User Provides a Value Ensuring a Value Is Within Bounds Ensuring a Value Matches a Pattern Ensuring a Value Is an Address or URL Disabling Input Validation Summary Chapter 15: Embedding Content Embedding an Image Embedding an Image in a Hyperlink Creating a Client-Side Image Map Embedding Another HTML Document Embedding Content Using Plugins Using the embed Element

17 Using the object and param Elements Other Uses for the object Element Using the object Element to Embed Images Using the object Element to Create Client-Side Image Maps Using the object Element as a Browsing Context Embedding Numeric Representations Showing Progress Showing a Ranged Value Other Embedding Elements Embedding Audio and Video Embedding Graphics Summary Part III: Cascading Style Sheets Chapter 16: CSS in Context Understanding CSS Standardization Understanding the Box Model Selectors Quick Reference Properties Quick Reference Border and Background Properties Box Model Properties Layout Properties Text Properties Transition, Animation, and Transform Properties Other Properties Summary...409

18 Chapter 17: Using the CSS Selectors Part I Using the Basic CSS Selectors Selecting All Elements Selecting Elements by Type Selecting Elements by Class Selecting Elements by ID Selecting Elements by Attribute Combining Selectors Creating Selector Unions Selecting Descendant Elements Selecting Child Elements Selecting Sibling Elements Using Pseudo-Element Selectors Using the ::first-line Selector Using the ::first-letter Selector Using the :before and :after Selectors Using the CSS Counter Feature Summary Chapter 18: Using the CSS Selectors Part II Using the Structural Pseudo-Class Selectors Using the :root Selector Using the Child Selectors Using the nth-child Selectors Using the UI Pseudo-Class Selectors Selecting Enabled/Disabled Elements Selecting Checked Elements Selecting Default Elements Selecting Valid and Invalid input Elements

19 Selecting input Elements with Range Limitations Selecting Required and Optional input Elements Using the Dynamic Pseudo-Class Selectors Using the :link and :visited Selectors Using the :hover Selector Using the :active Selector Using the :focus Selector Other Pseudo-Selectors Using the Negation Selector Using the :empty Selector Using the :lang Selector Using the :target Selector Summary Chapter 19: Using Borders and Backgrounds Applying a Border Defining the Border Width Defining the Border Style Applying a Border to a Single Side Using the border Shorthand Properties Creating a Border with Rounded Corners Using Images As Borders Setting Element Backgrounds Setting the Background Color and Image Setting the Background Image Size Setting the Background Image Position Setting the Attachment for the Background Setting the Background Image Origin and Clipping Style Using the background Shorthand Property

20 Creating a Box Shadow Using Outlines Summary Chapter 20: Working with the Box Model Applying Padding to an Element Appling Margin to an Element Controlling the Size of an Element Setting the Sized Box Setting Minimum and Maximum Sizes Dealing with Overflowing Content Controlling Element Visibility Setting an Element Box Type Understanding Block-Level Elements Understanding Inline-Level Elements Understanding Inline-Block Elements Understanding Run-In Elements Hiding Elements Creating Floating Boxes Preventing Floating Elements from Stacking Up Summary Chapter 21: Creating Layouts Positioning Content Setting the Position Type Setting the Z-Order Creating Multicolumn Layouts Creating Flexible Box Layouts...541

21 Creating a Simple Flexbox Flexing Multiple Elements Dealing with Vertical Space Dealing with Maximum Sizes Creating Table Layouts Summary Chapter 22: Styling Text Applying Basic Text Styles Aligning and Justifying Text Dealing with Whitespace Specifying Text Direction Specifying the Space Between Words, Letters, and Lines Controlling Word Breaks Indenting the First Line Decorating and Transforming Text Creating Text Shadows Working with Fonts Selecting a Font Setting the Font Size Setting the Font Style and Weight Using Web Fonts Summary Chapter 23: Transitions, Animations, and Transforms Using Transitions Creating Inverse Transitions Selecting How Intermediate Values Are Calculated Using Animations...589

22 Working with Key Frames Setting the Repeat Direction Understanding the End State Applying Animations to the Initial Layout Reusing Key Frames Applying Multiple Animations to Multiple Elements Stopping and Starting Animations Using Transforms Applying a Transform Specifying an Origin Animating and Transitioning a Transform Summary Chapter 24: Other CSS Properties and Features Setting Element Color and Transparency Setting the Foreground Color Setting Element Opacity Styling Tables Collapsing Table Borders Configuring Separated Borders Dealing with Empty Cells Positioning the Caption Specifying the Table Layout Styling Lists Setting the List Marker Type Using an Image As a List Marker Positioning the Marker Styling the Cursor Summary...629

23 Part IV: Working with the DOM Chapter 25: The DOM in Context Understanding the Document Object Model Understanding DOM Levels and Compliance Testing for DOM Features The DOM Quick Reference The Document Members The Window Members The HTMLElement Members DOM CSS Properties The DOM Events Summary Chapter 26: Working with the Document Object Working with Document Metadata Getting Information from the Document Using the Location Object Reading and Writing Cookies Understanding the Ready State Getting DOM Implementation Details Obtaining HTML Element Objects Using Properties to Obtain Element Objects Using Array Notation to Obtain a Named Element Searching for Elements Chaining Searches Together Navigating the DOM Tree Summary...678

24 Chapter 27: Working with the Window Object Obtaining a Window Object Getting Information about the Window Interacting with the Window Prompting the User Getting General Information Working with the Browser History Navigating Within the Browsing History Inserting an Entry into the History Adding an Entry for a Different Document Storing Complex State in the History Replacing an Item in the History Using Cross-Document Messaging Using Timers Summary Chapter 28: Working with DOM Elements Working with Element Objects Working with Classes Working with Element Attributes Working with Text Modifying the Model Creating and Deleting Elements Duplicating Elements Moving Elements Comparing Element Objects Working with HTML Fragments Inserting an Element into a Text Block

25 Summary Chapter 29: Styling DOM Elements Working with Stylesheets Getting Basic Information About Stylesheets Working with Media Constraints Disabling Stylesheets Working with Individual Styles Working with Element Styles Working with CSSStyleDeclaration Objects Working with the Convenience Properties Working with the Regular Properties Using the Fine-Grained CSS DOM Objects Working with Computed Styles Summary Chapter 30: Working with Events Using Simple Event Handlers Implementing a Simple Inline Event Handler Implementing a Simple Event-Handling Function Using the DOM and the Event Object Distinguishing Events by Type Understanding Event Flow Working with Cancellable Events Working with the HTML Events The Document and Window Events Working with Mouse Events Working with Focus Events Working with Keyboard Events

26 Working with Form Events Summary Chapter 31: Using the Element-Specific Objects The Document and Metadata Objects The base Element The body Element The link Element The meta Element The script Element The style Element The title Element Other Document and Metadata Elements The Text Elements The a Element The del and ins Elements The q Element The time Element Other Text Elements The Grouping Elements The blockquote Element The li Element The ol Element Other Grouping Elements The Section Elements The details Element Other Section Elements The Table Elements The col and colgroup Elements

27 The table Element The thead, tbody, and tfoot Elements The th Element The tr Element Other Table Elements The Form Elements The button Element The datalist Element The fieldset Element The form Element The input Element The label Element The legend Element The optgroup Element The option Element The output Element The select Element The textarea Element The Content Elements The area Element The embed Element The iframe Element The img Elements The map Element The meter Element The object Element The param Element The progress Element

28 Summary Part V: Advanced Features Chapter 32: Using Ajax Part I Getting Started with Ajax Dealing with the Response The Lowest Common Dominator: Dealing with Opera Using the Ajax Events Dealing with Errors Dealing with Setup Errors Dealing with Request Errors Dealing with Application Errors Getting and Setting Headers Overriding the Request HTTP Method Disabling Content Caching Reading Response Headers Making Cross-Origin Ajax Requests Using the Origin Request Header Advanced CORS Features Aborting Requests Summary Chapter 33: Using Ajax Part II Getting Ready to Send Data to the Server Defining the Server Understanding the Problem Sending Form Data Sending Form Data Using a FormData Object Creating a FormData Object

29 Modifying a FormData Object Sending JSON Data Sending Files Tracking Upload Progress Requesting and Processing Different Content Types Receiving HTML Fragments Receiving XML Data Receiving JSON Data Summary Chapter 34: Working with Multimedia Using the video Element Preloading the Video Displaying a Placeholder Image Setting the Video Size Specifying the Video Source (and Format) The track Element Using the audio Element Working with Embedded Media via the DOM Getting Information About the Media Assessing Playback Capabilities Controlling Media Playback Summary Chapter 35: Using the Canvas Element Part I Getting Started with the Canvas Element Getting a Canvas Context Drawing Rectangles Setting the Canvas Drawing State...904

30 Setting the Line Join Style Setting the Fill & Stroke Styles Using Gradients Using a Radial Gradient Using Patterns Saving and Restoring Drawing State Drawing Images Using Video Images Using Canvas Images Summary Chapter 36: Using the Canvas Element Part II Drawing Using Paths Drawing Paths with Lines Drawing Rectangles Drawing Arcs Using the arcto Method Using the arc Method Drawing Bezier Curves Drawing Cubic Bezier Curves Drawing Quadratic Bezier Curves Creating a Clipping Region Drawing Text Using Effects and Transformations Using Shadows Using Transparency Using Composition Using a Transformation

31 Summary Chapter 37: Using Drag & Drop Creating the Source Items Handling the Drag Events Creating the Drop Zone Receiving the Drop Working with the DataTransfer Object Filtering Dragged Items by Data Dragging and Dropping Files Summary Chapter 38: Using Geolocation Using Geolocation Getting the Current Position Handling Geolocation Errors Specifying Geolocation Options Monitoring the Position Summary Chapter 39: Using Web Storage Using Local Storage Listening for Storage Events Using Session Storage Summary Chapter 40: Creating Offline Web Applications Defining the Problem Defining the Manifest Specifying Manifest Sections

32 Defining the Fallback Section Defining the Network Section Detecting the Browser State Working with the Offline Cache Making the Update Getting the Update Applying the Update Summary Index

About the Author Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as Chief

33 About the Author Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as Chief Technology Officer and Chief Operating Officer of a global bank. Now retired, he spends his time writing and running. This is his thirteenth technology book. xxxiii

) and during the day he enjoys a mixture of coding, server admin, performance profiling, and/or advising others on implementing scalability technologies like memcached or load balancing.

34 About the Technical Reviewers Kevin Grant is a full time PHP Developer, living and working in the Sheffield area, UK. His current role involves maintaining Zend Framework based websites for clients (thanks to a book on ZF from Apress!) and during the day he enjoys a mixture of coding, server admin, performance profiling, and/or advising others on implementing scalability technologies like memcached or load balancing. On weekends he spends time with his family, occasionally does odd jobs around the house and frequently complains about not going climbing enough, despite the proximity of several local climbing walls and crags. His first computer was a ZX Spectrum 48K+ but his all time favorite game remains Parsec. Andy Olsen is a freelance consultant based in the UK, and spends most of his working time immersed in web/mobile technologies,.net, and Java. Andy had been working in IT for 25 years (where do the years go?) and would like to play professional football when he grows up. Andy lives by the seaside in Swansea in South Wales with his family, and enjoys running, skiing, and watching the Swans. You can reach Andy at andyo@olsensoft.com. xxxiv

35 Acknowledgments I would like to thank everyone at Apress for working so hard to bring this book to print. In particular, I would like to thank Jennifer Blackwell for keeping me on track (and for putting up with my refusal to use SharePoint), and Ewan Buckingham and Ben Renow-Clarke for commissioning and editing this book. I would also like to thank Kevin, Andy, Roger, Vanessa, Lori, Ralph, Kim, and Marilyn for their reviews and copyediting. xxxv

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page