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.

https://d157rqmxrxj6ey.cloudfront.net/eelcodijkstra/12882/

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 via Google Drive

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

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

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