Wat is HTML en wat kun je met HTML doen?

De term HTML kom je vroeg of laat tegen, zodra je plannen hebt om een website te maken. Maar wat is HTML? Wat kun je ermee? En hoe gebruik je HTML precies?

Eén ding kunnen we alvast met zekerheid stellen: iedere website op internet bestaat uit webpagina’s waarin HTML-code wordt gebruikt. HTML is dan ook onmisbaar bij het maken van websites.

Wat betekent HTML?

HTML is de afkorting van Hyper Text Markup Language. In het Nederlands zou ‘Hyper Text’ vertaald kunnen worden als tekst waarin het mogelijk is om te verwijzen naar aanvullende informatie. De link op een webpagina, die je naar een andere webpagina brengt, en die we allemaal kennen is daar een goed voorbeeld van.

‘Markup Language’ kunnen we vertalen als opmaaktaal.

Hoewel vaak aangeduid als programmeertaal, is HTML niet meer dan opmaaktaal voor tekst en andere elementen die samen een webdocument vormen. Van een tekst opmaken spreken we wanneer we werken met:

  • Lettertypes.
  • Lettergroottes.
  • Witruimten.
  • Koppen.
  • Sub-koppen.
  • Vet -of cursief weergeven.
  • Enzovoort.

Een webdocument is een document dat weergegeven kan worden in een webbrowser. Een webpagina is daar een voorbeeld van.

Wat houdt HTML in en waar komt het vandaan?

In de jaren zestig van de vorige eeuw al liepen onderzoekers, wetenschappers en studenten tegen het probleem aan dat een digitaal, op de computer gemaakt, document niet zonder meer leesbaar was op elke willekeurige computer.

Dat is lastig wanneer een document onderzoeksresultaten bevat die voor meerdere mensen interessant kunnen zijn. Zeker voor diegenen die deel uitmaken van het team dat het onderzoek doet.

Dit betekende dat er iets verzonnen moest worden, waardoor elk document op elk computersysteem leesbaar zou kunnen zijn. Tevens moest een dergelijk document door iedereen gemaakt kunnen worden. Het moest dan ook vooral niet moeilijk zijn om te maken.

Met deze gedachten werd HTML ontwikkeld. Naarmate het gebruik van HTML toenam en steeds meer HTML-documenten via computernetwerken werden gedeeld, ontstond langzaam maar zeker het internet zoals we dat vandaag de dag kennen.

Wat kun je met HTML doen en hoe gebruik je het?

Wanneer we een webdocument opmaken met HTML, dan markeren we in feite de elementen waaruit een pagina bestaat. Hiermee vertellen we de webbrowser precies welk element we op welke manier weergegeven willen hebben.

Dit doen we door alle elementen waaruit de pagina bestaat op te sluiten in HTML-tags. Een element kan bijvoorbeeld zijn:

  • Een paragraaf.
  • Een kop.
  • Een sub-kop.
  • Een afbeelding.
  • Een link.
  • Een kolom.
  • Een header.
  • Een footer.

Een goed voorbeeld van pagina's opmaken kunnen we dagelijks zien in de krant. De krant heeft een bepaald paginaformaat. En binnen dat formaat moeten artikelen, koppen boven de artikelen en ook foto's en andere elementen een plek op de pagina toegewezen krijgen.

En wel op zo'n manier, dat het voor ons lezers duidelijk is wat bij wat hoort. Maar uiteraard ook, dat we aangespoord worden om te gaan lezen.

Hetzelfde willen we uiteraard bereiken als we een webpagina maken voor onze website. Want we stoppen daar veel tijd en energie in. Dan willen we uiteraard graag deze bezocht en ook gelezen wordt.

HTML helpt ons om een webpagina zo op te maken, dat een bezoeker snel begrijpt wat hij op deze pagina kan vinden. Dit doen we onder andere door de informatie die we op de pagina weergeven makkelijk leesbaar te maken.

Zo pak je een HTML pagina maken aan

Nu je weet wat HTML is, waar het voor bedoeld is en wat je ermee kan, zul je ongetwijfeld nieuwsgierig geworden zijn naar hoe je een HTML-pagina dan precies maakt.

Veel webpagina’s bestaan voor een groot deel uit tekst. Voor het weergeven van alleen tekst in een webbrowser heb je overigens geen HTML nodig. Om tekst weer te kunnen geven in een webbrowser hoef je slechts de tekst die je gemaakt hebt op te slaan als .txt-bestand.

De simpelste manier om dat te doen op een Windows-pc is door:

  1. De app Kladblok te starten.
  2. De tekst in te voeren.
  3. De tekst op te slaan op je pc als .txt-bestand.

Wanneer je dit .txt-bestand vervolgens opent in een webbrowser, bijvoorbeeld Google Chrome, dan zie je dat een webbrowser een tekstbestand probleemloos kan weergeven.

