WebAssembly.fr/en/

HTML 5, platforms of online applications

The W3C, which sets the standards of the Web, has taken a specification started by the WHATWG.
This new format is implemented progressively by all browsers is designed for Web applications and adds both new tags and new features. It is now a successor to Flash and Silverlight.

Steve Jobs said for Apple:

"Apple does not support Flash because it is so buggy. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash. The world is moving to HTML5."
(Apple Town Hall Meeting, January 2010).

Extended features for Web applications

Using Web applications offline is the major trend since 2008.
In offline mode pages and objects they display are cached and a local SQL database (IndexedDB) stores the data to duplcate the remote base.

New graphical component has been added: see the list of form objects in HTML 5 and their current implementation in browsers.
The input tag can represent more types of objects and has new features like auto-complete. Output displays the result of calculations.
The addition of constraints on the data helps to secure the forms.

Section, article, header, footer tags are intended to give structure to a document.
Dialog is an object formalizing a discussion and is associated to a label element.
HTML has now canvas, audio, video tags and many other new elements.

Structure of an HTML 5 page
The tags required and new structure tags introduced with HTML 5.

Doctype
Which one to choose?

Div and span
Differences in practical use.

Select

Radio button
How to know what checkbox is thicked for Ajax scripts.

Contextual menu and toolbar

Table
How to organize tabular data.

InnerHTML and outerHTML
Accessing the content.

Tags to highlight a textual content
HTML has a series of tags to distinguish the essential or special in a text.

Comment
The HTML 5 tag, and conditional comments.

Iframe, for dynamic or sandboxed content

Canvas
This is a surface on which objects are displayed with JavaScript scripts.

The video tag

SessionStorage
Description and check for compatibility.

APIs for web applications

HTML 5 is gradually supplemented by APIs (Application Programming Interfaces) that turn a browser into an application platform.

FileReader
Loading a text or an image in a page, from the local file system.

Web Worker
There is an equivalent to Ajax for scripts running in the browser, not on the server.

DOM, Document Object Model

The Document Object Model allows interfacing programming languages with XML documents
by associating them with an object oriented model.
It describes the structure of an XML or HTML document, a web page and allows access to each individual element. We will see in this tutorial that you can modify each element of a page, or create a page or a part through DOM's methods.

This tutorial is based on the DOM 2 Core specification implemented by all browsers.

We will see the details of interfaces and how to use them in examples: list of attributes, list of methods, access to the content, add elements (example: Include another page), modify the contents, remove items.

Overview

What is DOM and how to use it.

Structure and hierarchy of interfaces of DOM Level 2 Core

Objects and sub-objets in a document.

Node

Each element of a HTML page or XML document is a node. The attributes and methode.

NodeList

Methods of a list of nodes.

Document and HTMLDocument

The document itself is a DOM object. HTMLDocument is a sub-object for a webpage.

Case studies

Changing images and the background in a Web page

DOM's objects and properties are sufficient to change dynamically graphical element in a webpage.

Displaying dynamically a video reader with Node