Course Number: 1000001
Length: 3 Days
HTML5 Training Course
HTML5 Training course by TONEX is a hands-on training program teaching you how to create web and mobile applications using HTML5, CSS3 and Javascript. You will learn how to create scalable, real-time Web and mobile applications with all HTML5, CSS3 and Javascript.
Mobile web standards including HTML5, CSS3, and JavaScript: open, reliable, highly secure, and efficient. HTML5 training course allow mobile and web designers and developers to create advanced graphics, video, local storage, typography, animations, and transitions.
HTML Version 5 was designed to provide a comprehensive application development platform for Web pages that eliminates the need to install third-party browser plug-ins such as Java and Flash. HTML5 provides advanced support for 2D/3D graphics , document editing, drag and drop, browser history management, audio and video playback , local file storage, web workers, application caches, and Geolocation.
HTML5 Training Course offers:
- New Elements and Attributes
- Full CSS3 Support
- Support for Video and Audio
- Support for 2D/3D Graphics
- Support for Local Storage and Local SQL Database
- Support for Mobile and Web Applications
A quick introduction to HTML
A basic HTML document looks like this:
<!DOCTYPE html> <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html>
Objectives
Upon Completion of the HTML5 training course, the attendees will have a good knowledge and development skills on:- HTML5, CSS3, and JavaScript for web and mobile development
- Creating and Structuring a HTML5 page
- Marking up a blog & the outlining algorithm
- Forms
- Multimedia (video, audio) markup and APIs
- Canvas
- Storage
- Working Offline
- Drag & Drop
- Geolocation
- Messages, Web Workers & Web Sockets
Outline
Introduction to HTML5
- Core Elements of HTML5
- Common infrastructure
- Semantics, structure, and APIs of HTML5 documents
- HTML5 at a Glance
- Core Features of HTML5
- HTML5 and Its Relationship to CSS3 and Javascript
- Mobile Development with HTML5
- Context
- Message
- Look and Feel
- Layout
- Color
- Typography
- Graphics
- Multimedia
Getting Started With HTML5
- Structure of a Web Page
- HTML5 DOCTYPE
- Encoding
- HTML5 Markup
- HTML5 and CSS3
- Viewport
- Forms
- Audio And Video
- Customizing Audio/Video Controls
- HTML5 Canvas
- Using A Canvas
- Drawing Text
- Drawing Images
- Working With Pixels
- Understanding Transforms
- Rendering
- Data Storage
- HTML5 Offline Applications
- The Manifest File
- HTML5 Caching
- HTML5 Geolocation
- HTML5 Web Workers
- HTML5 Messaging APIs
- Web Sockets
- Device access
- Connectivity
- Performance
Building Mobile Web Apps with HTML5
- Mobile Web (HTML5) Frameworks
- Cascading Style Sheets Version 3 (CSS3)
- New Semantic Elements
- Web application APIs
- User interaction
- Geolocation
- Audio and Video Tags
- Local Storage Capacity
- Web Forms
- Canvas 2D and 3D drawing surface
- Scalable Vector Graphics (SVG)
- Comparison between SVG and Canvas
- Loading Web pages
- Web Workers
- Web Storage
- Web Sockets
- Microdata
- Device API and File API
Working with HTML5 Tags
- Audio Tag
- Video Tag
- Canvas Tag
- Canvas Tag 3d (WebGL)
- Ruby Tag
- Semantic Markup
- Form Fields
- Selectors API
- Inline SVG
- Text inside SVG
- Microdata
- Link Relations
Working with CSS3
- Columns
- Rounded Corners
- Web Fonts
- Text Wrapping
- Text Stroke
- Transitions
- 2d Transforms
- Animations
- Gradients
- New Selectors
- Flex Box Model
- Flex Box Model - Complex
- Text and Box Shadow
- Web Storage
- localStorage
- sessionStorage
- Web SQL Database
- Async Transactions
- XDomain Communication
- postMessage
- File API
- Using FileReader
- Notifications
- Simple Notifications
- Web Notifications
- Geolocation API
- Get Current Position
- Web Workers
- Inline Workers
- Native Drag and Drop
- Drag and Drop
Labs: Building Mobile Apps with HTML5, CSS3 and Javascript
- JavaScript animations
- CSS3 Effects
- Flexible Box Model: Basic Example
- Flexible Box Model: Center Stage
- 3D and CSS
- 3D Transformation
- Multimedia
- Audio Tag with Fallback to Flash
- Video Formats
- Video + Canvas
- Exploring the FileSystem APIs
- FileSystem APIs
- A Simple Trip Meter using the Geolocation API
- The Final Product: Trip Meter
- Building a Simple TODO Lists using Web Storage
- Building a Simple TODO List using Web SQL Database
- Building a Simple TODO List using IndexedDB
- Create a Twitter App
- MakeAjaxCalls
- Add Geolocation, Detect Orientation and Use CSS3 Media Queries
- Create an Address Book App with Forms
- Build a Movie Trailer app with Audio and Video
- Draw Using JavaScript and Canvas
Elective Labs
- Building Games with HTML5, CSS3 and Javascript