Badges/HTML-0: verschil tussen versies

Uit basis
Naar navigatie springen Naar zoeken springen
Geen bewerkingssamenvatting
 
(17 tussenliggende versies door een andere gebruiker niet weergegeven)
Regel 1: Regel 1:
{{Badge-status
|status=Alpha
|auteur=[[heeft-auteur:: Gebruiker:Eelco|Eelco Dijkstra]]
|module=[[heeft-module:: Modules/HTML-0|HTML-0]]}}
{{Zijbalk Badges}}
{{Zijbalk Badges}}
== Badge 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.
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 ===
 
* [[Badges/Web-0]]


== Beschrijving ==
== 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.
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:
Kennis(*) van de volgende begrippen:
* html document-type
* html document-type
** html5 (evoluerende, "levende standaard")
** html5 als evoluerende, "levende standaard"
** optioneel: verschillende versies van html4
* html-head: meta-data
* html-head: meta-data
* html-body: inhoud
* html-body: inhoud
Regel 31: Regel 43:
** br
** br
** hr
** hr
* tabellen
* html-commentaar
* html-commentaar
* speciale tekens: named character references (ook wel genoemd: entities)
* 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.)
(*) "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: <code>property: value;</code>
* css-selectoren: type-selector (ofwel tag-selector), class-selector, id-selector
* box-concept
** margin, border, padding, content


=== Professioneel gedrag ===
=== Professioneel gedrag ===
Regel 44: Regel 69:
** gebruik van coding rules als vaste gewoonte
** gebruik van coding rules als vaste gewoonte


Je kunt de begrippen opzoeken als je deze nodig hebt; in dit geval in:
Je kunt de begrippen opzoeken als je deze nodig hebt, tenminste:
* via Mozilla Developer Network -https://developer.mozilla.org
* via Mozilla Developer Network -https://developer.mozilla.org
* via W3Schools.com
* via W3Schools.com
Regel 55: Regel 80:
* scheiden van
* scheiden van
** structuur en inhoud (HTML)
** structuur en inhoud (HTML)
** opmaak (CSS - later)
** opmaak (CSS)
** interactie (JS - later)
** interactie (JS - later)
** ... als voorbeeld van het algemene principe "Separation of Concerns"
** ... als voorbeeld van het algemene principe "Separation of Concerns"
Regel 71: Regel 96:
** of als alternatief: JSBin, JSFiddle
** of als alternatief: JSBin, JSFiddle


Publiceren van een webpagina:
Publiceren van een statische webpagina:


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


=== Vaardigheden ===
=== Vaardigheden ===


* maken en publiceren van een eenvoudige webpagina met de genoemde hulpmiddelen
* maken en publiceren van een eenvoudige statische 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  ==  
== Materiaal  ==  
Regel 94: Regel 111:
* [http://www.codecademy.com/tracks/web code academy]
* [http://www.codecademy.com/tracks/web code academy]
* [http://devdocs.io devdocs]
* [http://devdocs.io devdocs]
* materiaal ICT in de Wolken: [[HTML-0]]
== Eigenschappen ==
*  Auteur: [[heeft-auteur:: Gebruikers:Eelco]]
* Module: [[heeft-module:: Modules/HTML-0]]

Huidige versie van 8 jun 2016 om 11:38

Badge-status: Alpha
Module: HTML-0
Badges
  1. Algoritmen en datastructuren-0
  2. Arduino-0
  3. Arduino-1
  4. Blender-0
  5. CSS-0
  6. CSS-1
  7. Databases-0
  8. Databases-1
  9. Excel-0
  10. Git-0
  11. Hardware-0
  12. Hardware-1
  13. HTML-0
  14. HTML-1
  15. ICT in de Wolken omgeving-0
  16. ICT in de Wolken omgeving-1
  17. Javascript voor games-0
  18. Linux-0
  19. Linux-1 (shell scripting)
  20. Netwerken-0
  21. Netwerken-1
  22. Ondernemen-0
  23. Photoshop-0
  24. PHP en MySQL-0
  25. Programmeren in JavaScript-0
  26. Programmeren in JavaScript-1
  27. Python-0
  28. Python-1
  29. Regexp-0
  30. Scrum-0
  31. Scrum-1
  32. Sketchup-0
  33. SQL-0
  34. Storyboard-0
  35. Unity-2D-0
  36. Unity-3D-0
  37. Video-0
  38. Web-0
  39. Web-1
  40. Web-2
  41. Web-3
Modules

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)
  • 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:

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

Overgenomen van "http:///basis/index.php?title=Badges/HTML-0&oldid=737"