Modules/HTML-0: verschil tussen versies
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 11:47
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
- Leesstof: De opbouw van een html-document
- Tutorial 1 Klik op de Remix-knop rechtsboven om aan de slag te gaan.
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
- Leesstof Body-elementen
- Tutorial 2
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
- Leesstof: Figuren in HTML
- Tutorial 3
- Tutorial 3
Les 5: Opmaak van tekst met CSS
- scheiden van inhoud (tekst) en opmaak
- CSS selectoren: type-selector (tag-selector) en
id
-selector - Tutorial 4
- Leesstof: CSS - opmaak van tekst
Les 6: Opmaak van elementen en layout van de pagina met CSS
- Leesstof: CSS - opmaak van elementen
- Leesstof: CSS - pagina-layout
- Tutorial 5
Les 7: Interactie met JavaScript
- Leesstof: Interactie met JavaScript
- Tutorial: Tutorial 7
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 |