HTML5 Introductie

HTML5 is de laatste en meest geavanceerde versie van HTML, technisch gezien is HTML geen programmeertaal maar een opmaaktaal. In deze introductie geef ik de belangrijkste veranderingen en nieuwe features binnen HTML5 aan, een basiskennis van HTML is hiervoor wel nodig.

HTML5 in vogelvlucht

HTML5 is de volgende grote revisie van de HTML standaard en deze vervangt de laatste versies HTML 4.01 en XHTML 1.1. HTML5 is de nieuwe standaard voor het structureren en presenteren van webcontent en het is een samenwerking van het World Wide Web Consortium (W3C) en de Web Hypertext Application Technology Working Group (WHATWG). Deze nieuwe standaard zal ook voor het eerste dingen als video afspelen en drag-and-drop en uitgebreide grafische mogelijkheden implementeren. Momenteel (begin 2014) ondersteunen de laatste versies van Apple Safari, Google Chrome, Mozilla Firefox en Opera de meeste HTML5 features en Internet Explorer 9.0 zal ook al enige support hebben voor HTML5. Alle mobile web browsers die voorgeïnstalleerde staan op mobiele telefoons en tablets hebben uitstekende support voor HTML5. Binnen Microsoft Windows 8 RT is HTML5 / CSS3 / Javascript zelfs het voorkeur programmeer platform voor apps.

Nieuwe features van HTML5

HTML5 introduceert een aantal nieuwe elementen en attributen die kunnen helpen om moderne websites, maar ook complete web-apps te bouwen.

Nieuwe tags om secties binnen uw document beter aan te kunnen geven zoals: <header>, <footer> en <section>.
Forms 2.0, veel verbeteringen en uitbreidingen (extra attributen) voor <input> tags.
Persistent Local Storage, lokaal opslaan van gegevens zonder extra plugins.
WebSocket, de mogelijkheid om bidirectioneel te communiceren vanuit een web applicatie.
Server-Sent Events, dit zijn events die geïnitieerd worden door de web server naar de client browsers.
Canvas, een hele mooie feature om een grafisch vlak toe te voegen waar men door middel van JavaScript op kan tekenen. Dit maakt het zelfs mogelijk complete grafische platformspellen te programmeren in HTML5 canvas, JavaScript en CSS3.
Audio en Video, ook kunt u nu audio en / of video embedden in uw web pagina's zonder gebruik te maken van extra plugins.
Geolocation, bezoekers hebben nu de mogelijkheid om hun locatie door te geven aan uw web applicatie.
Drag and drop, de mogelijkheid om items te verslepen op uw webpagina.

Backward compatibiliteit

HTML5 is ontworpen om zoveel mogelijk backward compatible te zijn met alle bestaande webbrowsers. Veel nieuwe features bouwen door op al bestaande features en bieden een zogenaamde fallback mogelijkheid voor oudere browsers. Ik ga niet in op de discussie of men nog oudere browsers moet ondersteunen of bezoekers gewoonweg moet weigeren wanneer ze met een verouderde browser de website bezoeken. Toch is het wel handig om de browserversie te detecteren en bepaalde features aan of uit te zetten, maar ook is het nu nog belangrijk om te detecteren of een bepaalde nieuwe feature wel ondersteund wordt door de web browser.

HTML5 Syntax

In veel opzichten is HTML5 minder streng dan HTML4 en XHTML zoals: grote en kleine letter zijn toegestaan voor tag namen (hoewel kleine letter wel het meest gebruikt worden), quotes zijn weer optioneel voor attributen, attribuut waarden zijn optioneel, het sluiten van lege elementen is optioneel.

DOCTYPE

Het DOCTYPE was in oudere versie van HTML veel langer omdat die versie van HTML nog op SGML gebaseerd waren en dus een DTD moesten specificeren. HTML5 gebruikt een zeer korte DOCTYPE:

<!DOCTYPE html>

Character Encoding

Ook de Character Encoding metadata tag is eenvoudiger geworden:

<meta charset="UTF-8">

De <script> en <link> tag

Het type attribuut is bij deze tags komen te vervallen en de syntax is nu:

<script src="scriptfile.js"></script>

<link rel="stylesheet" href="stylefile.css">

HTML5 elementen

Net als in de vorige versie van HTML zijn HTML5 elementen opgemaakt door middel van start tags en eind tags. Tags worden opgemaakt door kleiner en groter dan tekens met daartussen de tagnaam. Het verschil tussen start en eind tags is dat eind tags een / bevatten voor de tagnaam:

<div>...</div>

HTML5 tagnamen kunnen in (gemengd) grote en kleine letters geschreven worden maar gebruikelijk is wel geheel kleine letters. De meeste elementen zoals

