Wat is HTML en hoe je simpel een HTML-pagina maakt met Kladblok

De term HTML kom je vroeg of laat tegen, zodra je geïnteresseerd raakt in het maken van een website. Maar wat is HTML? Is er een verschil met HTML5? Wat kun je ermee? En hoe moet ik het gebruiken?

Eén ding kunnen we alvast met zekerheid stellen: iedere website op internet bestaat uit webpagina's die gemaakt zijn met HTML. HTML kan dan ook beschouwd worden als onmisbaar bij het maken van websites.

Wat betekent HTML?

HTML is de afkorting van Hyper Text Markup Language. In het Nederlands zou "markup language" vertaald kunnen worden als "opmaak taal".

Hoewel vaak aangeduid als programmeertaal, is HTML niet meer dan opmaaktaal voor tekst in een tekstdocument. Tenminste, in eerste instantie.

Want na het opmaken van een HTML-pagina, ofwel alle elementen op hun plek zetten, kunnen we er vervolgens voor kiezen om de vormgeving van de diverse elementen aan onze wensen aan te gaan passen. En dat is waar we CSS voor gebruiken.

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, de koppen boven de artikelen en ook foto's en andere elementen een plek op de pagina toegewezen krijgen.

Met HTML kun je webpagina's opmaken, vergelijkbaar met een krant

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

Ook als we een website maken, en daar tijd en energie instoppen, dan willen we graag dat onze website bezocht en ook gelezen wordt.

HTML helpt ons om een webpagina zo op te maken, dat een bezoeker sneller begrijpt wat hij op deze pagina kan vinden en de informatie op de pagina vooral ook makkelijk en snel kan lezen.

Waarom HTML ooit ontwikkeld is

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

En dat is lastig, wanneer dit document onderzoeksresultaten bevat die voor meerdere mensen interessant kunnen zijn. En 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. En 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.

Van een tekstpagina een HTML-pagina maken

Vaak wordt er gesproken over HTML codes, HTML code schrijven, een webpagina coderen.

Duidelijker zou zijn om te spreken van een pagina opmaken met HTML, ofwel de inhoud van de pagina op zo'n manier presenteren dat het de leesbaarheid ten goede komt.

Iedere webbrowser kan uiteraard ook gewoon platte onopgemaakte tekst weergeven. Echter, als de inhoud van de pagina toeneemt, blijkt dit al snel geen optie meer.

Opmaken met HTML verhoogt de leesbaarheid

Met het gebruik van slechts enkele HTML-tags is het overigens al mogelijk om de inhoud van een pagina duidelijk en goed leesbaar weer te geven in een webbrowser.

Enkele HTML-tags zijn voldoende om een HTML-pagina goed leesbaar te maken

De HTML-tag

Voor het opmaken van een HTML-pagina wordt zogezegd gebruik gemaakt van HTML tags. Om precies te zijn, een openings-tag en een sluit-tag.

Uitzonderingen daarop zijn HTML tags die geen inhoud kennen, zoals bijvoorbeeld de HTML tag, waarmee je een break aangeeft in de tekst, <br/> of waarmee je een horizontale lijn trekt, <hr/>.

Tussen de openings-tag en de sluit-tag wordt de inhoud van de pagina opgenomen. Of slechts een bepaald deel van de inhoud, bijvoorbeeld een blok met tekst.

Doorgaans plaatsen we die delen van de pagina tussen HTML-tags, die we straks in een webbrowser weergegeven willen zien. Uitzonderingen daarop zijn de HTML-tags die we gebruiken binnen de tag <head> </head>

Het HTML-attribuut

De openings-tag, de inhoud en sluit-tag vormen samen een HTML-element.

Aan HTML-elementen kunnen attributen worden toegevoegd. Een HTML-attribuut kan bijvoorbeeld zijn width of height.

Vervolgens kunnen we waarden aan het HTML-attribuut toekennen, bijvoorbeeld: 225px aan het attribuut width en 100px aan het attribuut height.

Daarmee vertellen we de browser die de HTML-pagina op het beeldscherm weer gaat geven, dat we de afbeelding op deze pagina 225 pixels breed en 100 pixels hoog weergegeven willen hebben.

De noodzakelijke elementen voor een goede HTML-pagina

Elke HTML-pagina bestaat minimaal uit de basiselementen die nodig zijn om een pagina juist weer te geven in een webbrowser. Wanneer één of meerdere elementen zouden missen, kan dit tot gevolg hebben dat de pagina niet of niet juist wordt weergegeven in een webbrowser.

Elk HTML-document ziet er in basis dan ook uit, zoals weergegeven in onderstaande afbeelding. Een HTML-document dient te worden opgeslagen als bestand met de extensie .html. Bijvoorbeeld: voorbeeldpagina.html

de basiselementen van een HTML5-pagina

Wat we in de bovenstaande afbeelding zien, zijn de basiselementen voor een HTML5-pagina. Dit zijn de volgende elementen:

De HTML5 doctype: <!doctype html> vertelt de webbrowser dat de inhoud van deze HTML-pagina volgens de HTML5-standaard is gemaakt en als zodanig moet worden weergegeven.

De tags <html> </html> geven aan waar het HTML-document begint en waar het eindigt.

De tags <head> </head> vormen het HTML-element waarbinnen de gegevens worden opgenomen die voor de pagina van belang zijn. Bijvoorbeeld: de titel van de pagina, die wordt weergegeven tussen de tags <title> </title>, de omschrijving van de pagina en welke character set ofwel tekenset er wordt gebruikt voor de inhoud van de pagina.

