Hoe je HTML leren kunt en in no-time zelf een website maakt

Voor het maken van een website is HTML leren niet stikt noodzakelijk. Waarom zou je dan nog de moeite nemen om HTML te leren? Onder meer omdat kennis van HTML je de vrijheid geeft om te maken wat je wilt.

Bovendien zul je ook met een sitebuilder of Wordpress moeten leren omgaan. In de tijd die dat kost kun je ook HTML leren schrijven.

Waarom HTML leren een goed idee is

Het is zeer wel mogelijk om zonder enige kennis van HTML toch een website te maken. Bijvoorbeeld met behulp van een sitebuilder die door steeds meer webhosts worden aangeboden.

Met een sitebuilder kun je zonder meer snel een website maken. Maar zelf iets implementeren om de functionaliteit van je website mee uit te breiden, of te personaliseren, kan vaak niet. En dat is wel een vereiste als je wat wilt verdienen met je website.

WordPress gebruiken is dan een betere optie. Want door veel mensen worden toepassingen en functionaliteiten gemaakt die in WordPress geïmplementeerd kunnen worden.

Dat geeft enorm veel mogelijkheden om WordPress uit te breiden. Maar volledige vrijheid om te creëren wat je wilt heb je ook dan nog steeds niet.

Die vrijheid heb je wel wanneer je de moeite neemt om HTML te leren. Want dan kun je echt maken wat je wil. En zelfs dan kun je nog steeds besluiten om niet alles zelf te maken. Want met voldoende kennis van HTML, kun je altijd wat anderen gemaakt hebben passend maken voor jouw eigen website.

Heb je daarentegen geen kennis van HTML, dan blijf je eigenlijk altijd afhankelijk van wat anderen maken.

Dat maakt HTML leren een goed idee en de tijd en moeite die je erin steekt waard.

Is HTML moeilijk en hoe moet je HTML gebruiken?

Afhankelijk van anderen zijn zou je eigenlijk niet moeten willen als je een website voor jezelf maakt. Zeker wanneer je daar een inkomen mee wilt verdienen. Want zo moeilijk is HTML helemaal niet. Omdat het enige dat je echt moet weten over HTML is:

  • Welke onderdelen er verplicht in een HTML-pagina moeten staan voor een juiste weergave in iedere webbrowser.
  • Welke tags je wanneer gebruiken moet.
  • Hoe je de verschillende HTML tags op de juiste manier schrijft.

Dit is eigenlijk alles wat je weten moet over HTML. De HTML-tags die er zijn hoef je namelijk echt niet allemaal uit je hoofd te kennen. Want voor de meeste webpagina’s gebruik je er slechts een paar. Te weten:

  1. De Header-tag om koppen mee te definiëren: <h1> </h1>, <h2> </h2>, enzovoort.
  2. De Paragraph-tag om alinea’s mee te definiëren: <p> </p>.
  3. De Bold-tag om woorden vet weer te geven: <b> </b>
  4. De Italic-tag om woorden cursief weer te geven: <i> </i>
  5. De List-tag om genummerde en ongenummerde lijsten en opsommingen mee te maken: <ol> </ol>, <ul> </ul>
  6. De Image-tag om afbeelding op te nemen in een pagina: <img />
  7. De Anchor-tag om links aan te brengen in een HTML-pagina: <a> </a>
  8. De Division-tag om een pagina op te kunnen delen in diverse secties, zoals een header-sectie, een artikelsectie, een menusectie en een footer-sectie: <div> </div>.

Wanneer je de mogelijkheden en beperkingen van deze dit rijtje tags weet, dan weet je in principe voldoende om een website te kunnen maken.

Uiteraard zijn er nog veel meer HTML-tags die soms van pas kunnen komen. Maar deze gebruik je allemaal op dezelfde manier zoals de juist besproken tags.

