You are previewing HTML5: Your visual blueprint™ for designing rich web pages and applications.
O'Reilly logo
HTML5: Your visual blueprint™ for designing rich web pages and applications

Book Description

Use the latest version of HTML to create dynamic Web pages

HTML5 is the latest iteration of the standard markup language for creating Web pages. It boasts extensive updates from its predecessor and allows you to incorporate rich media content into a site without any dependence on extra software such as Flash. Packed with hundreds of screen shots, this visual guide introduces you to the many new features and abilities of HTML5 and shows you the many exciting new possibilities that exist for designing dynamic Web pages.

  • Offers visual learners a solid reference on HTML5, the latest version of the standard markup language for designing Web pages

  • Demonstrates how to use HTML5 to create Web pages that feature the latest in rich media content

  • Provides easy-to-understand examples that cover a variety of topics to get you up and running with HTML5

  • Features a companion Web site that contains all the code needed to learn HTML5

  • HTML5: Your visual blueprint for designing effective Web pages opens your eyes to the world of possibilities that exist with the new version of the popular markup language.

Adam R. McDaniel is a Web developer, technical architect, and security analyst, who has contributed to the Linux Kernel.

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright
  4. Credits
  5. About the Author
  6. How to Use This Visual Blueprint Book
    1. Whom This Book Is For
    2. The Conventions in This Book
  7. TABLE OF CONTENTS
  8. CHAPTER 1: Introducing HTML5
    1. INTRODUCING HTML5
    2. UNDERSTANDING HTML5 WEB BROWSERS
    3. UNDERSTANDING BACKWARD COMPATIBILITY
    4. UNDERSTANDING THE HISTORY OF MARKUP LANGUAGES
    5. INTRODUCING THE NEW AND CHANGED HTML5 TAGS AND ATTRIBUTES
    6. UNDERSTANDING OBSOLETE HTML TAGS AND ATTRIBUTES
    7. VALIDATE A WEBSITE FOR HTML5 COMPLIANCE
    8. VALIDATE A WEB BROWSER FOR HTML5 SUPPORT
    9. SUPPORT HTML5 IN INTERNET EXPLORER WITH A PLUG-IN
  9. CHAPTER 2: Getting Started with HTML5 Page Layout
    1. CREATE AN HTML5 WEB PAGE
    2. UNDERSTANDING THE SEMANTIC LAYOUT IN HTML5
    3. DECLARE HEADER AND FOOTER LAYOUT ELEMENTS
    4. DECLARE A NAVIGATION LAYOUT ELEMENT
    5. DECLARE SECTION AND ARTICLE LAYOUT ELEMENTS
    6. DECLARE HEADING AND PARAGRAPH LAYOUT ELEMENTS
    7. DECLARE FIGURE AND ASIDE LAYOUT ELEMENTS
    8. ASSIGN CSS STYLES TO LAYOUT ELEMENTS
    9. PROVIDE A FALLBACK FOR OUTDATED WEB BROWSERS
    10. ANNOUNCE HTML5 SUPPORT
    11. RESIZE YOUR WEBSITE FOR MOBILE WEB BROWSERS
  10. CHAPTER 3: Using New HTML5 User Interface Tags and Attributes
    1. DISPLAY A FIXED-METER BAR
    2. DISPLAY A MOVING PROGRESS METER
    3. ADD A CAPTION TO A FIGURE
    4. HIGHLIGHT TEXT
    5. SPECIFY SAFE LINE BREAKS IN LONG WORDS
    6. ALLOW THE USER TO EDIT CONTENT
    7. SPELL-CHECK USER CONTENT
    8. DECLARE AN INTERACTIVE SUMMARY AND DETAILS LAYOUT ELEMENT
  11. CHAPTER 4: Styling with CSS3
    1. INTRODUCING CSS3
    2. VALIDATE A WEB BROWSER FOR CSS3 SUPPORT
    3. SELECT AN HTML ELEMENT USING ITS CLASS OR ID
    4. SELECT AN HTML ELEMENT USING AN ATTRIBUTE
    5. SELECT AN HTML ELEMENT USING A SPECIFIC ATTRIBUTE VALUE
    6. SELECT AN HTML ELEMENT USING A PARTIAL ATTRIBUTE VALUE
    7. SELECT AN HTML ELEMENT USING THE STRUCTURAL TYPE PSEUDO-CLASS
    8. SELECT AN HTML ELEMENT USING THE STRUCTURAL CHILD PSEUDO-CLASS
    9. SELECT AN HTML ELEMENT BY ITS SIBLING ELEMENT
    10. SELECT HTML ELEMENTS USING A NEGATING PSEUDO-CLASS
    11. SELECT HTML ELEMENTS BY USER SELECTION
    12. CHANGE AN ELEMENT’S BACKGROUND IMAGE
    13. CUSTOMIZE AN ELEMENT’S FONT
    14. FORMAT TEXT OVERFLOW INSIDE AN ELEMENT
  12. CHAPTER 5: Enhancing Your Web Page Visually with CSS3
    1. ROUND BORDER CORNERS
    2. ADD A SHADOW EFFECT
    3. CHANGE AN ELEMENT’S OPACITY
    4. APPLY AN IMAGE AS AN ELEMENT BORDER
    5. CUSTOMIZE A SCROLL BAR WITH IMAGES
    6. APPLY A COLOR GRADIENT
    7. TRANSFORM OBJECT DIMENSIONS
    8. TRANSITION BETWEEN STYLES
    9. CREATE SIMPLE ANIMATIONS
  13. CHAPTER 6: Creating Boxes and Columns with CSS3
    1. INTRODUCING THE FLEXIBLE BOX MODEL
    2. CREATE A HORIZONTAL FLEXIBLE BOX MODEL
    3. CREATE A VERTICAL FLEXIBLE BOX MODEL
    4. STRETCH AND SHRINK OBJECTS IN A FLEXIBLE BOX
    5. HORIZONTALLY PACK OBJECTS WITHIN A FLEXIBLE BOX
    6. VERTICALLY ALIGN OBJECTS WITHIN A FLEXIBLE BOX
    7. REORDER OBJECTS IN A FLEXIBLE BOX
    8. INTRODUCING MULTI-COLUMN LAYOUTS
    9. CREATE A MULTI-COLUMN LAYOUT
    10. ADD A RULER AND GAP IN BETWEEN COLUMNS
    11. SPAN OBJECTS HORIZONTALLY ACROSS COLUMNS
  14. CHAPTER 7: Creating HTML5 Form Inputs
    1. CREATE A NUMBER INPUT TYPE
    2. CREATE A TELEPHONE INPUT TYPE
    3. CREATE AN EMAIL INPUT TYPE
    4. CREATE A URL INPUT TYPE
    5. CREATE A SEARCH INPUT TYPE
    6. REQUIRE A VALUE IN AN INPUT FIELD
    7. SET A PLACEHOLDER FOR AN INPUT FIELD
    8. AUTO-FOCUS ON AN INPUT FIELD
    9. DISABLE AUTO-COMPLETION OF INPUT TEXT
    10. USING SPEECH INPUT
    11. CREATE A DROP-DOWN LIST FOR TEXT INPUT SUGGESTIONS
    12. RESTRICT INPUT VALUES USING PATTERN MATCHING
    13. CREATE A DATE INPUT TYPE
    14. CREATE A RANGE INPUT TYPE
    15. CREATE A COLOR INPUT TYPE
    16. LINK AN INPUT FIELD TO A SPECIFIC FORM
  15. CHAPTER 8: Using jQuery with HTML5
    1. INTRODUCING JQUERY
    2. DOWNLOAD JQUERY
    3. LOAD JQUERY
    4. EXECUTE JQUERY METHODS ON ELEMENTS
    5. MANIPULATE HTML ELEMENTS VIA THE DOM
    6. CUSTOMIZE BROWSER EVENTS WITH JQUERY
    7. HIDE AND SHOW CONTENT WITH JQUERY
    8. ADD AND REMOVE CSS CLASSES ON ELEMENTS WITH JQUERY
    9. SEND CUSTOM HTML ATTRIBUTE DATA INTO JQUERY
    10. USING SCROLLING TRANSITIONS WITH JQUERY
  16. CHAPTER 9: Inspecting and Debugging Your Website
    1. LAUNCH THE CHROME INSPECTOR
    2. EXAMINE ELEMENTS’ STRUCTURE AND LAYOUT
    3. MODIFY HTML AND CSS CODE IN REAL TIME
    4. EXAMINE JAVASCRIPT CODE
    5. ADD A JAVASCRIPT BREAKPOINT
    6. STEP THROUGH JAVASCRIPT CODE
    7. ADD A WATCH EXPRESSION
  17. CHAPTER 10: Drawing with the HTML5 Canvas
    1. INTRODUCING THE HTML5 CANVAS
    2. DECLARE A CANVAS ELEMENT
    3. DRAW BASIC RECTANGLES ON THE CANVAS
    4. DRAW PATHS ON THE CANVAS
    5. DRAW TEXT ON THE CANVAS
    6. USING SOLID COLOR ON THE CANVAS
    7. USING LINEAR GRADIENT COLORS ON THE CANVAS
    8. USING RADIAL GRADIENT COLORS ON THE CANVAS
    9. DRAW AN IMAGE ON THE CANVAS
    10. SCALE A CANVAS IMAGE
    11. CROP A CANVAS IMAGE
    12. QUERY INDIVIDUAL CANVAS PIXELS
    13. TRACK MOUSE ACTIVITY ON THE CANVAS
    14. TRANSLATE THE X- AND Y-AXES
    15. ROTATE THE X- AND Y-AXES
    16. CREATE ANIMATIONS ON THE CANVAS
  18. CHAPTER 11: Adding HTML5 Multimedia
    1. INTRODUCING HTML5 AUDIO AND VIDEO
    2. UNDERSTANDING AUDIO AND VIDEO FORMATS
    3. INSTALL A MOVIE ENCODER
    4. REENCODE MOVIES WITH THE MIRO VIDEO CONVERTER
    5. PLAY MOVIES WITH THE HTML5 VIDEO ELEMENT
    6. PLAY SOUND WITH THE HTML5 AUDIO ELEMENT
    7. CONTROL AUDIO AND VIDEO PLAYBACK WITH JAVASCRIPT
    8. EMBED A MOVIE PLAYER WITH VIDEOJS
  19. CHAPTER 12: Using Drag and Drop in HTML5
    1. INTRODUCING DRAG AND DROP IN HTML5
    2. SPECIFY OBJECTS TO DRAG
    3. SPECIFY A DROP ZONE
    4. HANDLE THE DRAG-AND-DROP EVENTS
    5. VISUALLY ENHANCE THE DRAG-AND-DROP EXPERIENCE
  20. CHAPTER 13: Storing Data Using a Client-Side Database
    1. INTRODUCING CLIENT-SIDE STORAGE IN HTML5
    2. STORE DATA USING THE WEB STORAGE API
    3. RETRIEVE DATA FROM THE WEB STORAGE API
    4. USING THE CORRECT INDEXEDDB API
    5. OPEN AN INDEXEDDB DATABASE
    6. CREATE A NEW IyNDEXEDDB OBJECT STORE
    7. STORE AN OBJECT USING THE INDEXEDDB API
    8. RETRIEVE OBJECTS USING THE INDEXEDDB API
    9. DELETE AN OBJECT USING THE INDEXEDDB API
    10. DELETE AN INDEXEDDB OBJECT STORE
  21. CHAPTER 14: Providing Offline Access to Web Applications
    1. IDENTIFY WHETHER THE BROWSER IS ONLINE
    2. IDENTIFY WHETHER THE NETWORK IS ONLINE
    3. LISTEN FOR ONLINE AND OFFLINE EVENTS
    4. INTRODUCING THE APPLICATION CACHE
    5. CREATE AN APPLICATION CACHE MANIFEST
    6. UPDATE THE APPLICATION CACHE
    7. CREATE A “WEBSITE OFFLINE” FALLBACK PAGE
  22. CHAPTER 15: Using Geolocation
    1. DISPLAY A SPECIFIC LOCATION WITH GOOGLE MAPS
    2. UNDERSTANDING GEOLOCATION AND GPS SERVICES
    3. REQUEST THE USER’S CURRENT LOCATION
    4. DISPLAY THE USER’S CURRENT LOCATION WITH GOOGLE MAPS
  23. CHAPTER 16: Running Secondary JavaScript Threads Using Web Workers
    1. INTRODUCING WEB WORKERS
    2. CREATE A WEB WORKER JAVASCRIPT FILE
    3. LINK A WEB WORKER TO YOUR WEB APPLICATION
    4. LAUNCH A WEB WORKER EVENT FROM YOUR WEB APPLICATION
    5. FALLING BACK FOR NON-WEB WORKER BROWSERS
  24. CHAPTER 17: Communicating with WebSockets
    1. INTRODUCING WEBSOCKETS
    2. CREATE A WEBSOCKET CLIENT
    3. SEND WEBSOCKET MESSAGES
    4. DISPLAY WEBSOCKET MESSAGES
    5. INTERACT WITH A WEBSOCKET SERVICE
  25. CHAPTER 18: Displaying Desktop Notifications
    1. INTRODUCING DESKTOP NOTIFICATIONS FOR CHROME
    2. REQUEST USER PERMISSION TO DISPLAY DESKTOP NOTIFICATIONS
    3. LAUNCH A DESKTOP NOTIFICATION MESSAGE
    4. CUSTOMIZE THE DESKTOP NOTIFICATION UI
    5. LISTEN FOR DESKTOP NOTIFICATION EVENTS
  26. APPENDIX A: HTML5 Reference
    1. HTML5 REFERENCE
    2. HTML GLOBAL ATTRIBUTES
    3. HTML METADATA TAGS
    4. HTML SECTIONING TAGS
    5. HTML GROUPING TAGS
    6. HTML PHRASING TAGS
    7. HTML EMBEDDING TAGS
    8. HTML TABLE TAGS
    9. HTML FORM TAGS
  27. Index