Tekst aanpassen, afbeeldingen vervangen, PDF's vernieuwen — en je wijzigingen online zetten. Alles wat je nodig hebt om je mini-sites zelfstandig te onderhouden.
Tekst · Afbeeldingen · PDF's · Publiceren
Drie tools die allemaal gratis zijn. GitHub Desktop heb je al staan. De andere twee installeer je één keer en dan heb je alles wat nodig is.
Hiermee open je de HTML-bestanden en pas je tekst aan. VS Code toont de code mooi gekleurd, waardoor fouten makkelijker op te sporen zijn.
Hiermee stuur je je wijzigingen naar de live website. Dit heb je al geïnstalleerd uit de vorige tutorial.
Om je pagina te bekijken vóórdat je publiceert: dubbelklik op het HTML-bestand op je computer. Zo zie je meteen of alles goed oogt.
Verkleint afbeeldingen zonder zichtbaar kwaliteitsverlies. Essentieel om je site snel te houden. Gewoon bestand erin slepen.
Voordat je gaat bewerken: weten wat elk type bestand doet, voorkomt veel verwarring. Dit is de rolverdeling binnen je mini-site.
Hier staat alle tekst, koppen, knoppen en links. Dit is het bestand dat je het vaakst zult openen. Denk aan index.html als "de pagina zelf".
Kleuren, lettertypen, afstanden, kaders — alles visueel. In onze infographics staat de CSS meestal ingebed in het HTML-bestand zelf, bovenaan tussen <style> tags.
Uitklapbare secties, hover-effecten, de progressiebalk bovenaan. Meestal hoef je hier niets aan te doen — laat dit staan zoals het is.
Staan in assets/images/. Vervangen doe je door simpelweg een bestand met dezelfde naam in dezelfde map te zetten.
Staan in assets/pdfs/. Bezoekers kunnen deze openen of downloaden via een link in je pagina.
Tekst staat altijd tussen twee tags — de haakjes met een woord erin. De tag vertelt de browser wat de tekst is: een kop, een alinea, een link. Jouw taak: de tekst ertussen wijzigen, de tags laten staan.
Elke stuk tekst in een webpagina zit tussen een open-tag en een sluit-tag. De sluit-tag heeft een schuine streep erin. Daartussen staat de tekst die je mag aanpassen.
< > niet aan. Als je per ongeluk een haakje verwijdert, raakt de pagina "in de war" en zul je het even moeten terugzetten.
Je hoeft geen programmeur te zijn. Deze zes herken je steeds. Meer dan dit heb je zelden nodig.
<h1>Hoofdtitel van de pagina<h2>Sectiekop<h3>Subkop<p>Paragraaf / alinea<li>Item in een lijst<strong>Vetgedrukt voor nadrukLinks zien er iets anders uit. De zichtbare tekst staat tussen de tags, en de bestemming staat tussen de aanhalingstekens in href.
index-backup.html. Gaat er iets mis? Dan heb je altijd een werkende versie om naar terug te keren.
Werk je met bestaande afbeeldingen, dan is het vervangen kinderspel. Wil je een nieuwe afbeelding toevoegen, dan komt er één regel code bij. Beide scenario's hieronder.
De snelste route: gebruik precies dezelfde bestandsnaam als de oude afbeelding. Dan hoef je in de HTML helemaal niets te wijzigen.
Bijvoorbeeld screenshot.png in de map assets/images/
Geef je nieuwe afbeelding exact dezelfde naam
Sleep naar de map, bevestig "vervangen"
Commit en push — klaar
Twee stappen: het bestand in de map zetten, en in de HTML vertellen waar de afbeelding moet komen.
alt="" is geen extraatje. Mensen met een schermlezer horen deze tekst voorgelezen, en zoekmachines gebruiken hem ook. Schrijf kort wat er op de afbeelding staat.
Kies bewust. Een verkeerd formaat maakt je pagina onnodig traag of je afbeelding lelijk.
| Formaat | Gebruik voor | Tip |
|---|---|---|
| .jpg | Foto's met veel kleurvariatie | Beste keuze voor portretten, landschappen, sfeerbeelden |
| .png | Logo's, iconen, screenshots met tekst | Ondersteunt transparante achtergrond |
| .webp | Alles — moderne allesdoener | Kleiner dan jpg én png, zelfde kwaliteit |
| .svg | Logo's en simpele illustraties | Altijd scherp, onafhankelijk van grootte |
PDF's werken bijna identiek aan afbeeldingen: bestand in de map, en een link in de HTML die er naartoe wijst.
Zet je PDF in assets/pdfs/ en voeg een link toe in je HTML. Het target="_blank" zorgt dat de PDF in een nieuw tabblad opent — zo verliest de bezoeker je pagina niet.
werkboek-2026.pdf in plaats van Werkboek 2026.pdf.
Alle bewerkingen die je hebt gemaakt staan nu op je computer. Deze vier stappen zetten ze op de live website. Pages werkt automatisch bij — meestal binnen een minuut.
In VS Code: Ctrl+S (Windows) of Cmd+S (Mac). Een bestand met een rond bolletje in het tabblad betekent: nog niet opgeslagen.
Je ziet links alle bestanden die je hebt aangepast. Rechts verschijnen de exacte regels: groen = toegevoegd, rood = verwijderd. Neem een seconde om te checken of dit klopt.
Onderin: een kort zinnetje dat uitlegt wat je hebt gedaan. Bijvoorbeeld "Team-foto vervangen op project-a". Klik op Commit to main.
Bovenin: klik op Push origin. Binnen 1-2 minuten staan je wijzigingen live. Ververs je website in de browser (Ctrl+F5 of Cmd+Shift+R) om het resultaat te zien.
Klik op een vraag om de oplossing te zien. Negen van de tien problemen staan hieronder beschreven.
Ctrl+F5 (Windows) of Cmd+Shift+R (Mac). Je browser bewaart soms een oude versie.Foto.jpg is niet hetzelfde als foto.jpg. Op GitHub Pages is het bestandssysteem hoofdlettergevoelig, ook al is dat op jouw computer misschien niet zo.assets/images/? En klopt de spelling in je HTML src="" exact met de bestandsnaam?team-foto.jpg werkt, team foto.jpg geeft problemen.
< of > weggehaald, of een sluit-tag verdwenen. Open GitHub Desktop en kijk naar de rood gemarkeerde regels — daar staat wat er verwijderd is. Zet het terug.project-a/index.html linken naar een PDF wordt assets/pdfs/bestand.pdf, niet /assets/pdfs/bestand.pdf. Die eerste schuine streep breekt de link.
project-a/index.html, dan moeten je wijzigingen verschijnen op https://gebruikersnaam.github.io/learning-lab/project-a/.De eerste paar keer voelt het spannend. Na drie of vier rondes bewerken, committen en pushen is het een vaste gewoonte. En weet: alles is terug te draaien. Er bestaat niets dat je niet kunt herstellen.