Een alfabetisch overzicht van alle HTML-tags vind je op de website van W3schools [https://www.w3schools.com/TAgs/default.asp] W3schools is een website die wereldwijd onder websitebouwers grote bekendheid geniet.

Belangrijk om te weten over HTML is verder dat HTML slechts een opmaaktaal is waarmee een document geschikt gemaakt kan worden voor weergave in een webbrowser.

Het echte vormgeven van een webpagina doen we met behulp van CSS (Cascading Style Sheets). Dat is een taal waarmee we stijlbladen kunnen maken die precies beschrijven hoe de elementen, ofwel tags, op de webpagina vormgegeven en gepresenteerd moeten worden.

Hoe lang duurt het om HTML te leren?

Omdat je eigenlijk niet zo heel veel hoeft te weten over HTML om ermee aan de slag te kunnen, duurt het niet lang om HTML te leren. Hoe lang het precies duurt, hangt grotendeels af van hoe veel en hoe intensief je zelf bezig bent met HTML daadwerkelijk gebruiken.

HTML leer je het snelst door gewoon webpagina’s te maken en dingen te proberen. En omdat je meteen het resultaat kunt zien van wat je aan het doen bent, leer je als het ware constant. Zowel van je probeersels als van je fouten.

Hoe begin je met HTML?

Met HTML leren kun je op ieder moment beginnen. Want je hebt niets nodig wat niet al op je computer staat. Hierbij ga ik er overigens voor het gemak vanuit dat je een Windows-computer hebt.

Alles wat je nodig hebt om te beginnen met het leren van HTML is een webbrowser zoals Google Chrome of Microsoft Edge en een zogenaamde teksteditor. Een teksteditor is bedoeld om zogenaamde platte tekst mee te bewerken. Onder platte tekst wordt verstaan: tekst zonder enige vorm van opmaak die uitsluitend bestaat uit letters, spaties, cijfers en leestekens.

De app Kladblok die standaard in Windows zit is zo’n teksteditor. Die kunnen we dan ook gebruiken om HTML mee te schrijven. Uiteraard zijn er teksteditors die het schrijven van HTML makkelijker maken. Onder andere door de reeds geschreven tags met een kleur te markeren. Iets wat de leesbaarheid van de HTML-codes zeker bevordert.

Een voorbeeld van een editor die speciaal bedoeld is voor het schrijven van onder andere HTML is Notepad++. Een editor die ik zelf ook al jaren naar volle tevredenheid gebruik.

Maar omdat editors zoals Notepad++ voor veel meer geschikt zijn dan alleen het schrijven van HTML, kunnen ze wat overweldigend overkomen als je nooit eerder wat met HTML hebt gedaan.

Kladblok is daarentegen een zeer eenvoudige teksteditor. En daarom uitermate geschikt om HTML te leren schrijven. Temeer omdat je door de eenvoud van Kladblok direct leert om je HTML-code netjes en overzichtelijk te schrijven. Iets waarvan je plezier zult gaan hebben zolang je websites maakt.

Beginnen met het leren van HTML doe je als volgt:

  1. Start de app Kladblok.
  2. Kladblok zal openen en direct een leeg document weergeven. Wat betekent dat je direct kan beginnen met het intypen van tekst. Typ het tekstje: Hallo wereld!
  3. Klik op het menu Bestand en klik vervolgens op de optie Opslaan.
  4. Geef het bestand de naam: index.html
  5. Klik op de knop Opslaan.
  6. Start Verkenner en navigeer naar de locatie waar je het bestand index.html hebt opgeslagen.
  7. Dubbelklik op het bestand index.html.

Het bestand index.html zal nu geopend worden in de webbrowser. Hiermee is je eerste zelfgemaakte webpagina een feit.

Het tekstje “Hallo wereld!”, of “Hello world!” in het Engels, wordt standaard als eerst voorbeeld gebruikt bij elke programmeercursus. En ook vaak als eerste voorbeeld bij een HTML-cursus. Daar wijken we uiteraard dan ook niet vanaf.

Dat we het bestand index.html genoemd hebben heeft een reden. En wel dat index.html altijd de bestandnaam moet zijn van de homepage van een website. Elke webserver is standaard namelijk zo insteld, dat wanneer de domeinnaam van een website in de browser wordt ingetypt, bijvoorbeeld: www.webwijsheid.nl, dat dan de webpagina met de naam index.html getoond wordt.

Kortom, als je een website bouwt dan ben je verplicht om de homepage van je website de bestandsnaam index.html te geven. Let hierbij op dat je de hele bestandsnaam in kleine letters schrijft. Webservers zijn namelijk, wat ze noemen, hoofdlettergevoelig. Dit betekent dat Index.html en index.html twee verschillende bestanden zijn voor een webserver.

Vanaf nu kun je het tekstje “Hallo wereld” verder uitbreiden. Bijvoorbeeld door eraan toe te voegen wat ik er hier over verteld heb, aangevuld met wat je zelf vindt van het tekstje “Hallo wereld!”

Ook de aanvulling zal in de webbrowser weergegeven worden. Maar je ziet dat de leesbaarheid al te wensen over begint te laten. Om de leesbaarheid te vergroten kunnen we wat HTML-tags toevoegen.

Dat doe je als volgt:

  1. Plaats zoals in de onderstaande afbeelding weergegeven de tekst ‘Hallo wereld!’ tussen Header-tags. (<h1> </h1>)
  2. Plaats vervolgens de blokken tekst tussen Paragraph-tags (<p> </p>)
  3. Sla de pagina op en bekijk hem in de browser.

Je ziet nu dat met het toepassen van slechts een paar HTML-tags de tekst netjes gestructureerd wordt weergegeven in de webbrowser.

Hiermee heb je een begin gemaakt met het leren van HTML. Je hebt gezien dat met het toepassen van een klein beetje kennis over het maken van websites en slechts een paar HTML-tags je al iets leesbaars in een webbrowser kunt tonen.

Dat maakt HTML leren leuk en het daagt je uit om steeds weer wat nieuws te proberen.

Gerelateerd