omsluiten data maar er zijn ook lege tags die geen data mogen bevatten zoals <br /> en <hr />.

HTML5 attributen

Elementen kunnen attributen hebben die informatie toevoegen aan het element, sommige attributen zijn globaal en kunnen bij elk element gebruikt worden zoals bijvoorbeeld id="naam" en class="naam" meer er zijn ook attributen die alleen maar bij specifieke elementen gebruikt mogen worden. Attributen mogen alleen in de start tag gebruikt worden en ook deze attributen mogen zowel kleine als grote letters bevatten, maar ook hier is het gebruikelijk om alleen kleine letters te gebruiken.

<div class="voorbeeld">...</div>

HTML5 document

De volgende tags zijn toegevoegd om het HTML document beter te structureren:

<section> Deze tag geeft een sectie aan binnen een document en kan samen gebruikt worden met de h1 .. h6 tag om het document te structureren.
<article> Door middel van deze tag kunt u het begin en het einde van een artikel binnen uw document aangeven.
<aside> Door middel van deze tag kunt u aangeven dat deze content zijlings te maken heeft met de content binnen het document.
<header> Deze tag omsluit de header van een sectie.
<footer> Deze tag geeft de footer van een sectie aan en ka n ook informatie over de auteur , copyright e.d. bevatten.
<nav> Deze tag geeft een sectie binnen het document aan dat bedoeld is voor navigatie.
<dialog> Door middel van deze tag kunt u een sectie met een dialoog aangeven.
<figure> Deze tag kan een sectie aangeven binnen uw document waar een afbeelding of video staat.

Een voorbeeld van het gebruik van deze tags is:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>...</title>
 </head>
 <body>
 <header>...</header>
 <nav>...</nav>
<article> <section> ... </section> </article>
<aside>...</aside>
<footer>...</footer>
</body>

Standaard attributen

De volgende attributen kunnen toegepast worden op bijna alle HTML5 tags:

Attributen	Options	Function
accesskey	User Defined	Specifies a keyboard shortcut to access an element.
align	right, left, center	Horizontally aligns tags
background	URL	Places an background image behind an element
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
class	User Defined	Classifies an element for use with Cascading Style Sheets.
contenteditable	true, false	Specifies if the user can edit the element's content or not.
contextmenu	Menu id	Specifies the context menu for an element.
data-XXXX	User Defined	Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggable	true,false, auto	Specifies whether or not a user is allowed to drag an element.
height	Numeric Value	Specifies the height of tables, images, or table cells.
hidden	hidden	Specifies whether element should be visible or not.
id	User Defined	Names an element for use with Cascading Style Sheets.
item	List of elements	Used to group elements.
itemprop	List of items	Used to group items.
spellcheck	true, false	Specifies if the element must have it's spelling or grammar checked.
style	CSS Style sheet	Specifies an inline style for an element.
subject	User define id	Specifies the element's corresponding item.
tabindex	Tab number	Specifies the tab order of an element.
title	User Defined	"Pop-up" title for your elements.
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
width	Numeric Value	Specifies the width of tables, images, or table cells.

Zelfgedefinieerde attributen

Een nieuwe toevoeging aan HTML5 is de mogelijkheid om zelf attributen te bedenken, de enige voorwaarde is dat ze met data moeten beginnen. Door middel van deze attributen kunt u dus bijvoorbeeld extra data doorgeven aan de JavaScript routines die iets met deze tags willen doen.

<div class="voorbeeld" data-subject="geografie"> ... </div>

HTML5 events

HTML5 heeft ook een uitbreiding van het aantal events, door middel van deze events kunt u bijvoorbeeld routines in JavaScript aanroepen die bijvoorbeeld handelingen van de gebruiker kunnen verwerken. Een complete lijst van events en wat deze events veroorzaakt kun u elders op Internet vinden.

HTML5 Web Forms 2.0

Web Forms 2.0 is een uitbreiding op de formulier mogelijkheden van HTML4. Het grote voordeel hiervan is dat er meer validatie gedaan kan worden door de browser zonder dat daar extra JavaScript code voor nodig is. Hier is een overzicht van de nieuwe input types:

Type	Description
datetime	A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-local	A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
date	A date (year, month, day) encoded according to ISO 8601.
month	A date consisting of a year and a month encoded according to ISO 8601.
week	A date consisting of a year and a week number encoded according to ISO 8601.
time	A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number	This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range	The range type is used for input fields that should contain a value from a range of numbers.
email	This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url	This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

HTML5 en SVG

SVG staat voor Scalable Vector Graphics en het is een gestandaardiseerde taal voor het beschrijven van 2D afbeeldingen die gerenderd kunnen worden door een SVG viewer. SVG is ideaal voor bijvoorbeeld diagrammen. Bijna alle moderne browsers kunnen SVG weergeven net als PNG, GIF, en JPG. Alleen moeten sommige Internet Explorer gebruikers eerste de Adobe SVG Viewer installeren. Hier is een voorbeeld van een HTML5 SVG cirkel.

