Waar staat HTML voor?

HTML staat voor Hyper Text Markup Language, Een programmeertaal die wordt gebruikt voor het schrijven van webpagina's. Hoewel HTML ook deels de vormgeving en styling kan verzorgen, doen we dit meestal met een andere taal: CSS (Cascading Style Sheet).

De opbouw van een HTML pagina

Een HTML pagina is relatief gezien op een makkelijke, simpele manier opgebouwd. Een HTML pagina begint met een DOCTYPE-declaratie. Deze declaratie laat de browser zien welke standaarden moeten worden ingeladen. Vervolgens krijg je de tag die het HTML document opent, gevolgd door de “head” tag. Binnen deze “head” tag geven we onder andere de titel en de links van de stylesheets door. Vlak onder de “head” komt de “body”. Binnen de “body” komt de gehele opbouw en inhoud van de pagina.
Voorbeeld van de opbouw van een HTML pagina
Html code

Een website bestaat meestal uit HTML, CSS en Javascript. Dit zijn 3 populaire front-end languages. Via Html maakt men de structuur van de website op (Teksten, afbeeldingen, links en dergelijke). Via CSS geeft men de HTML elementen vorm. (kleuren aanpassen, grootte van afbeeldingen, font-size, achtergrond afbeeldingen en dergelijke). JavaScript is een veelgebruikte scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen. Een voorbeeld hiervan is een pop-up scherm van een nieuwsbrief. Het script wordt door middel van HTML overgebracht in de webbrowser en wordt hierin uitgevoerd.

Broncode van een website bekijken

De meeste browsers maken het zeer eenvoudig om de broncode van eender welke website te bekijken en te analyseren. Wil je zelf de broncode (HTML) bekijken van een website die jij interessant vindt? Volg dan volgende stappen.
1. Klik met de rechtermuisknop ergens op de pagina
2. Je ziet nu een pop-up met verschillende opties (zie afbeelding)
pop-up screen browser
3. Selecteer 'Paginabron weergeven' en klik erop.
4. Voila, je ziet nu de broncode (HTML) van de desbetreffende pagina. (zie afbeelding)
Html code in browser

Welke teksteditor gebruik ik best?

Voor het schrijven van code is een HTML/CSS editor niet langer een overbodige luxe, maar een betrouwbare tool om je workflow te optimaliseren. Net zoals elke andere vakman heeft ook een front-end ontwikkelaar een uitgebreide set aan tools ter beschikking. Gaande van basis functionaliteiten als Color Coding of IntelliSense, tot de implementatie van geavanceerde bibliotheken. Allen gemaakt om ons het leven makkelijker te maken, maar welke zijn op dit moment de meest gangbare keuzes?

1. Sublime text

Sublime text code editor
Sublime text is een moderne code editor met een cleane interface, een groot aantal functionaliteiten en een enorme add-on bibliotheek. Deze software kent zijn oorsprong exclusief op Mac, maar is ondertussen ook al een tijdje verkrijgbaar voor Linux en Windows. Sublime Text is betalend, maar heeft een gratis evaluatie versie.
Download Sublime text

2. Brackets

Brackets code editor
Brackets is de nieuwste speler van deze drie en wordt ontwikkeld door Adobe. Deze gratis tekst bewerker heeft gelijkaardige functionaliteiten, maar kan daarboven profiteren van een integratie met andere Adobe software. Zo is het mogelijk om Photoshop bestanden rechtstreeks te importeren en om te zetten naar CSS. Ook de community wint stilaan aan populariteit, waardoor de kwaliteit en hoeveelheid van plugins snel toenemen.
Download Brackets

3. Atom

Atom code editor
Atom is een gratis en open source text editor Mac, geschreven in Node.js en ingebouwd in GitControl. Je kunt het gebruiken als plain text editor Mac, of een source code editor. Door middel van plugins ondersteunt deze app verschillende talen zoals HTML, CSS, C/C++, Objective-C, Java, Go, C#, JavaScript, Python, PHP, Perl, XML, Mustache, Clojure, Ruby, en nog veel meer, waarmee het een handige tool is voor de moderne ontwikkelaar.
Download Atom

Hoe leer ik HTML?

Het leren van HTML, CSS en andere programmeertalen ziet er op het begin vaak moeilijk uit. Wanneer je beetje bij beetje meer leert van deze talen merk je vanzelf dat het zo moeilijk nog niet is. Het is van belang om niet te snel op te geven en vooral dingen uit te testen. Hieronder volgt een lijst met de beste websites en bronnen die je helpen met het leren van de basis van HTML en CSS.

