HTML, languit HyperText Markup Language, is een programmeertaal voor websites die gebruikt wordt voor het ontwikkelen van webpagina’s.
HTML bestaat al sinds 1990 en is nog steeds niet weg te denken. We kunnen eigenlijk wel stellen dat HTML een van de belangrijkste bouwstenen is voor websites. Het wordt gebruikt om de structuur en inhoud van webpagina’s weer te geven. Het is echter niet geheel verantwoordelijk voor het uiterlijk. Hiervoor wordt met name de taal CSS (Cascading Style Sheet) gebruikt en voor de interactiviteit gebruiken we weer JavaScript.
HTML is verder een op tekst gebaseerde taal die is geschreven met tags om de gegevens op een webpagina te beschrijven, zoals koppen, paragrafen, lijsten en links.
Hoewel HTML al sinds het begin van de jaren negentig bestaat, evolueert het voortdurend om te voldoen aan de eisen van moderne webontwikkeling. In dit artikel zal ik je meer vertellen hoe het werkt en waar je het zou kunnen leren.
Inhoudsopgave: Wat is HTML?
Wat doet HTML precies?
HTML is verantwoordelijk voor de structuur en lay-out van webpagina’s en is daarnaast ook verantwoordelijk voor het leveren van inhoud zoals tekst en afbeeldingen.
In de kern helpt HTML te definiëren hoe webpagina’s worden gestructureerd en gepresenteerd aan bezoekers van de website. Er worden tags gebruikt om verschillende elementen op een pagina te ordenen, waardoor ze op verschillende manieren kunnen worden vormgegeven.
De tags vertellen webbrowsers precies hoe de pagina moet worden weergegeven, zodat bezoekers er gemakkelijk doorheen kunnen navigeren. Bovendien stelt HTML ontwikkelaars in staat om multimedia zoals audiobestanden of video’s in hun pagina’s in te sluiten, wat zorgt voor een algehele betere gebruikerservaring.
Kortom, deze pagina kun je ook alleen maar op deze manier lezen dankzij HTML.
Hoe werkt HTML?
HTML-bestanden bestaan uit tekst die is opgemaakt met behulp van specifieke tags of labels. Deze tags geven aan hoe de tekst moet worden weergegeven op een webpagina en kunnen bijvoorbeeld worden gebruikt om tekst op te maken als koppen of paragrafen, afbeeldingen toe te voegen, hyperlinks naar andere pagina’s te maken of tabellen te creëren.
HTML-tags maken gebruik van chevron-haakjes (punthaken) en hebben bijna altijd een opening- < > en sluitende tag </>. Ik zal een voorbeeld geven om het wat duidelijker te maken. De opening-tag voor een paragraaf in HTML is <p> en de sluitende tag is </p>. Tussen de opening- en sluitende tag kun je tekst plaatsen die moet opgemaakt worden als een paragraaf.
Bijvoorbeeld: <p>Dit is een paragraaf</p>.
Hopelijk is de complete basis voor je duidelijk. Een paragraaf is dus <p>, maar wanneer je iets anders wil doen heb je weer een andere tag nodig. Zo heb je ook koppen <h1> (tot en met h6), hyperlinks <a>, tabellen <table> en nog veel meer.
Hoe is de opbouw van een HTML-pagina?
Nu we het over de basis hebben gehad, is het ook belangrijk om de opbouw van een HTML-pagina te hebben. Een HTML-pagina bestaat uit verschillende elementen die allemaal met elkaar verbonden zijn om een website goed te laten werken.
Een HTML-pagina start altijd bovenaan met een DOCTYPE-declaratie om aan te geven welke standaarden een webbrowser moet laden.
Na DOCTYPE volgt de <head>-sectie. Dit is een sectie die beschrijvende informatie over het document bevat, zoals de titel <title> en linkverwijzingen naar andere documenten of bronnen. Zo wordt hier vaak gelinkt naar het CSS-bestand dat gebruikt wordt voor de opmaak.
Na de head-sectie volgt de <body>-sectie. In deze sectie komt het overgrote gedeelte van de inhoud die op de website moet worden weergegeven en zichtbaar is voor de bezoekers van je website. Denk aan tekst, afbeeldingen, tabellen, video’s, formulieren en ga zo maar door.
Tot slot kan er onderaan ook nog een <footer>-sectie zijn. Hier plaats je voornamelijk aanvullende informatie met betrekking tot copyright of contactgegevens.
Hoe kan ik HTML-code van een website bekijken?
De informatie hierboven is misschien moeilijk om direct helemaal te verwerken. Het is dan mijn inziens altijd een goed idee om de informatie ook in de praktijk te zien. Het is dan ook leuk om je te kunnen vertellen dat je de HTML-code van iedere website kunt bekijken, dus ook van deze pagina.
Het enige wat je hiervoor hoeft te doen is op de pagina op je rechter muisknop te klikken. Je krijgt nu een aantal opties te zien.
In mijn geval is het een kwestie van op ‘paginabron bekijken’ klikken, maar als jij een andere browser gebruikt kan het net iets anders heten. Wanneer je de paginabron bekijkt krijg je zoiets als hieronder te zien.
Je kunt dus de complete HTML-code van de desbetreffende pagina bekijken en hier eventueel van leren.
Waar kun je HTML leren?
HTML is gelukkig een van de gemakkelijkste programmeertalen om te leren, dus het is een verstandige keuze om te leren als je net begint met het maken van webpagina’s. Vaak wordt gedacht dat het niet nodig is om te leren, want een CMS-systeem als WordPress lost dit probleem toch op?
Ik kan je vertellen dat het leven toch echt een stuk makkelijker kan worden als je de basis van HTML snapt. WordPress heeft daarnaast ook niet voor niets in de standaard editor ook een ‘Eigen HTML’ blok.
Mocht je HTML willen leren, dan zijn er diverse online handleidingen en boeken te vinden die je daarbij kunnen helpen.
Wanneer je een boek wil om de absolute basis te leren, dan kan ik je het boek HTML en CSS voor Dummies adviseren.
Hierin leer je ook direct de basis van CSS, zodat je zelf onder de knie krijgt hoe je in combinatie met HTML en CSS dingen op je website goed kunt opmaken.
Wil je liever online HTML leren, dan kan ik je de website van w3schools aanleren. Het is Engelstalig, maar mijn inziens kun je het hier op een fijne manier leren.
Welke code editor kan ik gebruiken?
Om HTML of andere programmeertalen zoals CSS, JavaScript en PHP te schrijven, is het altijd fijn om een code editor programma te gebruiken.
Er zijn ontzettend veel verschillende code editor programma’s waar je gebruik van kunt maken. Enkele zijn:
- Atom: Dit is een open source code editor van Github met een diverse nuttige functies. Denk aan syntax highlighting, een ingebouwde terminal en de mogelijkheid om plugins te installeren.
- Sublime Text: Dit is wederom een zeer een krachtige code editor met syntax highlighting, automatische aanvulling van code en een ingebouwde terminal.
- NotePad++: Is wat mij betreft de beste eenvoudige code editor voor Windows. Het beschikt over syntax highlighting en de mogelijkheid om verschillende talen te gebruiken.
Kijk wat voor jezelf belangrijk is, test de editors uit en ga voor het code editor programma waar je zelf het prettigst mee werkt.
