Je gaat leren werken met html. De eindopdracht na 7 weken is dat je zelf in een 'kale' editor (kladblok) een website kunt maken met 4 webpagina’s met soortgelijke, consistente opmaak die naar elkaar gelinkt is.
Deze lesweek bestaat uit 4 opdrachten.
Deze lesweek bestaat uit 4 opdrachten.
Wat is HTML en wat kun je ermee?
|
HTML is een programmeertaal waarmee je de inhoud van een tekst kunt structureren met bijvoorbeeld kopjes, paragrafen en afbeeldingen. Simpel gezegd kun je met HTML de complete structuur van een webpagina verzorgen. Bekijk eerst de video die hiernaast staat en straks de video die hieronder bij opdracht 1 staat, dan wordt het je al een stukje duidelijker.
|
Wat heb je nodig voor de opdrachten?
Een editor waarin je de html code kunt schrijven.
Dit is bijvoorbeeld 'notepad++'. Dit programma kun je hier downloaden. Standaard staat dit al op de schoolcomputers. (rechtsonder in de taakbalk op het blauwe balkje en dan zoeken naar Notepad++). Als je hiermee straks een tekstbestand maakt met de HTML code erin, dan kan de webbrowser dit omzetten in een mooie webpagina. |
Achtergrond informatie bij deze les
|
Je kunt meer vinden over de editors (kladblok, notepad++, etc) op de volgende pagina van w3schools.com: https://www.w3schools.com/html/html_editors.asp
<-- [video] Zo werkt de website van w3 schools:
|
Opdracht 1:
Bekijk de onderstaande uitleg video om een uitleg te krijgen over html. Je weet dan wat het is en wat je er mee kunt doen. Je krijgt ook direct al een beeld van de opbouw van een basis van een website.
Opdracht 2:
|
Opdracht 3:
|
Opdracht 4:
- Neem nu de volgende tekst (zie afbeelding hieronder) letterlijk over in je eigen html (index.html) pagina en sla deze pagina op in je eerder gemaakte aparte mapje op de pc.
- Zoek dit bestand nu op in je bestanden en open het. Als het goed is heb je nu een lege pagina met de titel (in je tabblad zichtbaar) 'sjabloon'. Verder is het nog helemaal leeg.
- Pas vervolgens in de editor (notepad++) de lege ruimte tussen <body> en </body> aan met een kort stukje tekst. Sla op en open dat bestand weer. Nu is je pagina anders geworden. Experimenteer hier maar eens mee in de volgende opdrachten.