DOCTYPE

Zoals je in de vorige opdracht gelezen hebt, is de !DOCTYPE nu verplicht geworden. Hiermee geef je namelijk aan dat de pagina een HTML5 pagina is. De opbouw is gelukkig wel een stuk eenvoudiger geworden.

Voorbeeld 2-1

Wat opvalt, is dat de <!DOCTYPE HTML> de enige regel is die met hoofdletter geschreven kan worden. De overige tags mag je ook met hoofdletters schrijven. Dit is niet verplicht.

Opdracht 1: nieuwe pagina aanmaken
  • Maak een nieuwe HTML5 pagina aan.
  • Zorg dat deze bij het begin er uitziet als voorbeeld 2-1.
  • Sla het bestand op als opdracht2-1.html

Het is mogelijk om Dreamweaver zo in te stellen dat automatisch een nieuwe HTML5 pagina wordt gestart (Dreamweaver CC doet dit automatisch). Als je dit wilt instellen, bekijk dan opdracht 3 van de introductie nog een keer.

Let op:
<!DOCTYPE HTML> is nu een verplicht onderdeel geworden!

Structuur

Met de komst van HTML5 is de structuur van de webpagina’s verbeterd. Voorheen was je pagina altijd in gedeeld door middel van divisies. Omdat je de naam van deze divisies natuurlijk zelf kon bepalen (door de naam van de ID’s te kiezen) kon de structuur voor andere al snel onduidelijk worden. In HTML5 zijn daarom de volgende tags in het leven geroepen.

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 tags hebben geen opmaak. Ze zijn er puur voor om de structuur van de webpagina aan te geven. Dit gaan we nu testen.

Opdracht 2: structuur toevoegen

Open bestand opdracht 2-1.html

  • Type tussen de body tags de code van voorbeeld2-2 over.
  • Sla het bestand op als opdracht2-2.html.
  • Test het bestand in je webbrowser.

Voorbeeld 2-2


Je zult zien dat het nog niets spectaculairs oplevert. Dit komt omdat aan de tags geen standaard opmaak gegeven is. Alleen dat elke tag op een nieuwe regel begint. Waarom zou je dit dan doen? Voor Google is dit wel belangrijk. Deze leest de webpagina namelijk beter en onderscheid daardoor de content beter van de header en footer. Google kan daardoor beter de waarde van je webpagina bepalen.
De tags kunnen door elkaar gebruikt worden. De <nav> hoeft dus niet binnen de <header> te staan. Daarnaast kan je de <header> ook binnen <article> gebruiken. Dan geldt het voor de header van dat artikel.

Opdracht 3: structuur uitbreiden

Open bestand opdracht 2-2.html

  • Kijk goed naar voorbeeld2-3.
  • Je ziet dat er wat toevoegingen zijn gedaan bij de twee <article> tags. En een aantal achtergrond kleuren zijn toegevoegd.
  • Neem die over.
  • Sla het bestand op als opdracht2-3.html.
  • Test je bestand in een webbrowser. Je ziet dat de <h1> tags groot worden weergegeven. Je ziet nu de structuur beter omdat je onderdelen een achtergrond kleur hebt gegeven.
  • Test op http://validator.w3.org/#validate_by_upload of je geen fouten hebt gemaakt.

Voorbeeld 2-3

De kunst bij het structureren van je webpagina is om, zodra je een webpagina ontworpen hebt in Photoshop of op papier, te bepalen hoe je de webpagina met deze tags kan indelen. Wat is de header? Wat is de navigatiebalk (menu)? Wat zijn artikelen en wat is de zijbalk?

Opdracht 4: structuur bekijken

Ga naar de website http://www.rekenmachineonline.com

  • Deze website is gemaakt in HTML5.
  • Maak een screenshot van de beginpagina. Plak deze in Photoshop (of een ander foto bewerk programma) en geef aan hoe de structuur van deze pagina is.
  • Dit doe je door een gekleurde blokken overheen te tekenen.
  • Sla het bestand op als Opdracht2-4.jpg

Oude webbrowsers (Internet Explorer 9 en lager) ondersteunen geen HTML5 en kennen dus ook de structuur tags niet. Daardoor zou je deze tags dus niet kunnen gebruiken voor oude browsers. Daar is een workaround voor gevonden en die heet HTML5shiv. Het is een Javascript library welke ervoor zorgt dat ook in de oudere browsers de HTML5 tags herkend worden. Daardoor kan je deze dus gewoon gebruiken en ook opmaak of classes meegeven.

Opdracht 5: HTML5shiv toevoegen
Open het bestand opdracht2-3.html
  • Ga naar HTML5shiv en download de bestanden. Sla deze op in dezelfde map als je de opdrachten hebt opgeslagen.
  • Voeg de code toe (welke op de site staat) aan de <head> sectie van je pagina.
  • Sla het bestand op als opdracht2-5.html