Modules/HTML-0: verschil tussen versies

Uit basis
Naar navigatie springen Naar zoeken springen
Regel 47: Regel 47:
* Leesstof [http://infvo.com/books/Html-0/body-elementen/README.html Body-elementen]
* Leesstof [http://infvo.com/books/Html-0/body-elementen/README.html Body-elementen]
* [https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/755 Tutorial 2]
* [https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/755 Tutorial 2]
https://thimble.mozilla.org/user/eelcodijkstra/3148


Onderwerpen:
Onderwerpen:

Versie van 9 nov 2015 12:47

Modules
  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. Excel-1
  11. Git-0
  12. Hardware-0
  13. Hardware-1
  14. HTML-0
  15. HTML-1
  16. HTML&CSS-2
  17. ICT in de Wolken omgeving-0
  18. ICT in de Wolken omgeving-1
  19. JavaScript voor games-0
  20. JavaScript voor games P5 - 0
  21. Linux-0
  22. Linux-1 (shell scripting)
  23. Netwerken-0
  24. Netwerken-1
  25. Ondernemen-0
  26. Photoshop-0
  27. PHP en MySQL-0
  28. Programmeren in JavaScript-0
  29. Programmeren in JavaScript-1
  30. Python-0
  31. Python-1
  32. Regexp-0
  33. Scrum-0
  34. Scrum-1
  35. SQL-0
  36. Storyboard-0
  37. Unity-2D-0
  38. Unity-3D-0
  39. Video-0
  40. Web-0
  41. Web-1
  42. Web-2
  43. Web-3
Badges

Module HTML-0

In deze module maakt je kennismaking met HTML, de taal waarin web-documenten geschreven worden. Ook de talen CSS, voor de opmaak van web-documenten, en JavaScript, voor interactieve web-documenten, komen aan de orde.

Als resultaat van deze module laat je een eigen web-document zien, waarin je de verschillende elementen die in de lessen behandeld worden, demonstreert. Deze pagina heb je gepubliceerd als een pagina op het web, bijvoorbeeld met behulp van Google Drive. Je bent vrij in de keuze van het onderwerp en de verdere invulling van je webdocument.

Deze module helpt je om de badge Badges/HTML-0 te halen.

Manier van werken

Als resultaat moet je een eigen web-document laten zien. Dit document bouw je op bij elke les. De laatste lessen geven je extra tijd om het document aan te vullen.

Voor de meeste lessen is er een tutorial in Thimble. Dit tutorial moet je doorwerken, maar je hoeft geen Thimble-resultaten in te leveren. Je moet voor elke les proberen wat je geleerd hebt, toe te passen op je eigen web-document.

Hulpmiddelen

  • Mozilla Thimble: een omgeving om HTML uit te proberen
  • Google Drive: hierop kun je je web-document publiceren
  • Drive Notepad: een tekst-editor op Google Drive: hiermee kun je platte-tekstbestanden op Google Drive aanmaken en bewerken.

Les 1: je eerste pagina

Onderwerpen:

  • HTML elementen, tags
  • head, body
  • h1, h2, etc.
  • p; em; strong
  • white space
  • weergave in de browser

Les 2: publiceren van je pagina op het web

Onderwerp(en):

  • publiceren met Google Docs
  • valideren van je webpagina
  • direct lezen in filesysteem
  • source bekijken in browser

Les 3: Elementen, tags, en links

https://thimble.mozilla.org/user/eelcodijkstra/3148

Onderwerpen:

  • HTML-code voor mensen
  • Commentaar
  • Layout, gebruik van white space
  • Speciale tekens, escape-notatie
  • Inhoud van een element
  • Attributen van een element
  • Meer tags: ul, ol, li;
  • Welke elementen zijn er nog meer?

Les 4: Figuren en iframes

Les 5: Opmaak van tekst met CSS

  • scheiden van inhoud (tekst) en opmaak
  • CSS selectoren: type-selector (tag-selector) en id-selector
  • Tutorial 4

Les 6: Opmaak van elementen en layout van de pagina met CSS

Les 7: Interactie met JavaScript

Les 8: Eigen document afmaken

Les 9: Eigen document afmaken

Les 10: Eigen document afmaken

Aftekentabel en logboek

Maak een kopie van deze tabel in je eigen HTML-0 pagina, als subpagina van je Badges-pagina. (Zie ook het voorbeeld Gebruiker:Flip)

Je kunt in plaats van de tabel hieronder, ook gebruik maken van Trello. (Zorg ervoor dat je eerst een account hebt, met je ICT in de Wolken e-mail.) Maak een kopie van het Trello-board: https://trello.com/b/3sl8cwJu

De link naar de uitwerking in de onderstaande tabel is de link naar je gepubliceerde web-document. Dit document zal groeien naarmate je verder komt met de lessen.

Les Onderwerp Uitgevoerd op Uitwerking (link) Opmerkingen Gezien door op (datum) opmerkingen
1 Je eerste webpagina
2 Publiceren van je pagina op het web
3 Elementen, tags en links
4 Figuren en iframes
5 Opmaak van tekst met CSS
6 Layout van de pagina met CSS
7 Interactie met JavaScript
8 Afmaken eigen website
9 Afmaken eigen website
10 Afmaken eigen website