1. Treehouse

Treehouse is een uitstekende website om jouw codering skills uit te breiden. Van HTML, CSS en Javascript tot PHP, Python en NodeJS. Uitstekend om als beginner of expert jouw skills bij te werken.

Let op: Treehouse werkt met een maandelijks of jaarlijks lidmaatschap. (1ste week kan je gratis uitproberen)

Teamtreehouse dashboard
Bekijk Treehouse hier

2. Codecademy

Codecademy is een uitstekende website om jouw codering skills uit te breiden. Van HTML, CSS en Javascript tot PHP, Python en NodeJS. Uitstekend om als beginner of expert jouw skills bij te werken.

Let op: Codecademy werkt met een maandelijks of jaarlijks lidmaatschap. (1ste week kan je gratis uitproberen)

Codecademy dashboard
Bekijk Codecademy hier

3. Youtube

Via Youtube kan je eenvoudig duizenden videos vinden over HTML en dat zonder één cent te betalen. Geef de zoekterm 'HTML' in en er komt een selectie van videos tevoorschijn.
Youtube dashboard
Bekijk Youtube hier

4. Boek HTML en CSS voor DUMMIES

Ben je serieus over coderen, dan raden we je aan om een boek over HTML (bv. HTML en CSS voor DUMMIES) in huis te halen.
HTML for dummies boek

Advertentie

Waar staat HTML voor?

HTML staat voor Hyper Text Markup Language, Een programmeertaal die wordt gebruikt voor het schrijven van webpagina's. Hoewel HTML ook deels de vormgeving en styling kan verzorgen, doen we dit meestal met een andere taal: CSS (Cascading Style Sheet).

De opbouw van een HTML pagina

Een HTML pagina is relatief gezien op een makkelijke, simpele manier opgebouwd. Een HTML pagina begint met een DOCTYPE-declaratie. Deze declaratie laat de browser zien welke standaarden moeten worden ingeladen. Vervolgens krijg je de tag die het HTML document opent, gevolgd door de “head” tag. Binnen deze “head” tag geven we onder andere de titel en de links van de stylesheets door. Vlak onder de “head” komt de “body”. Binnen de “body” komt de gehele opbouw en inhoud van de pagina.
Voorbeeld van de opbouw van een HTML pagina
Html code

Een website bestaat meestal uit HTML, CSS en Javascript. Dit zijn 3 populaire front-end languages. Via Html maakt men de structuur van de website op (Teksten, afbeeldingen, links en dergelijke). Via CSS geeft men de HTML elementen vorm. (kleuren aanpassen, grootte van afbeeldingen, font-size, achtergrond afbeeldingen en dergelijke). JavaScript is een veelgebruikte scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen. Een voorbeeld hiervan is een pop-up scherm van een nieuwsbrief. Het script wordt door middel van HTML overgebracht in de webbrowser en wordt hierin uitgevoerd.

Broncode van een website bekijken

De meeste browsers maken het zeer eenvoudig om de broncode van eender welke website te bekijken en te analyseren. Wil je zelf de broncode (HTML) bekijken van een website die jij interessant vindt? Volg dan volgende stappen.
1. Klik met de rechtermuisknop ergens op de pagina
2. Je ziet nu een pop-up met verschillende opties (zie afbeelding)
pop-up screen browser
3. Selecteer 'Paginabron weergeven' en klik erop.
4. Voila, je ziet nu de broncode (HTML) van de desbetreffende pagina. (zie afbeelding)
Html code in browser

Welke teksteditor gebruik ik best?

Voor het schrijven van code is een HTML/CSS editor niet langer een overbodige luxe, maar een betrouwbare tool om je workflow te optimaliseren. Net zoals elke andere vakman heeft ook een front-end ontwikkelaar een uitgebreide set aan tools ter beschikking. Gaande van basis functionaliteiten als Color Coding of IntelliSense, tot de implementatie van geavanceerde bibliotheken. Allen gemaakt om ons het leven makkelijker te maken, maar welke zijn op dit moment de meest gangbare keuzes?

1. Sublime text

Sublime text code editor
Sublime text is een moderne code editor met een cleane interface, een groot aantal functionaliteiten en een enorme add-on bibliotheek. Deze software kent zijn oorsprong exclusief op Mac, maar is ondertussen ook al een tijdje verkrijgbaar voor Linux en Windows. Sublime Text is betalend, maar heeft een gratis evaluatie versie.
Download Sublime text

2. Brackets

