HTML5

Let op:
Deze cursus gaat er vanuit dat de basiskennis van HTML4 en CSS2 aanwezig is.

De Web Hypertext Application Technology Working Group (WHATWG) diende half april 2007 het voorstel in bij de W3C-werkgroep (World Wide Web Consortium) om 'hun' HTML 5 als startpunt te gebruiken voor de verdere HTML-ontwikkeling. Verdere wensen waren dat de naam 'HTML5' een officiële status zou krijgen en dat Ian Hickson van de WHATWG zou blijven werken aan de specificatie. W3C ging akkoord mits er nog een andere ontwikkelaar betrokken zou worden. Dat is Dave Hyatt van Apple geworden.

Omdat HTML5 nog geen standaard is volgens het W3C moet je er dus rekening mee houden dat niet alle tags ondersteund worden door elke webbrowser. De nieuwste versies van de bekende webbrowsers (Chrome, FireFox, Internet Explorer, Safari & Opera) steunen de meeste HTML5 tags.

Om dit te testen is er een website ontwikkeld waar je kunt testen welke HTML5 onderdelen er worden ondersteund.

Opdracht 1: Webbrowser testen
  • Download als eerste de laatste versies van Internet Explorer, FireFox en Chrome. Mocht je alle browsers al geïnstalleerd hebben, zorg dan dat ze up-to-date zijn.
  • Ga met de drie browsers naar de website http://html5test.com.
  • Voeg de url toe aan de favorieten van je webbrowser.
  • Bekijk de scores per webbrowser.

Mocht je in de toekomst met HTML5 aan het ontwikkelen zijn en je twijfelt of de tag wel wordt ondersteund door je webbrowser, kijk dan op de website.

Naast een goede browser is het ook aan te raden om goede editor software te gebruiken voor het programmeren in HTML5 en vooral CSS3. Alle voorbeelden in deze cursus zijn gemaakt in Adobe Dreamweaver. Een goed gratis alternatief is het programma Notepad++.

Opdracht 2: Editor installeren
  • Zorg ervoor dat je een goede editor installeert op je computer.
  • Aangeraden wordt om Adobe Dreamweaver te gebruiken.
  • Een goed alternatief is Notepad++. Te downloaden op: http://notepad-plus-plus.org/.
  • Alle vervolg opdrachten gaan er vanuit dat Dreamweaver is geïnstalleerd.

De verschillen met HTML4

In HTML5 zijn een aantal grote veranderingen doorgevoerd. Als eerste is de !doctype aangepakt. In HTML4 had je nog vier verschillende varianten doctype. In HTML5 is dit volledig afgeschaft. Elke pagina begint nu zoals je kunt zien in voorbeeld1-1.

Voorbeeld 1-1

Je ziet dat je dus niet meer hoeft te declareren wat voor type pagina het is. In HTML5 is één lijn getrokken. Het is wel van belang dat de regel er staat zoals hierboven. Zo niet, dan bestaat de mogelijkheid dat de webbrowser de pagina als een HTML4 pagina beschouwd en dus niet (goed) werkt. Waar bij HTML4 Doctype niet verplicht was, is deze dat nu dus wel!

Je kunt in Dreamweaver automatisch in een HTML5 formaat starten.

Let op:
<!doctype html> is nu een verplicht onderdeel geworden!

Opdracht 3: Dreamweaver instellen.
Deze opdracht kan alleen als je gebruikt maakt van Dreamweaver. De nieuwste dreamweaver versie (CC) heeft al automatisch een HTML5 pagina. Oudere versies moet je eerst instellen. Dat gaan we nu doen.
  • Zorg dat het programma aanstaat.
  • Druk vervolgens op ctrl + n (nieuw bestand).
  • Je ziet het volgende scherm. Klik aan de rechterkant bij DocType op HTML 5
  • Het is aan te raden om ervoor te zorgen dat automatisch voor HTML5 wordt gekozen. Dan hoef je namelijk niet steeds te controleren of het Doctype juist is. Dit doe je door, in het scherm zoals hierboven getoond, onderaan op Preferences... te drukken. Onderstaand scherm verschijnt.
  • Klik bij Category op New Document. Zet daar de Default Document Type op HTML 5. Op deze manier wordt standaard een HTML 5 document geopend.