De tags <body> </body> vormen het HTML-element waarbinnen de inhoud van de pagina wordt weergegeven die ook daadwerkelijk in de webbrowser zal worden getoond.

Een volledige HTML-pagina ziet er dan ook uit zoals in de onderstaande afbeelding wordt weergegeven.

Een volledige HTML-pagina gemaakt in Kladblok

Een HTML-pagina die in een webbrowser zal worden weergegeven zoals op de nu volgende afbeelding:

HTML-pagina gemaakt met HTML5 weergegeven in webbrowser

In dit voorbeeld is zogezegd gekozen voor het maken van een HTML5-pagina. HTML5 is echter niets meer en niets minder dan de nieuwste HTML-standaard.

Heel veel verschil tussen HTML, XHTML en HTML5 is er dan ook niet. Behalve dat er aan HTML5 een aantal nieuwe tags en mogelijkheden zijn toegevoegd die voorgaande versies niet kennen en tevens veelal niet ondersteunen.

Dat betekent dat als je nu HTML wilt gaan leren, het raadzaam is jezelf vooral HTML5 eigen te gaan maken.

Eenvoudig een HTML-pagina maken met Kladblok als HTML-editor

De oplettende lezer zal inmiddels wellicht gezien hebben dat alle HTML die in dit artikel als voorbeeld dient, geschreven is in Kladblok. De tekst editor die in iedere versie van Windows standaard aanwezig is.

Omdat Kladblok een teksteditor is, waarmee het mogelijk is tekst op te slaan zonder enige vorm van opmaak, platte tekst zogezegd, maakt dit Kladblok tevens geschikt als HTML-editor.

Het enige waar je aan moet denken, als je Kladblok als HTML-editor gebruikt, is dat je niet vergeet om de HTML-pagina die je in Kladblok gaat maken ook daadwerkelijk op te slaan als HTML-pagina. Dus met de extensie .html, in plaats van met de standaard extensie die Kladblok aan tekstdocumenten meegeeft, namelijk: .txt.

Overigens: wil je een HTML-pagina maken die automatisch getoond wordt, als je straks je domeinnaam in je webbrowser intypt, noem deze HTML-pagina dan: index.html.

Iedere webserver is namelijk standaard zo ingesteld dat de HTML-pagina met de naam: index.html, de homepage is van de website. Dit is dan ook de pagina die standaard aangeroepen en weergegeven wordt in je webbrowser, zodra je de domeinnaam van een website intypt in de adresbalk van je webbrowser en op de Enter-toets drukt.

Een HTML-pagina vormgeven met CSS

We hebben het in dit artikel kort gehad over HTML-elementen. En dat je aan een HTML-element een zogenaamd attribuut kan toevoegen. Waarbij als voorbeeld via HTML-attributen werd bepaald, hoe een afbeelding moest worden weergegeven.

Via eenzelfde HTML-attribuut kunnen we tevens HTML-elementen, en daarmee uiteraard een hele webpagina, vormgeven ofwel voorzien van een uniek design.

Het attribuut dat we voor het vormgeven van HTML-elementen gebruiken, is het attribuut: style.

Vervolgens gaan we de HTML-pagina vormgeven door bepaalde waarden aan het attribuut style toe te kennen.

De waarden die we toekennen aan het attribuut: style, worden stijlen genoemd.

Met andere woorden: Het vormgeven van HTML-pagina's doen we door middel van het toekennen van stijlen aan de gebruikte HTML-elementen.

De stijlen die we voor het vormgeven van HTML-pagina's gebruiken, heten Cascading Style Sheets. Vrij vertaald: Overervende Stijlbladen. Maar onder webdesigners beter bekend als: CSS.

Het attribuut: style, voeg je op de volgende manier toe aan een HTML-element: <h1 style=" "> </h1>.

Tussen de aanhalingstekens plaatsen we vervolgens de waarden die we aan het attribuut willen toekennen, ofwel de CSS die we willen gebruiken voor het vormgeven van <h1> </h1>.

Stel dat we het element H1 in de kleur rood willen weergeven, met Verdana als lettertype, en een lettergrootte van 32 pixels. Dan moet het attribuut: style en de benodigde waarden, ofwel CSS, als volgt worden geschreven: <h1 style="font: normal 32px Verdana; color:red;"> </h1>. Waarbij we de afzonderlijke stijlen scheiden met een puntkomma (;).

De manier waarop we CSS gebruiken in dit voorbeeld wordt een 'inline style' genoemd. Hetgeen betekent dat de stijl direct aan het HTML-element wordt toegevoegd. Deze stijl geldt dan ook alleen voor dat HTML-element op deze HTML-pagina.

Voegen we dit toe aan onze voorbeeldpagina in Kladblok, dan komt dit eruit te zien zoals weergegeven in onderstaande afbeelding.

HTML-pagina waarin HTML en CSS is gebruikt

Inmiddels zal je een idee gekregen hebben van wat HTML en CSS is en wat je ermee kan. Meer dan je een idee geven is in dit artikel echter ook niet mogelijk. Want de mogelijkheden van HTML en CSS zijn eindeloos. En worden eigenlijk alleen gelimiteerd door jouw eigen creativiteit.

Raadzaam is dan ook om gewoon aan de slag te gaan met HTML en CSS en de mogelijkheden zelf te gaan ontdekken.

Artikelen die je mogelijk ook interesseren

Copyright © 2017 Webwijsheid.nl

privacy statement disclaimer