HTML5 Examples

These examples belong to the HTML5 tutorial of ict-Media GmbH. All examples are kept simple but effective. There is an outline of the Tutorial in some languages (English, German and Chinese). Detailed explanation of the examples are part of the tutorial.

HTML5 sectioning elements:

The (new) sectioning elements in HTML5 allow to add more semantic to the mark-up of documents. The examples head for a scheme allowing flexible easy authoring of structured articles while increasing their accessibility.

1. First example: Basics
2. Second example: Better outline representation by indentation.
3. Third example: General scheme which allows to float subsections freely between levels within the document.
4. Forth expamle: Like example three. One Section moved one level down.

HTML5 Forms

HTML5 forms allow much better user interaction while providing means for easy input checking:

1. The Forms example allows to test how browsers implement the new features. Different input types can be selected from a list.
2. Same example using the new CSS :valid pseudo class from CSS 3
3. Another example (a simple calculator) shows his results using the new meter, progress and output elements.

HTML5 Editable Content and local storage

1. This Example allows to edit part of the document and save the result.

HTML5 Drag'n Drop and CSS Positioning

1. Towers of Hanoi a simple game to demonstrate Drag'n Drop mechanics. (ASCII disks)

HTML5 Multimedia Mark-Up

HTML5 makes video and audio first class citizens of the web.

1. First example: simple video embedding
2. Second example: video with form controls
3. Third example: freaky video mutation by means of canvas

CSS3 the presentational part of HTML5

Revisiting the Towers of Hanoi and sex them up by everything CSS3 offers us:

1. Substituting ASCII disks by CSS boxes.
2. Preparing the stage
3. Finally: here are the disks! Ready to play.

Another new feature of CSS3 is the use of server side fonts.

1. We use it to fake a medival bible page.
2. A click on the page also demonstrates CSS3 animation.
3. Less medival but just to show the CSS3 multicolumn feature: the same bible page in 2 column format.

Canvas

1. A page showing 3 circles filled with colors or gradients 120° appart from each other. Allows to play with globalCompositeOperation and transparency.
2. A bigger application, the prototype for a routing application based on OSM, GPS and canvas.

Web Workers

1. A cosmos filled with balls that attract or repel each other.