Book This Course  

HTML5

HTML5: Essentials

Front Runner does not provide public courses. As needs vary from client to client, we focus on meeting those specific needs.

Therefore, Front Runner courses are available online, or on-site at your place of business. Our clients prefer either one-on-one customized or team training.

We offer the option of choosing the topics our clients need to get the job done. This ensures greater success, once the client is back in the trenches, using the software.

Reasonably priced rates are available for your team's training.

If you are interested in courses not listed, please ask. We have the resources to teach more products than are listed on our training pages.

---

Overview:

With scores of practical recipes you can use in your projects right away, this course helps you gain hands-on experience with HTML5’s versatile collection of elements. You get clear solutions for handling issues with everything from markup semantics, web forms, and audio and video elements. Each informative recipe includes sample code and a detailed discussion on why and how the solution works.

This two day course will have you work through tasks to achieve the following:

• Test browsers for HTML5 support, and use techniques for applying unsupported features
• Discover how HTML5 makes web form implementation much simpler
• Overcome challenges for implementing native audio and video elements
• Learn techniques for using HTML5 with ARIA accessibility guidelines

---

Delivery: Instructor-led, hands-on delivery either online, on-site at your place of business or at Front Runner. Our custom training meets your needs.

---

Duration: Two days

---

Prerequisites:

The prerequisities for this course: You should have a basic understanding of HTML and how the XML tags are used to create a website. CSS knowledge would be a plus but not required. Also, you would need to have an IDE (http://en.wikipedia.org/wiki/Integrated_development_environment) that you would use as Front Runner will not provide one.

---

Objectives:

Upon successful completion of this course, you should be able to understand and work with the following:

1. Fundamental Syntax and Semantics

• Specifying the DOCTYPE
• Specifying the Character Set
  
• Specifying the Language
  
• Optimizing scripts and links
  
• Adding Document Structure with HTML5's New Elements
  
• Choosing Between article and section
  
• Checking Your Document Outline
  
• Modifying the Document Outline
  
• Emphasizing Text
  
• Adding Importance to Text
  
• Highlighting Text for Reference
  
• Marking Up Small Print
  
• Defining Acronyms and Abbreviations
  
• Adding Links to Block-Level Content
  
• Marking Up Figures and Captions
  
• Marking Up Dates and Times
  
• Setting the Stage for Native Expanding and Collapsing
  
• Controlling the Numbering of Your Lists
  
• Hiding Content to Show Later
  
• Making Portions of a Page Editable
  
• Setting the Stage for Native Drag-and-Drop

2. Progressive Markup and Techniques

• Adding More Semantic Meaning
• Picking a Markup Style
  
• Understanding Browser Support for HTML5
  
• Making Internet Explorer Recognize HTML5 Elements
  
• Detecting HTML5 Features with JavaScript
  
• Using HTML5 Boilerplate
  
• Validating HTML5
  
• Mapping HTML5 Elements to ID and Class Names

3. Forms

• Displaying a Search Input Field

• Contact Information Input Fields
  
• Utilizing Date and Time Input Fields
  
• Number Inputs
  
• Selecting from a Range of Numbers
  
• Selecting Colors
  
• Creating an Editable Drop-Down
  
• Requiring a Form Field
  
• Autofocusing a Form Field
  
• Displaying Placeholder Text
  
• Disabling Autocomplete
  
• Restricting Values
  
• Making HTML5 Work in Older Browsers
  
• Validating Form Data in Older Browsers with JavaScript
  
• Example: Sample Form

4. Native Audio

• Adding HTML5 Audio

• Manipulating the Audio Stream
  
• Generating audio Using JavaScript
  
• Visualizing audio Using canvas
  
• Sample Design: Custom Audio Player

5. Native Video

• Adding HTML5 Video

• Ensuring Multi-Browser Video Support
  
• Setting Video Dimensions
  
• Displaying a Placeholder Image Before Video Plays
  
• Making Video Loop
  
• Sample Design: Manipulating Video with canvas

6. Microdata and Custom Data

• Adding Microdata to Markup

•  

Book This Course