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 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.
HTML5 introduceert een aantal nieuwe elementen en attributen die kunnen helpen om moderne websites, maar ook complete web-apps te bouwen.
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.
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.
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>
Ook de Character Encoding metadata tag is eenvoudiger geworden:
<meta charset="UTF-8">
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">
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
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>
De volgende tags zijn toegevoegd om het HTML document beter te structureren:
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>
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. |
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 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.
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. |
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. |
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>
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.
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);
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.
<!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>
// ---------------------------------------------------- // 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 }; }();
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.
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).