Moving to HTML 5.0

מק"ט: #3360 | משך קורס: 24 שעות אק'

HTML5 is the next generation of HTML and it will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support. In this seminar we'll present a brief overview to the new HTML5 features and benefits. A collection of new features - rich typography, native audio & video, powerful drawing and image manipulation API – allow you to create web pages with unparalleled user experience. Native HTML has many benefits over Flash and enterprise developers will be asked to use it more and more.

This class is meant for experienced HTML developers who are already familiar with web site development. They will be able to upgrade their skills to the HTML5 level.

*שדות חובה
PDF version

קהל יעד

• Professional web designers and developers who want to upgrade their skills to HTML5

תנאי קדם

  • Experience in client-side development using HTML
  • Basic knowledge of CSS and JavaScript is highly recommended


Upon completion of this course participants will be able to:

  • Understand the history of HTML5 and current browser support for it
  • Know when to use Flash and when to use HTML5
  • Use the new HTML5 input types
  • Validate form without any JavaScript
  • Draw shapes, images, and text using the canvas element
  • Play music & videos without requiring a special plug-in using the music & video elements
  • Pinpoint the user’s location using the Geo-location API
  • Build multi-threaded client applications that take better advantage of multi-core machines using the Web Worker API and Messaging API
  • Build push-based applications using the WebSocket API, so the server can initiate communicates with the client







Module 1: What is HTML5?

  • HTML Time Line History
  • Review Standard for HTML, XHTML, and the HTML DOM
  • Proprietary RIA technologies overview: Adobe Flash, Microsoft Silverlight and Sun JavaFX
  • Current State of HTML5

Module 2: HTML5 vs. HTML 4

  • HTML Specification
  • HTML Doctype
  • Character Encoding
  • Forms
  • Integrated APIs and Associated APIs

Module 3: Rules for HTML5

  • HTML5 rules overview
  • Rules based on HTML, CSS, DOM, and JavaScript
  • External plugins
  • Error handling
  • More markup to replace scripting
  • Device independent
  • Visible development process

Module 4: HTML5 New Features

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content specific elements, like article, footer, header, nav, section
  • New form controls, like calendar, date, time, email, url, search
  • Reduce need for plug-ins

Module 5: HTML5 Browser Support

  • Current browser support for HTML 5
  • Detecting support for HTML 5

Module 6: Creating HTML5 Documents

  • Content Models
  • Outline algorithm
  • Use of DIV tags
  • Use ID & class attributes
  • DOCTYPE declarations
  • Character encoding       


Module 7: Structuring HTML5 Document

  • Basic Page Structure
  • Top level Elements
  • Interior Content
  • Headers
  • Checking outlines
  • Cross Browser Structure

Module 8: HTML5 New Elements


  • New elements for better structure
  • New standard for media content
  • Canvas element uses JavaScript to make drawings on a web page
  • More form elements, with more functionality
  • Input element's type attribute for better input control

Module 9: HTML5 Canvas

  • Definition
  • Creation Canvas Element
  • Using JavaScript
  • Understanding Coordinates
  • Drawing Shapes:
    • Paths (BeginPath, MoveTo, LineTo), Rectangles, Lines, Arcs
    • Bezier and Quadratic curves
    • Combining Drawing Shapes
  • Drawing Images
  • Drawing Gradient
  • Applying styles and colors
  • Transformations
  • Compositing
  • Basic animations
  • Browser Support

Module 10: HTML5 Audio

  • Standard for Audio on the Web
  • Audio Formats
  • Making it Work
  • Review Audio Attributes
  • Browser Support

Module 11: HTML5 Video

  • Standard for Video on the Web
  • Video Formats
  • Making it Work
  • Review Video Attributes
  • Browser Support         


Module 12: HTML5 Forms

  • New Form Elements
  • New Form Attributes
  • New input attributes

Module 13: HTML5 Web Storage

  • Benefits
  • Local Storage method
  • Session Storage Method


Module 14: Error Handling

  • Understanding how browsers deal with incorrect syntax

Module 15: Integrated APIs

  • Video and Audio API
  • Inline Editing API
  • Offline Application API
  • History API
  • Web Protocol API
  • Drag and Drop API

Module 16: Associated APIs

  • Geolocation API
  • 2D Canvas Drawing API
  • Local Storage API
  • Web Workers API
  • Web Socket API
  • Messaging API