Een ander verschil is dat tags die geen sluittag hebben, niet meer met een slash worden afgesloten. Een voorbeeld hiervan is de <br>. Een break heeft geen sluittag. In HTML4 zou je deze dus als <br /> typen. In HTML5 hoeft dat niet langer. Enkel <br> is voldoende. Dit geldt ook voor <hr>, <img> en <meta>

Opdracht 4: Webpagina testen.
Open in je editor een nieuw bestand.
  • Type onderstaande code over en sla het op als Voorbeeld1-1.html
  • Ga nu naar http://validator.w3.org/#validate_by_upload
  • Sla deze url op bij je favorieten.
  • Test je zojuist gemaakte bestand. Je zult zien dat er geen error verschijnt.

De validator is een handige manier om je code op (HTML5) fouten te controleren. Samen met de webbrowser test zijn ze goed te gebruiken voor foutopsporing.

Nieuw in HTML5

In HTML5 zijn een hele hoop nieuwe tags verschenen. Enkele op een rij.

Structuur tags
<header> Geeft de header sectie aan van de webpagina
<nav> Geeft het navigatie gedeelte van de webpagina aan.
<section> Hierbinnen komt de content van de webpagina te staan.
<article> Staat vaak binnen de <section> en geeft een stuk tekst aan.
<aside> Geeft de zijbalk aan, ook vaak binnen <section>.
<footer> Geeft de footer sectie aan van de webpagina.

Al deze bovenstaande tags hebben geen opmaak of wat dan ook. Deze geven alleen de structuur van de pagina aan. Je krijgt nu dus niet meer een scala aan divisies die je zelf #header #footer hoeft te noemen. Met deze tags geef je aan wat de structuur is in de pagina. Daar binnen kan je uiteraard met classes of divisies werken. Meer hierover in Hoofdstuk 2.

nieuwe tags
<video> Voor het afspelen van video’s.
<audio> Voor het afspelen van audio bestanden.
<canvas> Om figuren mee te tekenen.

Het is met HTML5 dus niet meer nodig om Flash, Quicktime of Silverlight applicaties te implementeren om een audio of video bestand af te spelen. Daarnaast kun je met de canvas tag zelf vormen tekenen. Door middel van CSS kan je deze zelfs animeren. Hiermee is HTML5 feitelijk een Flash vervanger. Het animeren is in HTML5 wel veel gecompliceerder dan in Flash.

Daarnaast is er ook een Drag and Drop methode. Dit werkt samen met JavaScript.

CSS3

HTML en CSS zijn afhankelijk van elkaar. Beide zijn nodig voor een goede werking van de website. Omdat HTML5 vernieuwd wordt, wordt CSS dat dus automatisch ook.

De structuur van CSS is hetzelfde gebleven. Er zijn alleen een hoop nieuwe elementen bijgekomen. De mogelijkheden om de webpagina met CSS op te maken zijn dus uitgebreid. Minder ontwerpen in programma’s als Photoshop maar met CSS.

Zo is het nu makkelijker geworden om randen een ronde hoek te geven. Je divisie kun je dus een ronde hoek geven. Voor een schaduw geldt hetzelfde.

Tekst kan nu ook meer opgemaakt worden. Zo kan er een schaduw aan de tekst worden gegeven. Ook is het mogelijk om andere lettertypes te gebruiken zonder dat de gebruiker eerst het lettertype moet installeren. Je bent dus niet meer afhankelijk van de standaard lettertypes.

Het is nu ook mogelijk om divisies of afbeeldingen in 2d en zelfs 3d te draaien. Je kunt ze draaien, vergroten of schalen.

Zoals eerder gezegd kunnen divisies geanimeerd worden. Net zoals dit in Flash kan. Nadeel hiervan is dat het vrij omslachtig is en nog niet door alle webbrowsers wordt ondersteund. Het voordeel ervan is dat je geen Flash nodig hebt dus dat je webpagina op de mobiele apparaten van Apple ook goed functioneert.

In hoofdstuk 3 gaan we alle nieuwe CSS onderdelen verder bekijken.