Overview
This course imparts learning on HTML5 and discovers how to incorporate its countless features in web pages and applications.
This training is to ensure smooth knowledge transfer for basic to HTML5 advanced topics like Layouts, Forms, Offline Support, Geolocation, Audio and Video graphics, Communication APIs, Storage, JavaScript Web-Workers and others.
What You'll Learn
After completion of HTML5 training course, the participants will be able to:
- Use HTML5 Markup
- Use the HTML5 JavaScript APIs
- Understand current browser support for the various HTML5 features
- Understand how to emulate certain HTML5 features in older browsers
- Learn best practices for using HTML5
Curriculum
- W3C and W3C Members
- What is Web?
- Introduction to HTML
- Parts of HTML Document
- Editors
- Basic
- Elements
- Attributes
- Headings
- Basics
- Paragraphs
- Formatting
- Links
- Head
- CSS
- Images
- Tables
- JavaScript
- HTML XHTML
- HTML4 Drawbacks
- HTML5 HISTORY
- New Features and groups
- Backward Compatibility
- Power of HTML5
- m or mobi or touch domains
- Common Terms in HTML5
- The DOCTYPE
- Character Encoding
- <acronym>
- <basefont>
- <applet>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <s>
- <u>
- <isindex>
- <noframes>
- <strike>
- <tt>
- <xmp>
- New Semantic/Structural Elements
- <article>
- <aside>
- <bdi>
- <command>
- <details>
- <dialog>
- <summary>
- <figure>
- <figcaption>
- <footer>
- <header>
- <mark>
- <meter>
- <nav>
- <progress>
- <ruby>
- <rt>
- <rp>
- <section>
- <time>
- <wbr>
- What is Canvas?
- Creating a Canvas
- Canvas Coordinates
- Canvas – Paths
- Canvas – Text
- Canvas – Gradients
- Canvas – Images
- What is SVG?
- Advantages of SVG
- Differences in Canvas and SVG
- Comparison in Canvas and SVG
- Introduction
- Make an Element Draggable
- What to Drag? Where to Drop?
- Introduction to Geolocation
- Locating User’s Position
- Handling Errors and Rejections
- The getCurrentPosition()
- Geolocation object
- Introduction to HTML5 Video
- Video on the Web
- How HTML5 Video Works
- Video Formats and Browser Support
- HTML5 Video Tags
- Introduction to HTML5 Audio
- Audio on the Web
- How HTML5 Audio Works
- Audio Formats and Browser Support
- HTML5 Audio Tags
- Introduction to Input types
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- <datalist>
- <keygen>
- <output>
- New attributes for <form> and <input>New attributes for <form>:
- Autocomplete
- novalidate
- Introduction
- What are Semantic Elements?
- Non-semantic elements: <div> and <span>
- Semantic elements: <form>, <table>, and <img>
- New Semantic Elements in HTML5
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- What is HTML5 Web Storage?
- Browser Support in HTML5
- Objects
- The localStorage
- The sessionStorage
- What is Application Cache?
- Basics of Cache Manifest
- Cache Manifest in HTML5
- Web Worker in HTML5
- Checking Web Worker Support
- Creating Web Worker Files
- Terminating Web Worker
- One Way Messaging
- Browser Support
- The EventSource Object
- New Media Elements
- <audio>
- <video>
- <source>
- <embed>
- <track>
- resize
- box-sizing
- outline-offset
- CSS Basics
- CSS Introduction
- CSS Syntax, CSS Id, Class and CSS Styling, Styling Backgrounds
- Styling Text, Styling Fonts, Links, Styling Lists and Styling Tables
- CSS Border
- Introduction
- Using MathML Characters
- Matrix Presentation
- Math Formulas
- What is Multimedia?
- Browser Support
- Multimedia Formats
- Video Formats
- Sound Formats
- Introduction
- CSS3 Modules
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
- border-radius
- box-shadow
- border-image
- @font-face Rule
- font-stretch
- font-weight
- text-shadow
- word-wrap
- background-size
- background-origin
- How does it Work?
- Browser Support
- 2D Transforms
- translate()
- rotate()
- scale()
- skew()
- matrix()
- rotateX()
- rotateY()
- resize
- box-sizing
- outline-offset
- column-count
- column-gap
- column-rule
- CSS3 @keyframes Rule
- Browser Support
- Animation, animation-duration
- How does it work?
- Transition-property, duration and delay
Prerequisites
Participants should be familiar with HTML, CSS, and JavaScript. Prior exposure to XML and Ajax is helpful, but not compulsory.
