Modules/HTML-0
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
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
- Leesstof Body-elementen
- Tutorial 2
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
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 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 |