De tekst is goed leesbaar en door zo goed mogelijk gebruik te maken van witruimtes, wordt het je als lezer wel duidelijk welke informatie er op de pagina te vinden is. ( Zie onderstaande afbeelding )

Hoe gebruik je HTML?

Echter, door HTML te gebruiken voor het opmaken van de tekst, zal de tekst ineens een heel stuk makkelijker leesbaar worden. Bovendien zorg je er door HTML te gebruiken voor dat de tekst ook uitnodigt om te lezen.

Want door de verschillende elementen de juiste HTML-tag mee te geven, worden je ogen ineens naar de verschillende koppen toe getrokken en kun je in één oogopslag zien of deze tekst iets bevat waar jij wat aan zou kunnen hebben of jouw nieuwsgierigheid zou kunnen bevredigen.

HTML gebruik je op een webpagina dan ook voornamelijk om ervoor te zorgen dat de inhoud van de pagina uit makkelijk te scannen en te snappen onderdelen bestaat. Zodat de bezoeker van de pagina snel kan bepalen of de informatie die erop staat is waar hij of zij naar op zoek was.

Wat is een HTML-tag?

Voor het indelen van een webpagina en het markeren van de verschillende elementen op de pagina gebruik je de HTML-tag. Op enkele uitzonderingen na bestaat ieder HTML-tag uit een openingstag en een sluittag.

Hierbij wordt de openingstag geplaatst voor het de markeren element en de sluittag wordt geplaatst na het te markeren element.

Een voorbeeld van een element is de alinea. Een alinea markeer je met de HTML-tag <p>, welke staat voor Paragraph. Een alinea markeer je als volgt:

Hierbij zie je dat de openingstag <p> voor het begin van de tekst wordt geplaatst en de sluittag </p> aan het einde van de tekst.

Hoe maak je HTML-code?

Wellicht vermoedde je het al. Je kunt Kladblok niet alleen gebruiken om een tekst in te schrijven die je op wilt slaan als .txt-bestand, maar ook om de elementen waaruit de tekst bestaat met HTML-tags te markeren.

Oftewel, je kunt Kladblok ook gebruiken om HTML-code in te maken. En als je met Kladblok HTML-code kunt maken, dan kun je er ook een hele webpagina in maken. Zelfs een hele website als je dat zou willen.

Om een heuse webpagina te maken heb je overigens wel wat meer HTML-codes nodig dan alleen dan de HTML-tag <p> voor het markeren van een alinea of de HTML-tag <h> voor het markeren van koppen.

Want elke HTML-pagina bestaat onder andere uit onderdelen die wel zichtbaar moeten zijn in de webbrowser en onderdelen die niet zichtbaar moeten zijn in de webbrowser.

Onderdelen die niet zichtbaar moeten zijn in de webbrowser, zijn de onderdelen die bijvoorbeeld nodig zijn om Google te informeren waar de webpagina over gaat en hoe de pagina in de zoekresultaten getoond moet worden.

Voor nu beperken we ons even tot het deel dat wel zichtbaar moet zijn in de webbrowser.

Een standaard webpagina bestaat uit de volgende verplichte HTML-code:

De doctype-tag vertelt de webbrowser dat de pagina die geladen moet worden, en getoond moet worden, een HTML-document is.

De tag <html> geeft vervolgens aan waar het HTML-document begint en waar het HTML-document eindigt.

De tag <head> geeft aan dat hier de onderdelen van de webpagina staan die niet in de webbrowser getoond moeten worden.

De tag <title> is de tag waarin we de titel van de pagina invoeren. Wat we hier invoeren wordt onder andere door Google als titel van onze pagina in de zoekresultaten van Google gebruikt

De tag <body> geeft aan waar het deel van de pagina dat getoond moet worden in de webbrowser begint en waar het eindigt.

Alle onderdelen die deel uitmaken van wat we willen laten zien op een webpagina, plaatsen we dan ook binnen de tag <body> van een HTML-pagina.

Ons voorbeeld tekstbestandje wat ik eerder gebruikte, komt er als HTML-pagina dan ook als volgt uit te zien:

Echter, zodra wel alle HTML-tags aan het tekstje hebben toegevoegd en alle overige HTML-code hebben geschreven die nodig zijn om een HTML-pagina te maken, slaan we het bestand niet langer op als .txt-bestand.

Want het bestand bestaat niet langer alleen uit tekst, maar tevens uit HTML-code. Dat maakt het bestand een HTML-bestand. En een HTML-bestand slaan we op met de extensie .html

Als je op je pc in Verkenner dubbelklikt op het .html-bestand, dan zal het bestand direct als webpagina getoond worden in je webbrowser.

Hiermee weet je wat HTML precies is en wat je ermee kunt doen. Namelijk, webpagina’s maken en zelfs hele websites. Een webpagina, of zelfs een hele website, maken kan in de app Kladblok. Je hebt voor het schrijven van HTML-code en het maken een webpagina dus niet perse speciale software nodig.

Gerelateerd