HTML voor beginners

Enkele dagen geleden gaf ik een les "HTML voor beginners" voor de jongeren van Wannadigitize. Ik zag enkele enthousiaste en gemotiveerde jonge mensen hun eerste stapjes zetten in de wereld van het webdevelopment, een hele leuke ervaring!

Na de les had ik beloofd mijn materiaal online te zetten, zodat iedereen thuis alles rustig nog eens kan bekijken of verder kan bouwen aan zijn of haar website. Jullie kunnen op deze pagina dus alles terugvinden.

Lesmateriaal

Om mijn uitleg wat kracht bij te zetten had ik een korte presentatie gemaakt met een theorethische inleiding over wat HTML precies is.

Nadien zijn we dan zelf aan de slag gegaan en hebben we stap voor stap enkele webpagina's opgebouwd met eenvoudige HTML-elementen.

Zo zag het eindresultaat er uit (enkel HTML, nog geen CSS gebruikt):

De HTML-code die we samen hebben geschreven:

<!doctype html>
<html>
    <head>
        <title>Rode Duivels</title>
    </head>
    <body>
        <h1>De Rode duivels</h1>

        <h2>Spelers</h2>
        <p>Dit zijn alle spelers <br> van de Rode Duivels</p>
        <img src="rodeduivels.jpg" height="200" alt="groepsfoto"/>
        <ol>
            <li>Thibault Courtois</li>
            <li><em>Romelu Lukaku</em></li>
            <li>Vincent Kompany</li>
            <li><strong><a href="dembele.html">Moussa Dembele</a></strong></li>
        </ol>
        
        <h2>De trainers</h2>
        <ul>
            <li>Roberto Martinez</li>
            <li>Thierry Henry</li>
        </ul>

       <h2>Het adres van de Rode Duivels</h2>
       <p>Rode Duivels<br>
        Koning Boudewijstadion 1 <br>
        1000 Brussel</p>
    </body>
</html>

Je kan alle code (met een extra pagina en de foto's) hier ook downloaden, zo kan je zelf verderwerken aan je eerste website.

Programma's (editors) om HTML mee te schrijven

Tijdens de les hebben we notepad gebruikt om onze code in te bewerken, maar er zijn nog heel wat andere goede programma's om mee aan de slag te gaan. Deze zijn gratis en kan je eenvoudig downloaden en installeren:

Online oefenen

Heb je de smaak te pakken en wil je nog meer bijleren? Check dan zeker onderstaande websites even, daarmee kan je onmiddelijk aan de slag:

Up next: CSS

Binnenkort gaan we verder met een inleiding in CSS, zodat we onze website ook wat layout kunnen meegeven.

Ben je tussen de 15 en 29 jaar oud en wil je graag meer weten over hoe je zelf websites kan bouwen? Geef me een seintje of check de Facebookpagina van Wannadigitize!

Ben ik iets vergeten of is het je toch nog niet helemaal duidelijk? Laat gerust een berichtje achter hieronder, ik help je graag verder! :)