Welkom, lieve lezer, in de fascinerende wereld van webdesign. Misschien droom je ervan om je eigen stukje van het internet te creëren. Misschien wil je die ene passie delen met de wereld. Het bouwen van een website klinkt soms als magie, maar in de kern is het een prachtig, tastbaar proces. Vandaag nemen we je bij de hand en ontdekken we hoe je, stap voor stap, een website ontwerpt puur met HTML. Dit is de fundering, de ruggengraat van elk online avontuur.
De basis: Wat is HTML eigenlijk?
Voordat je de kwast oppakt, moet je de verf leren kennen. HTML staat voor HyperText Markup Language. Zie het als de bouwstenen van je huis. Het vertelt de browser (zoals Chrome of Firefox) wat elk stukje tekst is: is het een titel? Een paragraaf? Een link? HTML organiseert de inhoud. Het stylen, de kleuren en de lay-out? Die komen later met CSS, maar zonder een stevige HTML-structuur sta je nergens. Jouw website bouwen begint hier.
Een schone start met de juiste tools
Je hebt geen dure software nodig om te beginnen. Wat je nodig hebt, is een eenvoudige teksteditor. Vergeet Word of Pages; die voegen onzichtbare code toe die je website sloopt. Kies voor een pure teksteditor. Denk aan VS Code, Sublime Text, of zelfs Kladblok op Windows. Dit zijn jouw werkbanken waar je de HTML-code schrijft.
Elk HTML-document heeft een standaard sjabloon. Dit is jouw startpunt. Je zorgt dat de browser meteen weet waar hij aan toe is. Voor het ontwerpen van een website met HTML en CSS is het kennen van dit sjabloon cruciaal.
<!DOCTYPE html>: Vertelt de browser dat dit HTML5 is.<html lang="nl">: De hoofdcontainer van je hele pagina.<head>: Hier staat informatie *over* de pagina, niet de inhoud zelf. Denk aan de titel die je in de tab ziet.<body>: Dit is de ruimte waar alle zichtbare inhoud komt.
Zorg ervoor dat je dit raamwerk netjes neerzet. Dit zorgt voor een correcte weergave van jouw nieuw ontworpen website.
De structuur aanbrengen met semantische HTML
Vroeger was HTML een beetje rommelig. Nu moedigen we je aan om ‘semantische’ tags te gebruiken. Semantisch betekent dat de code aangeeft *wat* de inhoud is, niet alleen hoe het eruitziet. Dit helpt niet alleen zoekmachines, maar ook toegankelijkheid. Het maakt jouw creatie begrijpelijk voor iedereen.
Hoe breng je die structuur aan in de <body>?
De hoofdelementen van je pagina-indeling
Denk aan de indeling van een krant. Je hebt een kop, een hoofdtekst, en misschien wat zijbalken. HTML biedt hiervoor specifieke elementen:
<header>: Bevat vaak het logo en de hoofdnavigatie. Jouw digitale entreehal.<nav>: Hier plaats je de links naar andere pagina’s op jouw website.<main>: De unieke, centrale inhoud van deze specifieke pagina. Er is er maar één van.<article>of<section>: Om inhoud logisch te groeperen, zoals een blogpost of een thematisch blok.<aside>: Voor inhoud die gerelateerd is, maar niet de hoofdlijn volgt (denk aan zijbalken of advertenties).<footer>: Onderin de pagina. Hier staan copyrightinformatie of contactgegevens.
Door deze tags correct te gebruiken, creëer je een robuuste architectuur voor je website. Je legt de basis voor een fantastische gebruikerservaring.
Inhoud toevoegen: Tekst, afbeeldingen en links
Nu je de kaders hebt, vul je ze. Dit is waar jouw boodschap echt tot leven komt. Het invoegen van basiselementen is eenvoudig, maar vereist precisie.
VIDEO: De basis van HTML – Een website maken met HTML #1
Interessante websites
Duik dieper in het onderwerp Professioneel een website ontwerpen in html met deze nuttige bronnen.
Titels en paragrafen
Je gebruikt koppen om hiërarchie aan te brengen. De belangrijkste titel van de pagina is <h1>. Gebruik deze maar één keer per pagina. Kleinere, subkoppen lopen van <h2> tot <h6>. Paragrafen omhul je met de <p> tag. Voor een compleet overzicht van de basisprincipes, bekijk ons artikel over website design met HTML.
Een veelgemaakte fout is het gebruiken van te veel H-tags in een rij. Blijf logisch denken. Een H2 introduceert een nieuw hoofdthema. Daaronder komen H3’s voor subonderwerpen binnen dat thema. Zo optimaliseer je de leesbaarheid van jouw content.
Afbeeldingen plaatsen
Mensen zijn visueel ingesteld. Jouw afbeeldingen zijn essentieel. De tag hiervoor is <img>, en dit is een ‘zelfsluitende’ tag.
Je hebt twee cruciale attributen nodig:
src="..."(source): Het pad naar je afbeeldingsbestand.alt="..."(alternatieve tekst): Dit is ontzettend belangrijk! Het beschrijft de afbeelding voor mensen die de afbeelding niet kunnen zien, en voor zoekmachines. Wees specifiek over de inhoud van jouw afbeelding.
Denk aan de performance. Grote, onbewerkte afbeeldingen maken jouw website traag. Optimaliseer je foto’s voordat je ze uploadt. Dit is een cruciaal aspect van modern webontwerp.
Navigeren met hyperlinks
Een website bestaat uit verbindingen. De <a> (anchor) tag maakt dit mogelijk. Je linkt naar andere pagina’s of externe bronnen.
De syntax ziet er zo uit:
<a href="pad/naar/anderepagina.html">Klik hier voor meer informatie</a>
Als je naar een externe site linkt, voeg dan het attribuut target="_blank" toe. Dit opent de link in een nieuw browsertabblad, zodat de bezoeker jouw site niet meteen verlaat.
Lijsten en tabellen voor georganiseerde data
Soms wil je informatie op een nette, gestructureerde manier presenteren. Hier komen lijsten en tabellen om de hoek kijken.
Ongeordende en geordende lijsten
Gebruik ongeordende lijsten (<ul>) voor opsommingen waarbij de volgorde er niet toe doet (zoals een boodschappenlijst). Geordende lijsten (<ol>) gebruik je als de stappen of de volgorde belangrijk is (zoals een recept).
Elk item binnen deze lijsten omsluit je met de <li> (list item) tag.
Tabellen maken voor gestructureerde gegevens
Voor het weergeven van data in rijen en kolommen gebruik je tabellen. Hoewel dit voor lay-out minder gangbaar is geworden, is het perfect voor data. Denk aan een prijsoverzicht of een schema.
Je begint met de <table> tag. Binnen de tabel definieer je rijen met <tr> (table row). In die rijen plaats je de cellen. Gebruik <th> (table header) voor de kolomtitels en <td> (table data) voor de daadwerkelijke inhoud.
Bestandbeheer: Hoe houd je het georganiseerd?
Als je website groeit, groeit ook het aantal bestanden. Een goede organisatie nu bespaart je later veel frustratie. Jouw doel is een netjes mappenstelsel.
Creëer een hoofdmap voor jouw project. Hierin plaats je:
index.html: Dit is altijd de hoofdpagina die de browser als eerste zoekt.- Een map genaamd
css: Hier bewaar je al jouw stijlbladen (voor later!). - Een map genaamd
imagesofimg: Hier komen al je foto’s en grafieken.
Door deze mappenstructuur te hanteren, blijven je paden in de src en href attributen duidelijk en overzichtelijk. Je bouwt een schaalbare website.
De volgende stap: Hoe maak je het mooi?
Je hebt nu de inhoud staan. De structuur staat als een huis. Maar het is nu nog zwart-wit en Spartaans. De magie van kleur, lettertype en opmaak komt van CSS (Cascading Style Sheets). HTML en CSS werken samen. HTML geeft de inhoud, CSS geeft de presentatie. Zonder CSS blijft je website kaal, maar met CSS transformeer je een simpele pagina in een visueel genot.
Veel plezier met het schrijven van jouw eerste regels code. Elke keer dat je een tag correct sluit, heb je een overwinning behaald. Je bent nu bezig met het vormgeven van jouw digitale verhaal.
Veelgestelde vragen over HTML-webdesign
Moet ik CSS gebruiken als ik alleen HTML leer?
Nee, je kunt een werkende, gestructureerde website bouwen met alleen HTML. CSS is essentieel voor de moderne look en feel, maar de basisstructuur staat in HTML. Je begint met HTML, daarna voeg je de stijl toe met CSS.
Hoe zorg ik ervoor dat mijn website op mobiel goed werkt?
Met pure, moderne HTML (HTML5) leg je al een goede basis. Echter, om je website echt ‘responsive’ (aanpasbaar aan alle schermen) te maken, heb je CSS nodig, specifiek met behulp van ‘media queries’ en de viewport meta-tag in de HTML-head.
Wat is het verschil tussen een <div> en een <section>?
Een <div> is een generieke container zonder specifieke betekenis. Je gebruikt deze als je een blok wilt groeperen puur voor styling met CSS. Een <section> daarentegen, groepeert thematisch gerelateerde inhoud en heeft dus een semantische betekenis voor de structuur van je pagina.
