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).
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.
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.
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.
3. Selecteer 'Paginabron weergeven' en klik erop.
4. Voila, je ziet nu de broncode (HTML) van de desbetreffende pagina. (zie afbeelding)
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?
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.
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.
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.
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.
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)
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)
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.
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.