Brackets code editor
Brackets is de nieuwste speler van deze drie en wordt ontwikkeld door Adobe. Deze gratis tekst bewerker heeft gelijkaardige functionaliteiten, maar kan daarboven profiteren van een integratie met andere Adobe software. Zo is het mogelijk om Photoshop bestanden rechtstreeks te importeren en om te zetten naar CSS. Ook de community wint stilaan aan populariteit, waardoor de kwaliteit en hoeveelheid van plugins snel toenemen.
Download Brackets

3. Atom

Atom code editor
Atom is een gratis en open source text editor Mac, geschreven in Node.js en ingebouwd in GitControl. Je kunt het gebruiken als plain text editor Mac, of een source code editor. Door middel van plugins ondersteunt deze app verschillende talen zoals HTML, CSS, C/C++, Objective-C, Java, Go, C#, JavaScript, Python, PHP, Perl, XML, Mustache, Clojure, Ruby, en nog veel meer, waarmee het een handige tool is voor de moderne ontwikkelaar.
Download Atom

Hoe leer ik HTML?

Het leren van HTML, CSS en andere programmeertalen ziet er op het begin vaak moeilijk uit. Wanneer je beetje bij beetje meer leert van deze talen merk je vanzelf dat het zo moeilijk nog niet is. Het is van belang om niet te snel op te geven en vooral dingen uit te testen. Hieronder volgt een lijst met de beste websites en bronnen die je helpen met het leren van de basis van HTML en CSS.

1. Treehouse

Treehouse is een uitstekende website om jouw codering skills uit te breiden. Van HTML, CSS en Javascript tot PHP, Python en NodeJS. Uitstekend om als beginner of expert jouw skills bij te werken.

Let op: Treehouse werkt met een maandelijks of jaarlijks lidmaatschap. (1ste week kan je gratis uitproberen)

Teamtreehouse dashboard
Bekijk Treehouse hier

2. Codecademy

Codecademy is een uitstekende website om jouw codering skills uit te breiden. Van HTML, CSS en Javascript tot PHP, Python en NodeJS. Uitstekend om als beginner of expert jouw skills bij te werken.

Let op: Codecademy werkt met een maandelijks of jaarlijks lidmaatschap. (1ste week kan je gratis uitproberen)

Codecademy dashboard
Bekijk Codecademy hier

3. Youtube

Via Youtube kan je eenvoudig duizenden videos vinden over HTML en dat zonder één cent te betalen. Geef de zoekterm 'HTML' in en er komt een selectie van videos tevoorschijn.
Youtube dashboard
Bekijk Youtube hier

4. Boek HTML en CSS voor DUMMIES

Ben je serieus over coderen, dan raden we je aan om een boek over HTML (bv. HTML en CSS voor DUMMIES) in huis te halen.
HTML for dummies boek

Wat betekent HTML?

HTML is de afkorting van Hyper Text Markup Language. Het is de taal waarmee websites worden weergegeven.

Wat is HTML en hoe werkt het?

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.

Broncode van een website bekijken

De meeste browsers maken het zeer eenvoudig om de broncode van eender welke website te bekijken en te analyseren. Wil je zelf de broncode (HTML) bekijken van een website die jij interessant vindt? Volg dan volgende stappen.
1. Klik met de rechtermuisknop eender waar op de pagina
2. Je ziet nu een pop-up met verschillende opties (zie afbeelding)
pop-up screen browser
3. Selecteer 'Paginabron weergeven' en klik erop.
4. Voila, je ziet nu de broncode (HTML) van de desbetreffende pagina. (zie afbeelding)
Html code in browser

Onze andere blog artikelen al gelezen?

Image

Wat is Google Analytics?

Google Analytics is een gratis tool van Google waarmee je een hoop gegevens kan verzamelen over je websitebezoekers. Deze tool zou op elke...
Lees meer
Image

Wat is een goede website?

Je website mag dan nog zo mooi en goed zijn, als hij niet gevonden wordt, heeft hij geen waarde. Dus vindbaarheid is een cruciale vereiste...
Lees meer

Onze andere blog artikelen al gelezen?

Image

Wat is Google Analytics?

Google Analytics is een gratis tool van Google waarmee je een hoop gegevens kan verzamelen over je websitebezoekers. Deze tool zou op elke...
Lees meer
Image

Wat is een goede website?

Je website mag dan nog zo mooi en goed zijn, als hij niet gevonden wordt, heeft hij geen waarde. Dus vindbaarheid is een cruciale vereiste...
Lees meer