<h1>HTML5 SVG Cirkel</h1>
<svg id="svgelem" height="120" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

Wanneer uw browser SVG kan weergeven ziet u hier nu een cirkel.

U kunt ook vierkanten, rechthoeken, lijnen, ellipsen weergeven.

<h1>HTML5 SVG rechthoek</h1>

<svg id="svgelem" height="120" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>

HTML5 en webSockets

Web Sockets is nieuw bidirectionele communicatie technologie voor web applicaties waarbij men via JavaScrip direct kan communiceren met een server. Een webapplicatie kan dus data in de achtergrond verzenden en ontvangen waarbij bijvoorbeeld niet de gehele pagina opnieuw geladen hoeft te worden. Een voorbeeld hiervan zou een kleine online chat applicatie kunnen zijn. Op het moment dat u een Web Socket verbinding heeft met een web server kunt u data verzenden vanuit uw webapplicatie door middel van send() en data ontvangen door middel van een onmessage event handler.

var Socket = new WebSocket(url, [protocol] );

Het eerste argument is een url waarmee verbinding gemaakt moet worden, en door middel van het tweede optionele argument kunt u een protocol aangeven dat de server wel moet ondersteunen.

HTML5 en canvas

Een van de leukste features van HTML5 is het <canvas> element die u een krachtig grafisch canvas geeft waar u door middel van JavaScript grafische bewerkingen kunt uitvoeren. Het canvas element heeft maar een twee eigen attributen en kan verder gebruik maken van alle andere standaard attributen. Hier is een voorbeeld van een canvas met de naam mycanvas van 100 pixels breed en 100 pixels hoog:

<canvas id="mycanvas" width="100" height="100"></canvas>

Het canvas is dan eenvoudig te vinden in uw JavaScript door middel van:

var canvas = document.getElementById("mycanvas");

Het <canvas> blok is in eerste instantie blanco en om iets te kunnen weergeven moet eerst de rendering context opgehaald worden waarna er op het canvas getekend kan worden:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

HTML5 en canvas voorbeeld 1

Hier is nog een voorbeeld van een HTML5 canvas in combinatie met javascript van 320 pixels breed en 320 pixels hoog met een leuke kleuren animatie in 2D.

HTML5 en canvas sourcecode 2d animatie

