Badges/HTML-0
Badge HTML-0
Deze badge geeft aan dat je basiskennis hebt van HTML en CSS, en van het gebruik daarvan in het web. Je demonstreert dit aan de hand van een zelfgemaakte en gepubliceerde statische webpagina.
Evidence/criteria
Een eenvoudige zelf-gemaakte html-pagina, waarin onder meer de tags gebruikt worden zoals hieronder genoemd. Deze pagina moet gevalideerd zijn (met W3C validator.) Deze pagina moet gepubliceerd zijn, zodat deze via het web toegankelijk is. Je moet je docent deze pagina kunnen demonstreren, en kunnen uitleggen hoe deze werkt.
Voorkennis
Beschrijving
Bij deze badge gaat het om de basiskennis van HTML, om structuur en inhoud weer te geven. Je hebt ook enige kennis van CSS, en je weet hoe je de inhoud en de vormgeving van een webpagina kunt scheiden.
- Uitgebreidere vormgeving en interactie zijn onderdeel van latere badges.
HTML
Kennis(*) van de volgende begrippen:
- html document-type
- html5 als evoluerende, "levende standaard"
- 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
- tabellen
- 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 technische termen onder andere kennen omdat je ze nodig hebt in het communiceren met anderen.
CSS
Kennis van de volgende begrippen:
- style-bestand
- scheiden van inhoud (html) en opmaak (css)
- css-regel; opbouw van een css-regel:
- selector
- declarations:
property: value;
- css-selectoren: type-selector (ofwel tag-selector), class-selector, id-selector
- box-concept
- margin, border, padding, content
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, tenminste:
- 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)
- 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 statische webpagina:
- via Thimble/JSBin etc.
- via Dropbox
Vaardigheden
- maken en publiceren van een eenvoudige statische webpagina met de genoemde hulpmiddelen
Materiaal
- Mozilla Web Literacy map (building): https://wiki.mozilla.org/Webmaker/WebLiteracyMap/Building
- w3schools
- code academy
- devdocs