You are previewing HTML5 24-Hour Trainer.
O'Reilly logo
HTML5 24-Hour Trainer

Book Description

A unique book-and-video package for HTML5 24-Hour Trainer

Comprehensive written and interactive instruction for learning HTML5

HTML is the core technology for building websites. Today, with HTML5 opening the Internet to new levels of rich content and dynamic interactivity, developers are looking for information to learn and utilize HTML5. HTML5 24-Hour Trainer provides that information, giving new and aspiring web developers the knowledge they need to achieve early success when building websites.

  • Covers the most basic aspects of a web page, including a brief introduction to Cascading Style Sheets (CSS)

  • Provides lessons that are backed up by professionally created training videos and interactive content to fully illustrate the dynamic nature of HTML5 and the Internet, while also providing a full learning experience

  • Combines easy-to-follow lessons with expertly crafted training videos to provide you with both written and interactive instruction for learning HTML5

Written by bestselling author Joseph Lowery and with video content created by well-known multimedia and eLearning producer Mark Fletcher, HTML5 24-Hour Trainer brings the new features of HTML5 and the Internet to life unlike any other resource.

Table of Contents

  1. Copyright
  2. CREDITS
  3. ABOUT THE AUTHORS
  4. ABOUT THE TECHNICAL EDITOR
  5. ACKNOWLEDGMENTS
  6. INTRODUCTION
    1. WHO THIS BOOK IS FOR
    2. WHAT THIS BOOK COVERS
    3. HOW THIS BOOK IS STRUCTURED
    4. WHAT'S ON THE DVD
    5. WHAT YOU NEED TO USE THIS BOOK
    6. CONVENTIONS
    7. SOURCE CODE AND SUPPORTING FILES
    8. ERRATA
    9. P2P.WROX.COM
  7. I. Getting Started with HTML5
    1. 1. What Is HTML?
      1. 1.1. THE LANGUAGE OF THE WEB
      2. 1.2. HOW BROWSERS STYLE WEB PAGES
      3. 1.3. THE LATEST VERSION: HTML5
      4. 1.4. TRY IT
        1. 1.4.1. Lesson Requirements
        2. 1.4.2. Step-by-Step
    2. 2. Creating Your First Web Page
      1. 2.1. HTML5 SYNTAXES: AN EMBARRASSMENT OF RICHES
      2. 2.2. UNDERSTANDING BASIC PAGE STRUCTURE
        1. 2.2.1. Setting a Document Type
        2. 2.2.2. Defining the Root Element: <html>
        3. 2.2.3. Forming the <head>
        4. 2.2.4. Enclosing the Content with <body>
      3. 2.3. TRY IT
        1. 2.3.1. Lesson Requirements
        2. 2.3.2. Step-by-Step
    3. 3. Viewing Web Pages
      1. 3.1. OPENING FILES IN A BROWSER
      2. 3.2. SETTING A WEB WORKFLOW
      3. 3.3. TRY IT
        1. 3.3.1. Lesson Requirements
        2. 3.3.2. Step-by-Step
  8. II. Styling Your Web Page
    1. 4. What Is CSS?
      1. 4.1. UNDERSTANDING CASCADING STYLE SHEETS
      2. 4.2. KEY CSS CONCEPTS
        1. 4.2.1. The Cascading Principle
        2. 4.2.2. The Inheritance Principle
        3. 4.2.3. The Specificity Principle
      3. 4.3. WORKING WITH CSS PLACEMENT
        1. 4.3.1. External Style Sheets
        2. 4.3.2. Embedded Styles
        3. 4.3.3. Inline Styles
      4. 4.4. WORKING WITH SELECTORS
        1. 4.4.1. Tags
        2. 4.4.2. IDs
        3. 4.4.3. Classes
        4. 4.4.4. Compound Selectors
    2. 5. Testing CSS
      1. 5.1. VALIDATING YOUR CSS
      2. 5.2. CHECKING YOUR CSS IN A BROWSER
      3. 5.3. TRY IT
        1. 5.3.1. Lesson Requirements
        2. 5.3.2. Step-by-Step
  9. III. Working with HTML Basics
    1. 6. Adding Text
      1. 6.1. WORKING WITH PARAGRAPHS
      2. 6.2. TRY IT
        1. 6.2.1. Lesson Requirements
        2. 6.2.2. Step-by-Step
      3. 6.3. ADDING HEADINGS
      4. 6.4. TRY IT
        1. 6.4.1. Lesson Requirements
        2. 6.4.2. Step-by-Step
      5. 6.5. APPLYING SPECIAL CHARACTERS
      6. 6.6. TRY IT
        1. 6.6.1. Lesson Requirements
        2. 6.6.2. Step-by-Step
    2. 7. Styling Text with CSS
      1. 7.1. PICKING YOUR FONT FAMILY
      2. 7.2. TRY IT
        1. 7.2.1. Lesson Requirements
        2. 7.2.2. Step-by-Step
      3. 7.3. SETTING TEXT SIZE AND LINE HEIGHT
      4. 7.4. TRY IT
        1. 7.4.1. Lesson Requirements
        2. 7.4.2. Step-by-Step
      5. 7.5. CHOOSING TEXT COLOR
      6. 7.6. TRY IT
        1. 7.6.1. Lesson Requirements
        2. 7.6.2. Step-by-Step
      7. 7.7. ALIGNING AND EMPHASIZING TEXT
      8. 7.8. TRY IT
        1. 7.8.1. Lesson Requirements
        2. 7.8.2. Step-by-Step
    3. 8. Linking to Content
      1. 8.1. LINKING TO OTHER PAGES
        1. 8.1.1. Same Site Links
        2. 8.1.2. Linking to Another Site
        3. 8.1.3. Targeting Links
      2. 8.2. TRY IT
        1. 8.2.1. Lesson Requirements
        2. 8.2.2. Step-by-Step
      3. 8.3. LINKING TO A PAGE SECTION
      4. 8.4. TRY IT
        1. 8.4.1. Lesson Requirements
        2. 8.4.2. Step-by-Step
      5. 8.5. STYLING LINK STATES
      6. 8.6. WORKING WITH E-MAIL AND DOCUMENT LINKS
      7. 8.7. TRY IT
        1. 8.7.1. Lesson Requirements
        2. 8.7.2. Step-by-Step
    4. 9. Validating Your Pages
      1. 9.1. WORKING WITH THE HTML5 DOCTYPE
      2. 9.2. USING THE W3C VALIDATOR
      3. 9.3. TRY IT
        1. 9.3.1. Lesson Requirements
        2. 9.3.2. Step-by-Step
  10. IV. Incorporating Images
    1. 10. Working with Images
      1. 10.1. UNDERSTANDING WEB IMAGES
      2. 10.2. INSERTING FOREGROUND IMAGES
      3. 10.3. TRY IT
        1. 10.3.1. Lesson Requirements
        2. 10.3.2. Step-by-Step
      4. 10.4. USING LINKS WITH IMAGES
      5. 10.5. ALIGNING IMAGES
      6. 10.6. TRY IT
        1. 10.6.1. Lesson Requirements
        2. 10.6.2. Step-by-Step
      7. 10.7. INCLUDING BACKGROUND IMAGES
      8. 10.8. TRY IT
        1. 10.8.1. Lesson Requirements
        2. 10.8.2. Step-by-Step
    2. 11. Using Image Maps
      1. 11.1. CREATING AN IMAGE MAP
      2. 11.2. TRY IT
        1. 11.2.1. Lesson Requirements
        2. 11.2.2. Step-by-Step
    3. 12. Adding Horizontal Rules
      1. 12.1. SEPARATING PAGE SECTIONS
      2. 12.2. SIZING AND STYLING RULES
      3. 12.3. TRY IT
        1. 12.3.1. Lesson Requirements
        2. 12.3.2. Step-by-Step
  11. V. Using Lists
    1. 13. Inserting Unordered Lists
      1. 13.1. WORKING WITH BULLETED ITEMS
      2. 13.2. TRY IT
        1. 13.2.1. Lesson Requirements
        2. 13.2.2. Step-by-Step
      3. 13.3. NESTING UNORDERED LISTS
      4. 13.4. CHANGING LIST APPEARANCE
      5. 13.5. TRY IT
        1. 13.5.1. Lesson Requirements
        2. 13.5.2. Step-by-Step
    2. 14. Working with Ordered Lists
      1. 14.1. CREATING NUMBERED LISTS
      2. 14.2. TRY IT
        1. 14.2.1. Lesson Requirements
        2. 14.2.2. Step-by-Step
      3. 14.3. EXPANDING AN OUTLINE
      4. 14.4. COMBINING UNORDERED AND ORDERED LISTS
      5. 14.5. TRY IT
        1. 14.5.1. Lesson Requirements
        2. 14.5.2. Step-by-Step
    3. 15. Extending Lists
      1. 15.1. UNDERSTANDING WEBSITE NAVIGATION BARS
      2. 15.2. WORKING WITH LISTS FOR NAVIGATION
      3. 15.3. TRY IT
        1. 15.3.1. Lesson Requirements
        2. 15.3.2. Step-by-Step
      4. 15.4. USING DEFINITION LISTS AND THE <DIALOG> TAG
      5. 15.5. TRY IT
        1. 15.5.1. Lesson Requirements
        2. 15.5.2. Step-by-Step
  12. VI. Structuring Tables
    1. 16. Building a Simple Table
      1. 16.1. UNDERSTANDING HTML TABLES
        1. 16.1.1. Specifying a Table Header
        2. 16.1.2. Defining a Table Header, Body, and Footer
      2. 16.2. WORKING WITH ROWS AND COLUMNS
      3. 16.3. TRY IT
        1. 16.3.1. Lesson Requirements
        2. 16.3.2. Step-by-Step
    2. 17. Styling Tables
      1. 17.1. CREATING WHITE SPACE IN TABLES
      2. 17.2. ALIGNING TABLES
      3. 17.3. WORKING WITH BORDERS
      4. 17.4. MODIFYING TABLE COLORS
      5. 17.5. TRY IT
        1. 17.5.1. Lesson Requirements
        2. 17.5.2. Step-by-Step
    3. 18. Making Tables More Accessible
      1. 18.1. INSERTING CAPTIONS
      2. 18.2. INCORPORATING DETAILS AND SUMMARY
      3. 18.3. TRY IT
        1. 18.3.1. Lesson Requirements
        2. 18.3.2. Step-by-Step
  13. VII. Building Forms
    1. 19. Creating a Form
      1. 19.1. UNDERSTANDING FORMS
      2. 19.2. USING TEXT AND TEXTAREA FIELDS
      3. 19.3. TRY IT
        1. 19.3.1. Lesson Requirements
        2. 19.3.2. Step-by-Step
      4. 19.4. WORKING WITH RADIO BUTTONS
      5. 19.5. OFFERING CHECKBOX OPTIONS
      6. 19.6. IMPLEMENTING SELECT LISTS
      7. 19.7. TRY IT
        1. 19.7.1. Lesson Requirements
        2. 19.7.2. Step-by-Step
      8. 19.8. USING HIDDEN FORM CONTROLS
      9. 19.9. INSERTING FORM BUTTONS
      10. 19.10. TRY IT
        1. 19.10.1. Lesson Requirements
        2. 19.10.2. Step-by-Step
    2. 20. Enhancing Forms
      1. 20.1. APPLYING FIELDSETS AND LEGENDS
      2. 20.2. TRY IT
        1. 20.2.1. Lesson Requirements
        2. 20.2.2. Step-by-Step
      3. 20.3. USING TABLES FOR FORM LAYOUT
      4. 20.4. STYLING FORMS WITH CSS
        1. 20.4.1. Creating a Two-Column Layout
        2. 20.4.2. Styling Fieldsets and Legends
        3. 20.4.3. Working with Input Fields
      5. 20.5. UNDERSTANDING ADDITIONAL HTML5 FORM ENHANCEMENTS
      6. 20.6. TRY IT
        1. 20.6.1. Lesson Requirements
        2. 20.6.2. Step-by-Step
  14. VIII. Enhancing HTML with JavaScript
    1. 21. Adding JavaScript
      1. 21.1. UNDERSTANDING JAVASCRIPT
      2. 21.2. INTEGRATING JAVASCRIPT CODE
        1. 21.2.1. Activating JavaScript Instantly
        2. 21.2.2. Invoking JavaScript on Page Load
        3. 21.2.3. Triggering JavaScript Interactively
      3. 21.3. DEGRADING GRACEFULLY
      4. 21.4. TESTING JAVASCRIPT
      5. 21.5. TRY IT
        1. 21.5.1. Lesson Requirements
        2. 21.5.2. Step-by-Step
    2. 22. Advanced JavaScript
      1. 22.1. LINKING EXTERNAL FILES
      2. 22.2. INCORPORATING A JAVASCRIPT FRAMEWORK
      3. 22.3. TRY IT
        1. 22.3.1. Lesson Requirements
        2. 22.3.2. Step-by-Step
  15. IX. Adding Media
    1. 23. Working with Plug-Ins
      1. 23.1. UNDERSTANDING PLUG-INS
        1. 23.1.1. Using <object> Tags
        2. 23.1.2. Embedding Plug-In Content
        3. 23.1.3. Combining <object> and <embed> Tags
      2. 23.2. INSERTING AN SWF FILE
      3. 23.3. ADDING SILVERLIGHT CODE
      4. 23.4. TRY IT
        1. 23.4.1. Lesson Requirements
        2. 23.4.2. Step-by-Step
    2. 24. Inserting Audio
      1. 24.1. USING WEB-COMPATIBLE AUDIO
      2. 24.2. LINKING TO MP3 FILES
      3. 24.3. EMBEDDING AUDIO WITH PLUG-INS
      4. 24.4. INCORPORATING HTML5 AUDIO
      5. 24.5. TRY IT
        1. 24.5.1. Lesson Requirements
        2. 24.5.2. Step-by-Step
    3. 25. Inserting Video
      1. 25.1. WORKING WITH VIDEO TYPES
      2. 25.2. ADDING A VIDEO PLAYER
      3. 25.3. INTEGRATING VIDEO WITHOUT A PLUG-IN
      4. 25.4. TRY IT
        1. 25.4.1. Lesson Requirements
        2. 25.4.2. Step-by-Step
  16. X. Next Steps in HTML5
    1. 26. Looking Ahead in HTML5
      1. 26.1. USING HTML5 TODAY
      2. 26.2. WHAT WORKS NOW
      3. 26.3. WHAT DOESN'T WORK YET
      4. 26.4. DETERMINING WHAT WORKS DYNAMICALLY
      5. 26.5. TRY IT
        1. 26.5.1. Lesson Requirements
        2. 26.5.2. Step-by-Step
    2. 27. Enhancing Web Page Structure
      1. 27.1. UNDERSTANDING CURRENT LAYOUTS
      2. 27.2. WORKING WITH THE NEW HTML5 SEMANTICS
        1. 27.2.1. Defining Sections
        2. 27.2.2. Creating Headers
        3. 27.2.3. Setting Navigation Areas
        4. 27.2.4. Establishing Articles
        5. 27.2.5. Defining Asides
        6. 27.2.6. Including Footers
        7. 27.2.7. Bringing It All Together
      3. 27.3. TRY IT
        1. 27.3.1. Lesson Requirements
        2. 27.3.2. Step-by-Step
    3. 28. Integrating Advanced Design Elements
      1. 28.1. EXPANDING FONT POSSIBILITIES
      2. 28.2. DESIGNING FOR MULTIPLE SCREENS
      3. 28.3. DRAWING WITH <CANVAS>
        1. 28.3.1. Understanding <canvas> Basics
        2. 28.3.2. Drawing Lines
        3. 28.3.3. Working with Circles
        4. 28.3.4. Adding Text to a Canvas
        5. 28.3.5. Placing Images on the Canvas
      4. 28.4. TRY IT
        1. 28.4.1. Lesson Requirements
        2. 28.4.2. Step-by-Step
  17. A. Browser Support for HTML5
    1. A.1. HTML5 NEW FEATURES
      1. A.1.1. Semantic Tags
      2. A.1.2. <audio> Tag
      3. A.1.3. <video> Tag
      4. A.1.4. Form Tags
      5. A.1.5. <canvas> Tag
    2. A.2. CSS3 NEW FEATURES
      1. A.2.1. @font-face
      2. A.2.2. Enhanced Colors
      3. A.2.3. Media Queries
      4. A.2.4. Multiple Columns
      5. A.2.5. Enhanced Selectors
      6. A.2.6. CSS Transitions
      7. A.2.7. CSS Transforms
      8. A.2.8. box-shadow Property
      9. A.2.9. text-shadow Property
      10. A.2.10. box-sizing
      11. A.2.11. border-radius
      12. A.2.12. Multiple Background Images
      13. A.2.13. background-image Options
  18. B. Advanced HTML5 Features
    1. B.1. EDITABLE CONTENT
    2. B.2. LOCAL STORAGE
    3. B.3. GEOLOCATION
  19. C. What's on the DVD?
    1. C.1. SYSTEM REQUIREMENTS
    2. C.2. USING THE DVD
    3. C.3. WHAT'S ON THE DVD
    4. C.4. TROUBLESHOOTING
    5. C.5. CUSTOMER CARE