Badges/HTML-0

Badge HTML-0

Deze badge geeft aan dat je basiskennis hebt van HTML, en van het gebruik daarvan in het web. Je demonstreert dit aan de hand van een zelfgemaakte en gepubliceerde webpagina.

Beschrijving

Bij deze badge gaat het om de basiskennis van HTML, om structuur en inhoud weer te geven. Vormgeving en interactie komen later aan bod.

Kennis(*) van de volgende begrippen:

• html document-type
  • html5 (evoluerende, "levende standaard")
  • optioneel: verschillende versies van html4
• html-head: meta-data
• html-body: inhoud
• html-element
  • tag
  • attributen (naam-waarde paren)
  • inhoud
• nesting van elementen (met beperkingen)
• soorten elementen: (welke elementen mag je waar gebruiken? Voorlopig, HTML4 indeling voldoende)
  • inline elementen
  • block-level elementen
  • HTML5 indeling: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories (basisidee; hoef je niet in detail te kennen)
• enkele veel gebruikte tags:
  • h1, h2, ...
  • p
  • ul, ol, li
  • a (externe links)
  • img (in afzonderlijk bestand)
  • br
  • hr
• html-commentaar
• speciale tekens: named character references (ook wel genoemd: entities)

(*) "Kennis van een begrip" - je moet kunnen uitleggen wat het begrip betekent en waarvoor het gebruikt wordt. Je moet een voorbeeld kunnen geven. Je moet het kunnen aanwijzen in een praktisch voorbeeld. (Je moet deze termen onder andere kennen omdat je ze nodig hebt in het communiceren met anderen.)

Professioneel gedrag

HTML, net als andere code, schrijf je zowel voor mensen als voor computers. Je moet met beide rekening houden:

• HTML schrijf je voor computers: dit moet aan de standaard voldoen, om onjuiste interpretaties te voorkomen.
  • valideren van code als vaste gewoonte
• HTML schrijf je voor mensen: dit moet aan de project-afspraken (coding rules) voldoen.
  • gebruik van coding rules als vaste gewoonte

Je kunt de begrippen opzoeken als je deze nodig hebt; in dit geval in:

• via Mozilla Developer Network -https://developer.mozilla.org
• via W3Schools.com
• via DevDocs.io

Principes

Je hebt enige kennis van de onderstaande principes, en je weet wat deze betekenen in de context van de badge-begrippen zoals hierboven beschreven.

• scheiden van
  • structuur en inhoud (HTML)
  • opmaak (CSS - later)
  • interactie (JS - later)
  • ... als voorbeeld van het algemene principe "Separation of Concerns"
• validatie
  • van code ten opzichte van een standaard
  • ... als voorbeeld van de algemene principes van standaardisatie en validatie
• gebruik van coding rules
  • ... als voorbeeld van de regels voor programma-code als communicatie met mensen.

Gebruik van hulpmiddelen

• Browser ontwikkeltools (inspecteren van HTML, CSS)
• Mozilla Goggles (voor het inspecteren van een bestaande webpagina: HTML, CSS)
• Mozilla Thimble (voor het maken, delen, re-mixen en "publiceren" van een eenvoudige webpagina)
  • of als alternatief: JSBin, JSFiddle

Publiceren van een webpagina:

• via Thimble/JSBin etc.
• via Google Drive (ICT in de Wolken)
• via Dropbox

Vaardigheden

• maken en publiceren van een eenvoudige webpagina met de genoemde hulpmiddelen

Evidence/criteria

Je moet (zelf) een eenvoudige html-pagina aanmaken, waarbij je onder meer gebruik maakt van de tags zoals hierboven genoemd. Deze pagina moet gevalideerd zijn (met W3C validator.) Je moet deze pagina publiceren - zodat deze via het web toegankelijk is. Je moet je docent deze pagina demonstreren, en kunnen uitleggen hoe deze werkt.

Voorkennis

• Badges/Web-0

Materiaal

• Mozilla Web Literacy map (building): https://wiki.mozilla.org/Webmaker/WebLiteracyMap/Building
• w3schools
• code academy
• devdocs
• materiaal ICT in de Wolken: HTML-0