Je zal de term HTML vast weleens tegen zijn gekomen. Velen denken dat het een programmeertaal is, maar dit is niet het geval. HTML programmeren is dus niet correct verwoord, maar dit wordt wel vaak gezegd. HTML leren is eigenlijk noodzakelijk om een website te maken. In dit artikel gaat duidelijker worden wat HTML precies is. Ook zal je merken aan de hand van de voorbeelden dat het heel eenvoudig is om met HTML je eigen website te maken. HTML leren is simpel. Met alleen HTML zal je website er wel kaal uitzien, maar het is een begin. Lees lekker verder!
Ja, ik wil de beste HTML boeken zien!
Wat is HTML?
HTML staat voor “Hyper Text Markup Language”. HTML is een opmaaktaal. Met opmaaktaal kan je al een beetje raden wat ermee bedoeld wordt. HTML beschrijft de opmaak/structuur van een webpagina. Een mooi voorbeeld is deze website. Op de homepage van ProgrammeerPlaats zie je al duidelijk de verschillende elementen binnen de pagina. Deze elementen zijn opgezet met HTML.
Laten we eerst even gaan kijken naar een eenvoudig voorbeeld van een HTML document, daarna gaan we de (oude) homepage van ProgrammeerPlaats analyseren.
<!DOCTYPE html>
<html>
<head>
<title>Titel van de pagina</title>
</head>
<body>
<h1>Hoofdstuk 1</h1>
<p>Paragraaf 1.</p>
<p>Paragraaf 2.</p>
<h1>Hoofdstuk 2</h1>
<p>Paragraaf 1.</p>
<p>Paragraaf 2.</p>
</body>
</html>
Hierboven zie je een eenvoudig HTML document. Zoals je misschien al kan zien aan het HTML document, bestaat de webpagina, die opgebouwd is uit dit HTML document, uit twee hoofdstukken en in totaal vier paragrafen. Laten we gaan kijken wat alle elementen betekenen:
<!DOCTYPE html> = Betekent dat het een HTML5 document is.
<html> = Is het kernelement van het document.
<head>= Bevat meta informatie over het document, zoals een beschrijving, de auteur, de titel enz.
<title> = Bevat de titel van het document. Deze titel komt in het tabblad van de browser te staan, wanneer de website daar openstaat.
<body> = Hierin staat de zichtbare content op de website.
<h1> = Bevat een grote titel, meestal de eerste kop van een pagina.
<p> = Bevat een paragraaf.
Hierboven heb je allemaal HTML tags gezien. Een HTML element bestaat uit een openings- en sluitingstag. Tijdens het HTML leren zal je steeds meer HTML tags gaan kennen. De meeste HTML elementen hebben dus een openings- en een sluitingstag, maar niet allemaal. Bijvoorbeeld <p> is de openingstag en </p> is de sluitingstag van een paragraaf. Daartegenover heb je bijvoorbeeld een <img> tag. Deze HTML tag heeft geen sluitingstag nodig. Hier is een lijstje van alle HTML tags.
In het bovenstaande voorbeeld zie je een gedeelte van de oude homepage van ProgrammeerPlaats. Voorbeelden van elementen in de homepage die we al hebben besproken zijn pijl 1 en pijl 2. Pijl 1 is een <h1> tag en pijl 2 is een <p> tag in het HTML document van deze webpagina.
Je kan zelf ook op een handige manier zien welke elementen een webpagina heeft, oftewel uit welke HTML tags een webpagina bestaat. Je zal daardoor HTML beter leren begrijpen. Dit kan je als volgt doen:
- Klik met je rechtermuisknop op de desbetreffende pagina of gebruik de shortcut Ctrl + Shift + I.
- Als je de shortcut gebruikt, kom je als het goed is gelijk bij de ‘Elements’ terecht. Zo niet, dan klik je op ‘Elements’. Of je klikt op je rechtermuisknop, dan verschijnt er een venstertje en klik je onderaan in dat venstertje op ‘Inspecteren’. Dan zie je ook de ‘Elements’.
- Klik daarna op dit
icoontje (Of Ctrl + Shift + C) in het venster waarin ook de ‘Elements’ staan. - Nu kan je met je muis over bepaalde elementen op de website bewegen en zie je welke HTML tags daarbij horen en hoe het HTML document van de webpagina is opgebouwd.
In de onderstaande video wordt het ook uitgelegd:
HTML attributen
Je weet nu wat HTML tags zijn, maar HTML tags kunnen ook HTML attributen hebben. HTML attributen bevatten extra informatie over een element. De HTML attributen moeten altijd staan in het openingsgedeelte van een HTML tag. Een mooi voorbeeld zie je hieronder:
<img src="Boot.jpg">
Dit is gelijk een speciaal geval. De <img> tag heeft namelijk geen sluitingsgedeelte nodig, zoals je eerder ook al zag. Deze HTML tag kan namelijk geen content bevatten en daarom is voor het gemak alleen gekozen voor een openingsgedeelte. Dit ziet er grammaticaal ook netter uit. src is het attribuut en haalt een foto op, in dit geval een foto van een boot. Hier is een lijst te zien van alle HTML attributen.
Ja, ik wil de beste HTML boeken zien!
Wat is HTML5?
We hebben het tot nu toe alleen maar over HTML gehad, maar heel veel websites tegenwoordig zijn opgemaakt met HTML5. HTML heeft verschillende versies en momenteel is HTML5 de nieuwste versie. HTML5 heeft enkele foutjes verbeterd ten opzichte van vorige versies. Enkele veranderingen van HTML5 ten opzichte van HTML4:
- Heeft nieuwe elementen ontwikkeld, zoals
<header>,<nav>en<article>. - Verbeteringen aangebracht aan Document Object Model, waardoor webpagina’s sneller laden.
- Webapplicaties zijn ook offline te bereiken.
Waarom is HTML eigenlijk ontstaan?
Voor de liefhebbers is het misschien interessant om nog even de geschiedenis in te duiken van HTML. Als je geen interesse hebt, kan je dit stukje gerust overslaan.
HTML is in 1991 ontwikkeld door Tim-Berners Lee. Hij ontwikkelde HTML, omdat hij wetenschappelijke documenten beter bereikbaar wilde maken. De eerste webbrowser, WorldWideWeb, is ook door Tim-Berners-Lee ontwikkeld. Deze webbrowser kon HTML begrijpen en omzetten in een visuele webpagina. Nu is dat een vereiste voor elke webbrowser.
Er was een standaard nodig waardoor iedereen op een gemakkelijke manier documenten op het web met elkaar kon delen. Daarom is HTML makkelijk om te leren, omdat het eenvoudig is opgezet. HTML is uitgegroeid tot een standaard opmaaktaal voor websites.
HTML programmeren: Wat kan je ermee?
Oeps.. Er staat HTML programmeren, maar HTML is toch geen programmeertaal? Hopelijk zag je dit en had je door dat het niet klopte 
. De meeste mensen denken dat je met HTML alleen (statische) websites kan maken, maar tegenwoordig kan je meer doen met HTML! Dit zijn ook mogelijkheden met HTML:
- Met PhoneGap kan je eenvoudige apps maken met HTML. Handig is daarbij om ook CSS en JavaScript te gebruiken.
- Tegenwoordig bestaan er verschillende libraries waarmee je met HTML games kan ontwikkelen. Deze games werken dan in verschillende browsers. Echter is het hierbij ook wel noodzakelijk om CSS en JavaScript erbij te gebruiken, anders wordt het een saaie statische game.
HTML zorgt voor de structuur. CSS zorgt voor de opmaak, zoals de achtergrondkleur of bijvoorbeeld het lettertype. JavaScript zorgt voor interactie, bijvoorbeeld als de gebruiker op een knop drukt dat het dan de huidige datum kan zien.
HTML leren: Wat zijn de beste leermethodes?
HTML leren is niet moeilijk. Het beste is vooral om eenvoudig te beginnen met het opzetten van een website met behulp van een HTML document. Deze website kan je steeds verder uitbreiden. Hierdoor kom je er ook achter wat alle HTML tags en attributen betekenen. Door het voorbeeld hieronder te volgen, maak je al een leuk beginnetje.
Een goede leermethode is ook door middel van goede HTML boeken meer over HTML te leren. Nog een extra tip. Op Pluralsight staan de beste HTML videocursussen voor beginners. Je kan op dit platform ontzettend veel over HTML leren als beginner!
Voorbeeld van hoe je een website maakt met HTML5
We gaan een eenvoudige website maken. De website heeft één hoofdstuk, twee paragrafen en een afbeelding. In dit voorbeeld schrijf ik in twee paragrafen een klein stukje over ProgrammeerPlaats en het logo van ProgrammeerPlaats komt ook in de website te staan. Als je het leuk vindt, kan je ook je eigen teksten maken, in plaats van de teksten die ik maak.
Dit standaard HTML document gaan we gebruiken en verder aanvullen met onze eigen teksten en afbeeldingen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Je kan “Kladblok” gebruiken of een code editor, zoals Notepad++. Voor Mac gebruikers is Atom een hele goede optie. Notepad++ gebruik ik ook in de video onderaan dit artikel, waarin ik laat zien hoe je deze eenvoudige website maakt. Je kan het bovenstaande letterlijk kopiëren en plakken en in je eigen bestand zetten. Het is ook wel handig om even een nieuwe map aan te maken. Hierin kan je het HTML bestand zetten en de afbeelding die je gaat gebruiken op je website. Het HTML document waarin ik kort wat schrijf over ProgrammeerPlaats en een afbeelding plaats, komt er als volgt uit te zien:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ProgrammeerPlaats website</title>
</head>
<body>
<h1>Korte beschrijving over ProgrammeerPlaats</h1>
<p>ProgrammeerPlaats is een leuke website waarop je kan leren programmeren.</p>
<p>Er zijn educatieve artikelen en video's voor de liefhebbers.</p>
<img src="Logo ProgrammeerPlaats.png">
</body>
</html>
Als je wil, kan je dit letterlijk overnemen, of je kan zelf HTML tags en attributen plaatsen in het standaard HTML document, wat je al had gekopieerd en geplakt. Het is belangrijk om het bestand op te slaan als een HTML bestand. De afbeelding moet in dezelfde map staan als het HTML bestand, of je moet de src tag aanpassen. Sowieso moet je de naam van je eigen afbeelding in de src tag zetten, gevolgd door het bestandstype van de afbeelding. In mijn geval is dat “.png”.
Wanneer je klaar bent, kan je het HTML bestand wat je gemaakt hebt openen in een browser. Als het goed is, zie je dan de tekst die je hebt geschreven met de afbeelding erbij. Gaaf hè! Je eigen website maken!
Misschien is het niet helemaal gelukt en is de tekst onduidelijk voor je. Bekijk dan de onderstaande video waarin je alles goed mee kan volgen en het zelf kan toepassen:
Hoe nu verder?
HTML leren is eenvoudig en leuk, zoals je gezien hebt! Lees het artikel “CSS leren” om meer te weten te komen over CSS. Ook staat daar uitgelegd hoe je CSS toevoegt aan de website. Wil je nog dieper in HTML duiken? Dan is het een aanrader om met één of meerdere van de beste HTML boeken aan de slag te gaan. In deze boeken leer je ontzettend veel over HTML.
Pluralsight is een andere grote aanrader. Hier staan de beste videocursussen over HTML, zowel voor de absolute beginners als gevorderden. In “Pluralsight review en ervaringen” lees je meer over het platform. Je kan dit geweldige platform zelfs 10 dagen helemaal gratis uitproberen.
HTML leren is leuk en niet lastig! Ga er lekker mee aan de slag en wordt een expert. Het komt goed van pas als je websites wil maken.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.
Beste Bas,
Ik heb de stappen gevolgd zoals je hebt beschreven in de video.
Echter krijg ik met het openen van mijn bestand een pagina die er precies hetzelfde uitziet als mijn werkbestand op Notepadd ++
Mijn toegevoegde afbeelding en alle attributen lijken niet te verwerken.
Ik kan mijn bestand ook niet in Google Chrome openen, heeft dit er misschien mee te maken? Want buiten dat heb ik het bestand als html opgeslagen met de juiste bewerkingen zoals je hebt omschreven.
Zijn er misschien bepaalde computerinstellingen die ik anders moet zetten?
Ik ben geen kei met computers, vandaar dat ik het hoog tijd vond hier verandering in te brengen.
Heb je misschien wat tips wat hier het probleem zou kunnen zijn?
M.v.g. Fedor
Hoi Fedor,
Zou je mij het HTML bestand kunnen mailen dat je hebt gemaakt? Dan kan ik voor de zekerheid kijken of het daar aan ligt. E-mail: bas.dingemans@programmeerplaats.nl
Gr. Bas
Oplossing:
Het bestand was opgeslagen als “Index html”. Dan is het eigenlijk een bestand zonder bestandstype. Er hoort een punt tussen, dus op deze manier “Index.html”. Zo is het bestand herkenbaar als een HTML bestand.
Dag Bas,
Ik heb de stappen gevolgd en ik zie wel een mooi gedeelte van wat ik heb gemaakt, maar de afbeelding zie ik niet.
Groetjes,
Jesse
Hoi Jesse,
Je kan het HTML bestand en de afbeelding sturen naar: bas.dingemans@programmeerplaats.nl
Dan kan ik zien wat er mis gaat.
Gr. Bas
Contact gehad via de mail.
De afbeelding van Jesse had een .jpeg extensie en in de src tag stond de .jpg extensie.
De afbeelding is in de src tag aangepast naar het juiste bestandstype en toen werkte het prima.
Hallo,
ik wil graag beginnen met HTML 5. Ik heb een macbook versie High Sierra. Ik heb al boeken alleen kan ik nergens vinden waar ik html 5 kan downloaden. Ik neem aan dat het een programma is dat je eerst moet downloaden. Heeft u misschien een link waar ik html 5 kan downloaden?
Met vriendelijke groet,
Nisa
Hoi Nisa,
HTML5 is geen programma, maar een opmaaktaal. Je hoeft dus niks te downloaden. Wel is het handig om een code editor te downloaden waarin je HTML schrijft.
Een goed alternatief voor Notepad++ is Atom voor Mac gebruikers. Probeer eens in Atom de eenvoudige website te maken aan de hand van dit artikel.
Een browser is zo gemaakt dat het HTML5 kan begrijpen. Dus als je HTML schrijft en opslaat in een HTML bestand, dan begrijpt de browser dat en wordt het getoond bij het invoeren van het juiste pad naar het bestand. Let er natuurlijk wel op dat je geen fouten maakt.
Hopelijk geeft dit meer duidelijkheid. Als je nog meer vragen hebt, dan hoor ik het graag!
Gr. Bas
Geachte Bas Dingemans,
Ik heb de stappen gevolgd, in plaats van jouw foto en logo heb ik mijn foto’s geplaats. De html document ziet er verder hetzelfde en goed uit als in het voorbeeld. Maar bij het openen in de browser krijg ik alleen maar weer het html document te zien. Waar zou het aan liggen?
We hebben via de mail contact gehad. Het bestand was opgeslagen als “Index.html.txt”. Op deze manier is het een TXT bestand. Door het bestand op te slaan als “Index.html” is het een HTML bestand en werkt het wel.
Hallo Bas,
Voor het eerst op je website geweest.
Heel interessant.
Ik wil gaan beginnen met een website te maken.
Bedankt.
André
Hoi André,
Hopelijk blijf je terugkomen op ProgrammeerPlaats 😉
Ik raad je aan om de eenvoudige website via dit artikel te maken en daarna verder te gaan met CSS en JavaScript. Je wordt vanzelf doorverwezen.
Op die manier maak je op een makkelijke manier kennis met HTML, CSS en JavaScript. Daarna kan je je kennis vergroten.
Gr. Bas