Opdracht
Last updated
Was this helpful?
Last updated
Was this helpful?
Om sites te kunnen bouwen heb je een code-editor en testomgeving nodig. Hoewel het in principe kan met gewoon kladblok (notepad) en je eigen browser, is het wel handig om wat speciale tools te gebruiken. Wij werken met Replit. Dat is een online editor waar je makkelijk html-css projecten kunt maken (en nog andere programmeertalen als je wilt). Deze heeft een aantal hele handige features:
Je kunt tijdens het coderen je projecten steeds makkelijk testen
De code is vanaf overal beschikbaar (thuis en school) , dus je kunt nooit je bestanden vergeten
Je kunt je project met je docent delen voor feedback of hulp
Je site staat meteen online zodat je anderen een link kunt sturen om je site te bekijken.
Ga naar de website en maak daar een account aan. Klik hiervoor op "Sign Up" rechtsbovenaan:
Maak een account aan of login met Google, Facebook of Git. Onthoud je login gegevens goed uiteraard. Je komt nu op jouw Replit homepage:
Klik linksboven op "New repl" en kies als "template" voor "HTML, CSS, JS". Let op: er is ook een tamplate met de naam "HTML, CSS, JS (Auto Refresh)". Die moet je niet hebben, neem die zonder "(Auto Refresh)" in de titel. Geef je project een zinnige naam: "HTML opdrachten deel 1".
Klik dan op "Create repl" en je project wordt aangemaakt. Hieronder zie je wat de verschillende onderdelen van de editor zijn:
Het is bedoeling dat je volgende aanpassingen doet voor je site:
Pas de titel van je website aan naar "Een pagina over mijzelf". Dat betekent dat je de tekst tussen <title> en </title> (op regel 7) dus gaat aanpassen hiervoor.
Verwijder alles tussen <body> en </body> (dus verwijder regel 12 t/m 20) om de inhoud van de pagina leeg te maken.
Maak nu twee <h1>-tags aan op je pagina. Noem de eerste "Over mijzelf", de tweede "Vrije tijd". Onder "Vrije tijd" maak je 2 subkoppen met behulp van <h2> tags: "Hobbies" en "Sport".
Druk nu bovenaan de pagina op "Run". Als het goed is ziet het resultaat (rechter paneel) er nu zo uit:
Zet onder de <h1>-tag "Over mijzelf" en onder elk van de <h2> tags een paragraaf (<p>)waarin je iets zinnigs vertelt over jezelf, je hobbies en je sport. Je hoeft niet zoveel te schrijven hoor. Een regel per kopje is meer dan genoeg. Bijvoorbeeld:
Gefeliciteerd, je bent nu de trotse bezitter van je eerste eigen webpagina. Je kunt de webpagina ook los bekijken. Hiervoor klik je op het knopje "new tab" rechts bovenaan het voorbeeldvenster:
Je hoeft de opdracht nog niet in te leveren. We breiden het project steeds wat verder uit in de komende hoofdstukken. Pas na hoofdstuk 5 lever je het eindresultaat in. Daarna beginnen we een nieuw project voor de overige hoofdstukken.
