Modules/HTML-0: verschil tussen versies

Uit basis
Naar navigatie springen Naar zoeken springen
Geen bewerkingssamenvatting
 
(9 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
{{Module-status
|status=Alpha
|auteur= [[Gebruiker:Eelco|Eelco Dijkstra]]
|badge=[[Badges/HTML-0|HTML-0]]
}}
{{Zijbalk Modules}}
{{Zijbalk Modules}}


Regel 35: Regel 40:
== Les 2: publiceren van je pagina op het web ==
== Les 2: publiceren van je pagina op het web ==


* [http://infvo.com/lab/index.php?title=Publiceren_via_google_drive Publiceren via Google Drive]
=== Publiceren met Thimble ===
 
Met behulp van Thimble kun je eenvoudig je website publiceren. Hiervoor gebruik je de knop "Publish" rechts boven. Je krijgt dan de link (URL) te zien waaronder je website via het web te bekijken is. Deze kun je bijvoorbeeld delen met vrienden en kennissen.
 
Een bijzonderheid van Thimble is dat je een gepubliceerde website altijd kunt "remixen". Door op de remix-knop te klikken kom je in de Thimble-editor omgeving terecht, met een kopie van de website waarvan je de remix wilt maken. Je kunt deze dan naar eigen voorkeur aanpassen, en eventueel ook weer publiceren. Je kunt dit ook gebruiken hoe iemand anders een Thimble-website gemaakt heeft, en dat kun je gebruiken als basis van je eigen experimenten.
 
=== Publiceren met Dropbox ===
 
Zie bijvoorbeeld: https://ultimatedropboxguide.com/2015/05/host-website-with-dropbox/
 
Samengevat:
* kopieer de Thimble bestanden naar je computer, via "Export (.zip)";
* plaats de zip-file in de map Dropbox/Public;
* pak de zip-file uit; je krijgt dan een map "project" met daarin de bestanden van je website;
* ga in de browser naar Dropbox.com, en log in met je eigen naam/wachtwoord;
* zoek het bestand Public/project/index.html
* selecteer dit bestand met de rechter muisknop (of vergelijkbaar); je krijgt dan het Dropbox-menu;
* selecteer in dit menu "Copy public link". Je krijgt dan de link (URL) waaronder je website op het web te vinden is.
 
=== Valideren van je website ===
 
Als je een publieke link voor je website hebt, dan kun je je website valideren met de W3C validator. Deze vind je op: https://validator.w3.org/
Je kunt daar de link van je web-document opgeven. Je kunt dit document ook als bestand uploaden, of de inhoud "droppen" in het betreffende venster.
 
=== Bekijken van de source van je website in de browser ===
 
Je kunt met de ontwikkel-hulpmiddelen van de browser de source (broncode) van je website bekijken: dit is de code die je met Thimble gemaakt hebt.
 
=== Openen van lokale bestanden met de browser ===
 
De bestanden die je gekopieerd hebt vanuit de Thimble kun je ook direct openen met je browser.
 


Onderwerp(en):
Onderwerp(en):
* publiceren met Google Docs
* valideren van je webpagina
* valideren van je webpagina
* direct lezen in filesysteem
* direct lezen in filesysteem
* source bekijken in browser
* source bekijken in browser
Met ingang van zomer 2015 is het niet meer mogelijk om Google Drive te gebruiken voor het publiceren van statische websites. Enkele alternatieven zijn:


== Les 3: Elementen, tags, en links ==
== Les 3: Elementen, tags, en links ==
Regel 74: Regel 111:
* Leesstof: [http://infvo.com/books/Html-0/css_-_opmaak_van_elementen/README.html CSS - opmaak van elementen]
* Leesstof: [http://infvo.com/books/Html-0/css_-_opmaak_van_elementen/README.html CSS - opmaak van elementen]
* Leesstof: [http://infvo.com/books/Html-0/css_-_pagina-opmaak_layout/README.html CSS - pagina-layout]
* Leesstof: [http://infvo.com/books/Html-0/css_-_pagina-opmaak_layout/README.html CSS - pagina-layout]
* [https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/3165 Tutorial 5]
* [https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/12887 Tutorial 5]


== Les 7: Interactie met JavaScript ==
== Les 7: Interactie met JavaScript ==


* Leesstof: [http://infvo.com/books/Html-0/interactie_met_javascript/README.html Interactie met JavaScript]
* Leesstof: [http://infvo.com/books/Html-0/interactie_met_javascript/README.html Interactie met JavaScript]
* Tutorial: [https://eelcodijkstra.makes.org/thimble/LTI2OTM1MDQw/html-vb7 Tutorial 7]
* [https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/12889 Tutorial 7]


== Les 8: Eigen document afmaken ==
== Les 8: Eigen document afmaken ==

Huidige versie van 16 mrt 2016 om 14:59

Module-status: Alpha
Badge: HTML-0
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

Publiceren met Thimble

Met behulp van Thimble kun je eenvoudig je website publiceren. Hiervoor gebruik je de knop "Publish" rechts boven. Je krijgt dan de link (URL) te zien waaronder je website via het web te bekijken is. Deze kun je bijvoorbeeld delen met vrienden en kennissen.

Een bijzonderheid van Thimble is dat je een gepubliceerde website altijd kunt "remixen". Door op de remix-knop te klikken kom je in de Thimble-editor omgeving terecht, met een kopie van de website waarvan je de remix wilt maken. Je kunt deze dan naar eigen voorkeur aanpassen, en eventueel ook weer publiceren. Je kunt dit ook gebruiken hoe iemand anders een Thimble-website gemaakt heeft, en dat kun je gebruiken als basis van je eigen experimenten.

Publiceren met Dropbox

Zie bijvoorbeeld: https://ultimatedropboxguide.com/2015/05/host-website-with-dropbox/

Samengevat:

  • kopieer de Thimble bestanden naar je computer, via "Export (.zip)";
  • plaats de zip-file in de map Dropbox/Public;
  • pak de zip-file uit; je krijgt dan een map "project" met daarin de bestanden van je website;
  • ga in de browser naar Dropbox.com, en log in met je eigen naam/wachtwoord;
  • zoek het bestand Public/project/index.html
  • selecteer dit bestand met de rechter muisknop (of vergelijkbaar); je krijgt dan het Dropbox-menu;
  • selecteer in dit menu "Copy public link". Je krijgt dan de link (URL) waaronder je website op het web te vinden is.

Valideren van je website

Als je een publieke link voor je website hebt, dan kun je je website valideren met de W3C validator. Deze vind je op: https://validator.w3.org/ Je kunt daar de link van je web-document opgeven. Je kunt dit document ook als bestand uploaden, of de inhoud "droppen" in het betreffende venster.

Bekijken van de source van je website in de browser

Je kunt met de ontwikkel-hulpmiddelen van de browser de source (broncode) van je website bekijken: dit is de code die je met Thimble gemaakt hebt.

Openen van lokale bestanden met de browser

De bestanden die je gekopieerd hebt vanuit de Thimble kun je ook direct openen met je browser.


Onderwerp(en):

  • valideren van je webpagina
  • direct lezen in filesysteem
  • source bekijken in browser

Met ingang van zomer 2015 is het niet meer mogelijk om Google Drive te gebruiken voor het publiceren van statische websites. Enkele alternatieven zijn:

Les 3: Elementen, tags, en links

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

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
Overgenomen van "http:///basis/index.php?title=Modules/HTML-0&oldid=376"