De broncode van een website bekijken is heel simpel, maar je moet maar net even weten hoe het moet. Het kan heel handig zijn om door de broncode van een website te neuzen. We gaan kijken hoe je dat doet in de 4 meest gebruikte browsers in Nederland, namelijk Google Chrome, Safari, Firefox en Microsoft Edge. De instructies zijn voor Windows en Mac gebruikers. Tot slot geven we tips over hoe je zelf (eenvoudig) een website kan leren maken. Lees lekker verder!
Waarom zou je de broncode van een website willen bekijken?
Om meerdere redenen kan het handig zijn om de broncode van een website te bekijken. Ten eerste kan het erg handig zijn om SEO (Search Engine Optimization) elementen te inspecteren.
Bij websites die hoog scoren in Google ben je natuurlijk nieuwsgierig hoe ze SEO elementen toepassen in de broncode. Je zou bijvoorbeeld kunnen kijken naar de <title>, <meta name="description"/> en <H1> tags om te achterhalen hoe ze die invullen en welke zoekwoorden ze daarin gebruiken.
Ten tweede is het erg handig om naar de broncode van een website te kijken om erachter te komen hoe de website in elkaar zit. Aan de HTML code kan je de opmaak van de website zien.
Vaak zie je ook CSS en JavaScript code of een doorverwijzing naar CSS en JavaSript bestanden. CSS zorgt voor de presentatie van de HTML elementen, dus hoe de elementen worden weergegeven op het scherm.
JavaScript maakt een website dynamisch. In “HTML leren”, “CSS leren” en “JavaScript leren” lees je meer over HTML, CSS en JavaScript en hoe je het leert.
Uitleg voor Google Chrome, Firefox en Microsoft Edge
Om de broncode van websites te bekijken in Google Chrome, Firefox en Microsoft Edge kan je in alle 3 de browsers dezelfde handeling uitvoeren. Houd Ctrl ingedrukt en klik op U (Ctrl + U) en je ziet de broncode van de website. Dit is geschikt voor een Windows computer.
Voor een Mac computer druk je op Option + Command + U in Google Chrome en Microsoft Edge. In Firefox druk je op Command + U.
Bij Google Chrome, Firefox en Microsoft Edge is het ook mogelijk om “view-source:” voor de URL te zetten. Bijvoorbeeld in het geval van de homepage van ProgrammeerPlaats ziet dat er zo uit (view-source:https://programmeerplaats.nl/):
Op deze manier kan je dus ook de broncode van de website bekijken. Het gaat dan om de broncode van de desbetreffende webpagina. Per webpagina kan je één van deze twee handelingen gebruiken om de broncode te bekijken.
Druk op Ctrl + F om naar onderdelen in de broncode te zoeken. Dit werkt hetzelfde als dat je zoekt naar bepaalde woorden op een website.
Is de HTML, CSS en/of JavaScript code niet goed geformatteerd en daardoor (erg) moeilijk leesbaar? Gebruik dan de webformatter om de code leesbaar te maken.
Uitleg voor Safari
De broncode van een website bekijken in Safari op een Mac computer is ook erg eenvoudig. Klik op Option + Command + U en de broncode van de website komt tevoorschijn.
Officieel is Safari niet beschikbaar voor een Windows computer.
Zelf (eenvoudig) een website maken
Je weet nu hoe je de broncode van een website kan bekijken in meerdere browsers en zowel op Windows als Mac computers. Lijkt het je gaaf om zelf een (mooie) website te maken? Dat is zeker mogelijk en het hoeft helemaal niet lastig te zijn.
In “HTML leren”, “CSS leren” en “JavaScript leren” ga je een eenvoudige website opzetten en geven we tips om verder te leren. Voor de back-end (Achterkant van de website) is “PHP leren” interessant om te lezen. Deze talen worden vaak gebruikt bij het maken van een website.
Wil je toch minder de code induiken en nog eenvoudiger een website maken? Dan is het artikel “WordPress website maken” echt wat voor jou! Hier leer je om met WordPress binnen een uur al een strakke website op te zetten.
Het is sowieso handig om (basis)kennis te hebben van HTML, CSS, JavaScript en PHP, zodat je nog gedetailleerder aan je website kan sleutelen.
Hopelijk heb je wat aan dit artikel gehad en ga je de broncode van websites bekijken. Je zal hier veel van leren!
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.