HTML5 Digital Classroom

HTML5 Digital Classroom

Released October 2011
Publisher(s): Wiley
ISBN: 9781118016183

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

This training package - complete with full-color book and instructional video - is the easiest way to learn HTML5!

HTML5 boasts extensive new features that allow you to create dynamic web pages and present users with amazing multimedia experiences, and this one-of-a-kind training package is your guide to creating websites that wow! HTML5 Digital Classroom provides step-by-step instruction to help you gain the essential HTML5 knowledge you need to master the latest HTML5 specifications. This book-and-video package will have you creating web pages and web applications using HTML5, styling using CSS3, and working effectively with JavaScript and jQuery like a pro.

This personal training course uses a full-color book plus video tutorials to teach you how to design compelling websites and web apps, develop your coding skills, and take full advantage of the new web standards for creating rich multimedia experiences. This book starts at a foundational level with an introduction to HTML5 before moving on to more advanced topics like creating HTML5 forms, using geo location, implementing drag-and-drop, utilizing the Canvas element to create 2D and 3D graphics, and more.

  • Includes 15 lessons in full-color covering introductory to advanced HTML5 topics plus video tutorials and sample files that allow you to test your skills and work at your own pace

  • Fully updated for the latest HTML5 specifications and browser capabilities

  • Covers the basics of creating web pages with HTML5, formatting text and layouts with CSS3, using web fonts, understanding HTML5 markup, and optimizing your site for viewing on mobile devices

  • Explains more advanced concepts like working with video and audio, taking advantage of offline storage, using the Canvas element, enhancing your website with JavaScript and jQuery, and incorporating best practices for web coding into your workflow

    • Get comfortable with writing and reviewing HTML5 compliant code and put your web development skills to work today with HTML5 Digital Classroom.

    NOTE: DVD and other supplementary materials are not included as part of eBook file. These materials are available for download upon purchase.

    Table of contents

    1. Cover
    2. Contents
    3. Starting up
      1. Using this book
      2. About HTML5 Digital Classroom
        1. Prerequisites
        2. System requirements
      3. Using web browsers that support HTML5 tags
      4. Understanding menus and commands
      5. Understanding how to read HTML and CSS code changes
      6. Loading lesson files
        1. Downloading the lesson files to your hard drive
      7. Working with the video tutorials
      8. Additional resources
        1. Seminars and conferences
    4. Section One: Essentials of HTML, HTML5, and CSS
    5. Lesson 1: Defining HTML5
      1. Starting up
      2. Defining HTML5
        1. HTML5 expands the definition of what a web page can do
      3. HTML5 markup
      4. A tour of the key HTML5 elements
        1. The <video>, <audio>, and <canvas> elements
        2. Web forms
        3. Many more new HTML5 elements
      5. An overview of HTML5 APIs and supporting technologies
        1. Geolocation in action
        2. Web Workers
        3. Web storage
      6. CSS3 is not part of HTML5, but is closely related
        1. CSS animations
        2. CSS transitions
        3. CSS 2D- and 3D-transformations
        4. CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
        5. @font-face web fonts
      7. HTML5 is in a state of transition
        1. Who is using HTML5 today?
        2. Identifying HTML5 sites
      8. Self study
      9. Review
    6. Lesson 2: Fundamentals of HTML, XHTML, and CSS
      1. Starting up
      2. Web languages
        1. Web page structure is based on HTML
        2. The details of XHTML syntax
        3. Doctype lets the web browser know what to expect
        4. The W3C and page validation
      3. HTML structure
        1. Placing images in HTML
      4. The role of CSS
        1. Styling a heading
        2. Understanding class styles and the <span> element
        3. Three ways to use styles
        4. Internal versus external style sheets
        5. Creating an external style sheet
        6. What makes styles cascading
      5. Self study
      6. Review
    7. Lesson 3: Formatting Text with CSS
      1. Starting up
      2. The importance of typography on the Web
        1. The challenges of fonts on the Web
        2. Setting a font-family
      3. Sizing text with CSS
        1. Pixels and points are not the best choices
        2. Using a combination of percent and the em measurement
      4. Using margins to modify the space between your text
        1. Setting paragraph line-height
        2. Transforming text with CSS
      5. Working with HTML lists
        1. Styling HTML lists
      6. Self study
      7. Review
    8. Lesson 4: Introduction to CSS Layout
      1. Starting up
      2. Working with a CSS reset file
      3. A brief history of layout techniques on the Web
        1. An overview of page layout options
        2. Understanding the <div> element: creating a two-column fixed-width CSS layout
      4. Understanding the CSS float property
        1. Creating columns with the float property
        2. Working with the clear property
      5. Creating a list-based navigation using floats
        1. Adding text styles
      6. The effect of margins and padding on your fixed-width layout
        1. A review of using margins and padding for layout
        2. Styling your footer with a background image
      7. Self study
      8. Review
    9. Lesson 5: Advanced CSS Layout
      1. Starting up
      2. Building your page layout
        1. Removing the background color
      3. Working with CSS background images
        1. Using hacks to solve layout problems
      4. Enhancing your CSS navigation bar
        1. Moving internal styles to the external style sheet
      5. Creating a style for the active page
        1. Adding images to your sidebar
      6. Working with absolute positioning
      7. Self study
      8. Review
    10. Section Two: HTML5 with CSS3 and JavaScript
    11. Lesson 6: Using HTML5 Markup
      1. Starting up
      2. A review of semantic markup
        1. HTML5 fundamentals
        2. The HTML5 DOCTYPE declaration
        3. The different categories used for HTML5 content
      3. Using the new header element in HTML5
        1. Adding support for HTML5 elements in browsers
      4. Adding the HTML5 <nav> elements
      5. Adding the other HTML5 sectioning elements
        1. HTML5 document outlines
      6. Adding the footer element
      7. Adding the article and aside elements
      8. Additional HTML5 elements
      9. Revisiting familiar HTML elements
      10. Self study
      11. Review
    12. Lesson 7: Creating HTML5 Forms
      1. Starting up
      2. The need for updated forms
      3. Reviewing how forms work
        1. The components of a form
      4. Adding new HTML5 input types and attributes
        1. Creating an order form with new HTML5 input types and attributes
      5. HTML5 form features under development
        1. Providing fallbacks for browsers that don’t support HTML5 features
      6. Self study
      7. Review
    13. Lesson 8: Introduction to JavaScript and jQuery
      1. Starting up
      2. Interactivity on the Web
        1. Adobe Flash
        2. JavaScript
      3. JavaScript basics
        1. JavaScript events
        2. Placing your JavaScript into an external document
        3. The Document Object Model
        4. JavaScript frameworks
      4. Hiding an element with jQuery
        1. Adding an event to trigger the show effect
      5. Self study
      6. Review
    14. Lesson 9: Working with Video and Audio Elements
      1. Starting up
      2. Adding video
      3. Adding support for more browsers
      4. Adding fallback support for older browsers
      5. Controlling a video with JavaScript
      6. Adding audio
      7. Self study
      8. Review
    15. Lesson 10: Working with Canvas
      1. Starting up
      2. Understanding the Canvas element
      3. The benefits of the Canvas element
      4. Drawing paths
        1. Drawing rectangles
        2. Drawing lines and circles
        3. Drawing with curves
      5. Adding text
      6. Using colors, styles, and gradients
      7. Adding images
      8. Using transforms
      9. Creating a drawing loop
      10. Self study
      11. Review
    16. Lesson 11: Styling with CSS3
      1. Starting up
      2. Understanding the role of CSS3
      3. Using CSS3 border-radius and border-image
      4. Adding multiple background images
      5. Working with CSS3 transparency and opacity
      6. Using CSS3 gradients
        1. Linear Gradients
        2. Angles and Multiple stops
        3. Radial Gradients
        4. Repeating Gradients
        5. Using RGBA colors
      7. CSS3 transforms, transitions, and animation
        1. Creating CSS3 transforms and transitions
      8. Working with CSS animation
      9. Self study
      10. Review
    17. Lesson 12: Working with Web Fonts
      1. Starting up
      2. Working with web fonts
      3. Using @font-face to specify a web font
      4. Using a web service to generate multiple fonts
      5. Using a web font library
        1. Using Google Web Fonts
        2. Using Adobe Edge Web Fonts
      6. Self-Study
      7. Review
        1. Questions
        2. Answers
    18. Lesson 13: CSS3 Media Queries and New CSS3 Page Layout Options
      1. Starting up
      2. The role of CSS3 media queries
        1. Using CSS3 media queries to deliver a mobile-optimized layout
      3. New CSS3 Page Layout Options
        1. The CSS3 multi-column layout
        2. The CSS3 Flexible Box layout module
        3. The CSS3 Grid Template Layout Module
        4. Adding template-based position to CSS
      4. Self study
      5. Review
    19. Lesson 14: Offline Storage in HTML5
      1. On the road, again
      2. Offline storage in HTML5
      3. HTML5 storage types
        1. localStorage methods
        2. localStorage example
        3. Putting it all together
      4. Advanced data storage
      5. Application caching
      6. The cache manifest file
        1. Cache manifest structure
        2. Updating the cache
      7. The object
        1. Bringing it all together
      8. Self study
      9. Review
    20. Lesson 15: HTML5 Geolocation
      1. Starting up
      2. Understanding Geolocation
      3. Getting the user’s location
      4. Displaying the user’s location with Google Maps
      5. Creating a HTML5 Geolocation and Google Maps mashup
        1. Adding Google Map markers to your geolocation page
      6. Self study
      7. Review
    21. Lesson 16: HTML5 Drag and Drop
      1. Starting up
      2. Drag and drop on the Web
        1. Cross-browser drag and drop
      3. Transferring data with a drag-and-drop operation
      4. Self study
      5. Review
    22. Appendix: HTML5 Elements and Attributes
      1. Table 1 List of current HTML5 elements
      2. Table 2 List of element content categories
      3. Table 3 List of attributes
      4. Table 4 List of event handler content attributes
      5. Table 5 List of events
      6. Table 6 Media element events
    23. About the Authors
    24. HTML5 Digital Classroom
    25. Credits

    Product information

    • Title: HTML5 Digital Classroom
    • Author(s):
    • Release date: October 2011
    • Publisher(s): Wiley
    • ISBN: 9781118016183