Html code

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="test3D.js"></script>
<title>HTML5 Canvas Color Splash</title>
<style type="text/css">
	body {background-color:#000000; color:#555555;} 
	#MyCanvas { border: gray 1px solid; }
</style>
</head>
<body>

<div style="padding-top: 50px; text-align:center"> <!-- centered div -->
<canvas id="MyCanvas" width="640" height="480">
Your browser does not support HTML5 canvas.
</canvas>
</div>

<script language="JavaScript" type="text/javascript">
<!--
  window.addEventListener("load",test3D.init(), false);
//-->
</script>

</body>
</html>

Javascript code: test3D.js

		
// ----------------------------------------------------
// test3D.js   A simple 3D test program in Javascript
// C 2018  Hein Pragt
// ----------------------------------------------------

'use strict';


/// <summary>
/// This is our test3D class
/// </summary>
var test3D = function ($) {
  var theCanvas;
  var context;
  var timer;
  var centerX;
  var centerY;
  var displayWidth;
  var displayHeight;
	
	// Pixel class
  function pixelClass() {
    this.x = 0;  // Vector
    this.y = 0;
    this.z = 0;
    this.sx = 0; // Transformed to screen
    this.sy = 0;
    this.sz = 0;
    this.r = 0;   // oolor
    this.g = 0;
    this.b = 0;
  }
  
  var pixels = new Array();   
  var num_pixels = 960;
  var freeRunCounter1;
  var freeRunCounter2;

    /// <summary>
    /// This routine is called every frame
    /// recalc screen and then display screen
    /// </summary>
    function onTimer() {
      updatePixels();
      drawScreen();
    }
	
    /// <summary>
    /// This routine redraws the whole screen every frame
    /// </summary>
    function drawScreen() {
      var i,siz; 

      context.fillStyle = "rgba(0,0,0,0.04)"; // Dont erase all
      context.fillRect(0,0,theCanvas.width,theCanvas.height);
      for (i=0; i<num_pixels; i++) { 
        siz = 4 - parseInt(pixels[i].sz / 25);     // size based on distance from camera 
        context.fillStyle = 'rgb(' + Math.floor(pixels[i].r) + ',' + Math.floor(pixels[i].g) + ',' + Math.floor(pixels[i].b) + ')';
        context.beginPath();
        context.arc(pixels[i].sx, pixels[i].sy, siz, 0, 2 * Math.PI, false);
        context.closePath();
        context.fill();
      }
    }

    /// <summary>
    /// This routine updates all the pixels every frame
    /// </summary>
    function updatePixels() {
    var i,an,sn,cs; 

      freeRunCounter1 += 2;
      freeRunCounter2 += 3;
      for (i=0; i<num_pixels; i++) { 
        pixels[i].z -= 1; 
        if (pixels[i].z <= 6) { 
          pixels[i].z += 96; 
        }
        an = (freeRunCounter1 + pixels[i].z) % 360;
        sn = Math.sin(an * 3.1428 / 180) * 20;
        an = freeRunCounter2 % 360;
        cs = Math.cos(an * 3.1428 / 180) * 20;

        // Simple perspective transformation from 3D to 2D: 
        // x2D = x3D / z3D * (screen width) + (half of screen width) 
        // y2D = y3D / z3D * (screen height) + (half of screen height) 
        pixels[i].sx = (pixels[i].x / (pixels[i].z / 2)) * displayWidth + (displayWidth / 2) + sn; 
        pixels[i].sy = (pixels[i].y / (pixels[i].z / 2)) * displayHeight + (displayHeight / 2) + cs;
        pixels[i].sz = pixels[i].z; 
      } 
    }

    /// <summary>
    /// This is the main start of thes module
    /// </summary>
    function init() {
    var i,an,sn,cs;

      theCanvas = document.getElementById("MyCanvas");
      context = theCanvas.getContext("2d");
      displayWidth = theCanvas.width;
      displayHeight = theCanvas.height;
      centerX = displayWidth / 2;
      centerY = displayHeight / 2;
      freeRunCounter1 = 0;
      freeRunCounter2 = 0;
			// Create pixels
      for (i=0; i<num_pixels; i++) { 
        pixels[i] = new pixelClass();			  
        an = (i * 3) % 360;
        sn = Math.sin(an * 3.1428 / 180) * 6;
        cs = Math.cos(an * 3.1428 / 180) * 8;
        pixels[i].r = (Math.sin(an * 3.1428 / 120) + 1) * 255;
        pixels[i].g = (Math.cos(an * 3.1428 / 90) + 1) * 255;
        pixels[i].b = (Math.sin(an * 3.1428 / 60) + 1) * 255;
        pixels[i].x = sn;  
        pixels[i].y = cs;
        pixels[i].z = 100 - ((i * 4) % 99);  
      }
      timer = setInterval(onTimer, 1000/30);   // Try 30 FPS
    }

    return {
        init: init
    };
}();

Zelfgemaakte HTML5 apps

Zelf gebruik ik tegenwoordig HTML5 / JavaScript / CSS3 als programmeer platform om web applicaties te ontwikkelen en apps voor het Android platform. Ik zou ook voor andere platformen kunnen ontwikkelen omdat apps die gemaakt zijn door middel van HTML5 / Javascript en CSS3 zonder verdere aanpassing te compileren zijn voor bijna elk platform zoals Windows 8, IOS en zelf Chrome os. Het is zelfs mogelijk om vanuit deze apps rechtstreeks Facebook apps te genereren. Wat geen enkel programmeer platform tot nu to voor elkaar gekregen heeft gaat waarschijnlijk lukken met de nieuwe HTML5 standaard. Ik ontikkel zelf door middel van de tool construct 2, die als uitvoer pure HTML5 / Javascript / CSS3 applicaties kan genereren. Als build omgeving voor apps gebruik ik de XDK van Intel, die gratis te downloaden is en ook gratis in gebruik is. Deze kan HTML5 code builden voor bijna elk platform, via een eenvoudige en goede grafische IDE. Ook is het mogelijk om via de ingebouwde ontwikkel IDE en wizzards, zelf snel HTML5 apps te onteikkelen en rechtstreeks te te testen op meerdere ge-emuleerde toestellen.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van de Intel XDK.
Het spellingspel.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van de Intel XDK.
Het spel rekenmemory.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van cocoonjs.
Het spel rainbowcat.

Last update: 11-04-2019

Disclaimer: Hoewel de heer Pragt de informatie beschikbaar op deze site met grote zorg samenstelt, sluit hij alle aansprakelijkheid uit. Op de artikelen van de heer Pragt rust auteursrecht, overname van tekst en afbeeldingen is uitsluitend toegestaan na voorafgaande schriftelijke toestemming. Heinpragt.com is ingeschreven bij de KvK onder nummer: 73839426 en is gevestigd in Veenendaal. Lees hier de privacyverklaring van deze site. Voor informatie over adverteren op deze site kunt u contact opnemen met: (mail@heinpragt.com).