You are previewing HTML5: 20 Lessons to Successful Web Development.
O'Reilly logo
HTML5: 20 Lessons to Successful Web Development

Book Description

Master HTML and HTML5 in 20 lessons--online video tutorials included!

Based on the author's successful online courses, this complete, integrated learning tool provides easy-to-follow lessons that feature clear explanations, sample code and exercises, and video tutorials. Each lesson is designed to take you less than an hour to complete.

HTML5: 20 Lessons to Successful Web Development covers the basics of HTML, including laying out an HTML document, using fonts, colors, and images, creating lists and tables, and building forms. Next, you'll learn how to use the HTML5 canvas, support geolocation, build advanced forms, implement local storage, add audio and video to your pages, and much more. Together, the book and almost five hours of video training make learning HTML5 easier than ever!

Ready-to-use code at www.mhprofessional.com

Table of Contents

  1. Cover
  2. Title Page
  3. Copyright Page
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. Acknowledgments
  8. Introduction
  9. PART I Basic HTML
    1. LESSON 1 An Introduction to HTML
      1. What Is HTML?
        1. HTTP and HTML Basics
        2. The Request/Response Sequence
        3. The Difference Between Get and Post Requests
      2. HTML Tags
        1. Tag Attributes
      3. Summary
      4. Self-Test Questions
    2. LESSON 2 The Layout of an HTML Document
      1. The <!DOCTYPE> Declaration
        1. Internet Explorer Tweak for Local Documents
      2. The <html> Tag
      3. The <head> Tag
        1. Creating a Document Title
        2. Including Style Sheets
        3. Incorporating JavaScript
        4. Passing Metadata
      4. The <body> Tag
      5. Summary
      6. Self-Test Questions
    3. LESSON 3 The HTML Document Body
      1. Inserting Comments
      2. The HTML 4.01 Tags
        1. The <div> and <span> Tags
        2. Headings
        3. Paragraphs
        4. Line Breaks
        5. Text Emphasis
      3. Summary
      4. Self-Test Questions
    4. LESSON 4 Fonts, Colors, and Images
      1. Changing Font Face and Color
        1. <font color=′…′> … </font>
        2. <font face=′…′> … </font>
        3. <font size=′…′> … </font>
        4. <basefont>
        5. <body bgcolor=′…′>
        6. The Named Colors
        7. Coloring by Numbers
        8. Font Faces
      2. Displaying Images
      3. Summary
      4. Self-Test Questions
    5. LESSON 5 Creating Lists and Tables
      1. Building Lists
        1. Overriding the Defaults
        2. Definition Lists
      2. Creating Tables
        1. Table Rows and Columns
        2. Extending Rows and Columns
      3. Summary
      4. Self-Test Questions
    6. LESSON 6 Links, Forms, and Frames
      1. Using Hyperlinks
        1. The Query String
        2. Relative URLs
        3. Creating Links
      2. Building Forms
        1. The <input> Tag
        2. The <textarea> Tag
        3. The <select> Tag
        4. The <button> Tag
        5. The <label> Tag
      3. Frames and Iframes
      4. Summary
      5. Self-Test Questions
    7. LESSON 7 Using the Remaining HTML4 Tags
      1. Conditional HTML for Internet Explorer
        1. Simple Comparisons
        2. Higher or Lower Values
        3. The Not Operator
        4. The Mark of the Web
      2. <abbr> … </abbr>
      3. <acronym> … </acronym> (Obsolete)
      4. <address> … </address>
      5. <applet> … </applet> (Obsolete)
      6. <area>
      7. <base>
      8. <basefont> (Obsolete)
      9. <bdo> … </bdo>
      10. <big> … </big> (Obsolete) and <small> … </small>
      11. <blockquote> … </blockquote>
      12. <center> … </center> (Obsolete)
      13. <cite> … </cite>
      14. <code> … </code>
      15. <col> and <colgroup>
      16. <del> … </del>
      17. <fieldset> … </fieldset>
      18. <font> … </font> (Obsolete)
      19. <frameset> (Obsolete)
      20. <hr>
      21. <iframe> … </iframe>
      22. <isindex> … </isindex> (Obsolete)
      23. <menu> … </menu> (Reserved)
      24. <optgroup> … </optgroup>
      25. <sub> … </sub> and <sup> … </sup>
      26. Summary
      27. Self-Test Questions
  10. PART II HTML5 and the Canvas
    1. LESSON 8 What’s New in HTML5
      1. The Canvas
      2. Geolocation
      3. Forms
      4. Local Storage
      5. Audio and Video
        1. The <embed> Tag
      6. Microdata
      7. Web Workers
      8. Web Applications
      9. Still to Come
      10. Summary
      11. Self-Test Questions
    2. LESSON 9 Accessing the Canvas
      1. An Ultra-Crash Course in JavaScript
        1. Accessing Form Elements from JavaScript
        2. Using the getElementById() Function
        3. The Simpler O() Function
        4. The Partner S() Function
      2. The <canvas> Tag
        1. Accessing the Canvas with JavaScript
        2. Converting a Canvas to an Image
      3. Summary
      4. Self-Test Questions
    3. LESSON 10 Creating Rectangles, Fills, Gradients, and Patterns
      1. Drawing Rectangles
        1. The fillRect() Function
        2. The fillStyle Property
        3. The clearRect() Function
        4. The strokeRect() Function
      2. Creating Gradients
        1. The createLinearGradient() Function
        2. The createRadialGradient() Function
        3. The addColorStop() Function
      3. Using Patterns
        1. The createPattern() Function
      4. Summary
      5. Self-Test Questions
    4. LESSON 11 Writing Text to the Canvas
      1. Writing Text
        1. The font Property
        2. The strokeText() Function
        3. The textAlign Property
        4. The textBaseline Property
        5. The fillText() Function
        6. Determining Text Width
      2. Summary
      3. Self-Test Questions
    5. LESSON 12 Drawing Lines, Paths, and Curves
      1. Drawing Lines
        1. The lineWidth Property
        2. The lineCap Property
        3. The lineJoin Property
        4. The miterLimit Property
      2. Drawing with Paths
        1. The beginPath() and closePath() Functions
        2. The moveTo() and lineTo() Functions
        3. The stroke() Function
        4. The rect() Function
        5. The fill() Function
        6. The clip() Function
        7. The isPointInPath() Function
      3. Creating Curves
        1. The arc() Function
        2. The arcTo() Function
        3. The quadraticCurveTo() Function
        4. The bezierCurveTo() Function
      4. Summary
      5. Self-Test Questions
    6. LESSON 13 Manipulating Images, Shadows, and Pixels
      1. Using Images
        1. The drawImage() Function
      2. Adding Shadows
      3. Pixel Editing
        1. The getImageData() Function
        2. The data[] Array
        3. The putImageData() Function
        4. The createImageData() Function
      4. Summary
      5. Self-Test Questions
    7. LESSON 14 Compositing, Transparency, and Transformations
      1. Compositing and Transparency
        1. The globalCompositeOperation Property
        2. The globalAlpha Property
      2. Using Transformations
        1. The scale() Function
        2. The save() and restore() Functions
        3. The rotate() Function
        4. The translate() Function
        5. The transform() Function
        6. The setTransform() Function
      3. Summary
      4. Self-Test Questions
  11. PART III Advanced HTML
    1. LESSON 15 Supporting Geolocation
      1. Accessing Geolocation with JavaScript
        1. The geolocation Property
        2. The getCurrentPosition() Function
        3. In the Real World
      2. The GPS Service
        1. Other Location Methods
      3. Summary
      4. Self-Test Questions
    2. LESSON 16 Building Advanced Forms
      1. New Form Attributes
        1. The autocomplete Attribute
        2. The autofocus Attribute
        3. The form Attribute
      2. Form Overrides
        1. The formaction Attribute
        2. The formenctype Attribute
        3. The formmethod Attribute
        4. The formnovalidate Attribute
        5. The formtarget Attribute
        6. The height and width Attributes
        7. The list Attribute and <datalist> and <option> Tags
        8. The min and max Attributes
        9. The multiple Attribute
        10. The novalidate and formnovalidate Attributes
        11. The pattern Attribute
        12. The placeholder Attribute
        13. The required Attribute
        14. The step Attribute
      3. New Form Input Types
        1. The color Input Type
      4. Date and Time Pickers
        1. The date Input Type
        2. The month Input Type
        3. The time Input Type
        4. The week Input Type
        5. The datetime Input Type
        6. The datetime-local Input Type
        7. The email Input Type
        8. The number Input Type
        9. The range Input Type
        10. The search Input Type
        11. The tel Input Type
        12. The url Input Type
      5. Summary
      6. Self-Test Questions
    3. LESSON 17 Implementing Local Storage and Cross-Document Messaging
      1. Using Local Storage
        1. Storing and Retrieving Local Data
        2. Removing and Clearing Local Data
      2. Cross-Document Messaging
      3. Summary
      4. Self-Test Questions
    4. LESSON 18 Playing Audio
      1. Understanding Codecs
      2. The <audio> and <source> Tags
        1. The <audio> and <source> Tag Attributes
        2. Supporting Older Browsers
      3. Summary
      4. Self-Test Questions
    5. LESSON 19 Displaying Video
      1. The Video Codecs
        1. The <video> and <source> Tags
        2. The <video> and <source> Tag Attributes
      2. Summary
      3. Self-Test Questions
    6. LESSON 20 Working with Microdata, Web Workers, and Web Applications
      1. Microdata
      2. Web Workers
      3. Offline Web Applications
      4. Drag and Drop
      5. Other HTML5 Tags
      6. Summary
      7. Self-Test Questions
  12. APPENDIX Answers to the Self-Test Questions
    1. Lesson 1 Answers
    2. Lesson 2 Answers
    3. Lesson 3 Answers
    4. Lesson 4 Answers
    5. Lesson 5 Answers
    6. Lesson 6 Answers
    7. Lesson 7 Answers
    8. Lesson 8 Answers
    9. Lesson 9 Answers
    10. Lesson 10 Answers
    11. Lesson 11 Answers
    12. Lesson 12 Answers
    13. Lesson 13 Answers
    14. Lesson 14 Answers
    15. Lesson 15 Answers
    16. Lesson 16 Answers
    17. Lesson 17 Answers
    18. Lesson 18 Answers
    19. Lesson 19 Answers
    20. Lesson 20 Answers
  13. Index