HTML leren
HTML leren — Een HTML-cursus met een editor met live voorbeeldweergave in je broekzak
HTML leren is een HTML-cursus voor iPhone en Android waarmee je vanuit elke les met één tik toegang hebt tot een HTML-editor met live voorbeeldweergave. Typ een tag, bekijk hoe de pagina wordt weergegeven en ga van je eerste kop naar formulieren, tabellen, semantische HTML5, toegankelijkheid en webcomponenten in 40 korte cursussen.
- Prijs
- Gratis, upgrade naar Pro
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Vereist
- iOS 15.1 of hoger
- App Store
- 3.0 ★ (1)
Een tag krijgt pas echt betekenis als je hebt gezien hoe die iets tekent.
HTML is een opmaaktaal. De snelste manier om een nieuw element te begrijpen, is daarom om het te typen en naar het resultaat te kijken. Elke les in deze app eindigt met de editor al geopend, met de voorbeeldweergave naast je opmaak. CSS- of JavaScript-bestanden voeg je pas toe wanneer je eraan toe bent.
Wat het is
HTML leren is een gratis HTML-cursus voor iOS en Android waarmee je meteen kunt beginnen. Je leert webpagina-opmaak in 40 cursussen en 159 korte lessen, opgebouwd van beginner (A1) tot gevorderd (C1). Elk onderwerp wordt gecombineerd met een ingebouwde HTML-code-editor en directe voorbeeldweergave, 20 begeleide projecten zoals een contactformulier en een toegankelijke prijzentabel, 20 debugmissies en een AI-mentor. Zo kan een complete beginner van een leeg document doorgroeien naar semantische, toegankelijke en goed gestructureerde pagina's.
In de app
Hoe het eruitziet
De cursus
Wat de HTML-cursus behandelt
40 cursussen en 159 lessen uit de eigen cursuslijst van de app, in de volgorde waarin het leerpad ze behandelt.
Documentstructuur, tekst, links, afbeeldingen en lijsten
Het skelet van elke pagina: de documentstructuur, koppen en alinea's, links en navigatie, afbeeldingen en figuren, en geordende en ongeordende lijsten.
Tabellen, attributen en globale attributen
Gegevens in tabellen indelen en daarna de attributen die een element verfijnen, waaronder de globale attributen die op elke tag werken.
Formulieren: basis, geavanceerde besturingselementen en validatie
Eerst de basisinvoervelden, daarna de uitgebreidere besturingselementen en vervolgens de validatie-attributen waarmee de browser een veld kan controleren voordat het wordt verzonden.
Semantische HTML5, head en metadata, audio en video
Semantische elementen, de head van het document en de metadata ervan, en de audio- en video-elementen.
Toegankelijkheid, ARIA-rollen en geavanceerde ARIA-patronen
De basis van toegankelijkheid, ARIA-rollen en -attributen, en de geavanceerde patronen voor aangepaste widgets.
Data-attributen, templates, canvas, SVG en iframes
Aangepaste data-attributen, HTML-templates, het canvas-element, SVG in HTML en ingesloten content in iframes.
Webopslag, slepen en neerzetten, SEO en e-mailtemplates
Webopslag en de drag-and-drop-API, SEO en socialemeta-tags, en de specifieke regels voor HTML-e-mailtemplates.
Web Components, performance en HTML op schaal
Aangepaste elementen, de shadow DOM, import maps en progressive enhancement, plus performance, beveiliging, PWA's en testen, met als afsluiting HTML op schaal.
Hoe het werkt
Zo leer je een tag, van lezen tot weergeven
Een les is kort en de editor staat ernaast, zodat je een concept lezen en het meteen uitproberen in dezelfde sessie doet.
Lees één korte les
Ga verder waar je op het leerpad bent gestopt. Elke les behandelt één idee, zoals een ongeordende lijst of een afbeelding met alt-tekst, en duurt maar een paar minuten.
Typ het in de editor en bekijk de voorbeeldweergave
Open de editor en schrijf de opmaak. De voorbeeldweergave tekent je pagina opnieuw, en de tabbladen voor CSS en JavaScript staan klaar wanneer je de pagina wilt opmaken of interactief wilt maken.
Controleer, verbeter en bouw ermee
Elk onderwerp wordt afgesloten met een quiz en een programmeeruitdaging. Als een tag of fout onduidelijk is, legt de AI-mentor het uit. Een debugmissie geeft je een kapotte pagina om te repareren en met een begeleid project bouw je iets dat je kunt laten zien.
Wat erin zit
Wat Learn HTML bevat
40
Cursussen van A1 tot C1
De 159 lessen lopen van documentstructuur, tekst, links, afbeeldingen en lijsten via tabellen en formulieren naar semantische HTML5, toegankelijkheid, webcomponenten, beveiliging en de History and Navigation API.
Live
HTML-editor met voorbeeldweergave
Schrijf opmaak en zie hoe de weergegeven pagina wordt bijgewerkt. Je kunt CSS- en JavaScript-bestanden aan hetzelfde project toevoegen, zodat een eenvoudig document verandert in een kleine werkende website.
20
Begeleide projecten
Stapsgewijze projecten, waaronder een pagina met een receptenbox, een contactformulier, een fotogalerij, een navigatiebalk en een toegankelijke prijzentabel.
20
Debugmissies
Echte problemen om op te lossen: een registratieformulier dat niets verstuurt, een label waarop niemand kan tikken en een pagina die op een telefoon uitgezoomd wordt geladen.
80
Tag-spiekbrief
Een opzoeklijst met 80 HTML-tags, elementen en attributen voor momenten waarop je weet wat je wilt gebruiken, maar niet hoe het heet.
50
Sollicitatievragen
Vijftig sollicitatievragen voor webontwikkelaars met duidelijke antwoorden, plus een codebibliotheek met korte voorbeelden die je kunt openen en bewerken en een plek om je eigen code en notities op te slaan.
Achtergrond
Wat is HTML en kun je het leren door op een telefoon te typen?
HTML (HyperText Markup Language) is de taal die de structuur van een webpagina beschrijft: welke tekst een kop is, welke tekst een alinea vormt, waar een link naartoe verwijst en waar een formulier om vraagt. Het is geen programmeertaal, dus je hoeft niet te worstelen met lussen of variabelen. Daarom is het meestal de eerste stap in webontwikkeling. Omdat het resultaat zichtbaar is zodra je iets schrijft, is HTML heel geschikt voor korte sessies op je telefoon: een tag is klein genoeg om met je duim te typen en een voorbeeldweergave laat meteen zien of het werkt.
Elementen, tags en attributende drie woorden die in elke les terugkomen
Een element is een stukje inhoud met een betekenis, geschreven tussen een openingstag en een sluittag, bijvoorbeeld een alinea of een lijstitem. Attributen staan in de openingstag en passen het element aan, zoals het adres waarnaar een link verwijst of de tekst die een afbeelding beschrijft. Bij vrijwel elke beginnersfout ontbreekt er een sluittag of staat er een attribuut op de verkeerde plek.
Semantische HTMLkoppen, navigatie, hoofdgedeelte en voettekst
Semantische elementen geven aan wat een blok van de pagina is, in plaats van hoe het eruitziet. Een navigatiebalk, een artikel en een voettekst hebben elk hun eigen element. Dat helpt schermlezers, zoekmachines en iedereen die de pagina later moet bewerken. Het is de gewoonte die een nette pagina onderscheidt van een stapel algemene containers.
HTML, CSS en JavaScriptwie wat doet
HTML bevat de structuur en inhoud, CSS bepaalt hoe die inhoud eruitziet en JavaScript voegt gedrag toe, zoals reageren op een klik. Als je eerst HTML leert, hebben de andere twee iets om zich aan vast te maken. De editor in de app heeft aparte tabbladen voor HTML, CSS en JavaScript, zodat je de drie taken vanaf het begin gescheiden houdt.
Formulieren en toegankelijkheidwaar eenvoudige pagina's serieus worden
Formulieren zijn de manier waarop een pagina de bezoeker om iets vraagt. Hier beginnen ook de meeste toegankelijkheidsproblemen: een label waarop niemand kan tikken of een veld dat een schermlezer geen naam kan geven. Labels, validatieattributen en ARIA-rollen zijn kleine stukjes opmaak die bepalen of een pagina voor iedereen werkt.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Schrijf je je eerste webpagina en wil je dat elke tag wordt uitgelegd voordat je die gebruikt
- Leer je het beste wanneer je meteen het resultaat van elke regel kunt zien
- Beheer je een blog, een winkelpagina of een portfolio en wil je de onderliggende markup bewerken
- Wil je daarna doorgaan met CSS, JavaScript of front-endontwikkeling en eerst een stevige basis leggen
- Bereid je je voor op een sollicitatiegesprek voor webdeveloper en wil je vragen oefenen
Niet het juiste hulpmiddel als je
- Heb je een volledige desktopworkflow met bestanden, mappen en een lokale server nodig
- Verwacht je dat elke cursus gratis is; de eerste cursus, het eerste begeleide project en twee missies zijn gratis, Pro ontgrendelt de rest
- Schrijf je al dagelijks HTML voor productie en wil je eerder een naslagwerk dan een cursus
- Wil je een designtool leren; dit gaat over markup en de code achter pagina's
Vragen
Veelgestelde vragen
Wat is HTML leren?
HTML leren is een app voor iPhone en Android die HTML onderwijst, van de eerste tag tot geavanceerde onderwerpen. De app combineert 40 korte cursussen met een ingebouwde HTML-editor en live preview, 20 begeleide projecten, 20 debugmissies en een AI-mentor. Je kunt gratis beginnen en de app is beschikbaar in 22 talen.
Kan ik echt HTML schrijven en een preview bekijken op een telefoon?
Ja. De editor in HTML leren heeft tabbladen voor HTML, CSS en JavaScript, en de preview toont de pagina die je markup oplevert. Een telefoon is prettig voor de gerichte oefening die HTML vereist, omdat tags kort zijn. Een groter scherm wordt pas handig wanneer je meerdere bestanden tegelijk beheert.
Heb ik programmeerervaring nodig voordat ik begin?
Nee. Het leerpad begint met de opbouw van een HTML-document en legt elke term in duidelijke taal uit voordat die wordt gebruikt. HTML heeft geen loops of variabelen die je eerst moet leren, dus HTML leren gaat ervan uit dat je een complete beginner bent, niet dat je een uitzondering vormt.
Wat is het verschil tussen HTML en CSS?
HTML bepaalt wat er op de pagina staat en wat elk onderdeel betekent, zoals een kop, een link of een formulierveld. CSS bepaalt hoe het eruitziet, inclusief kleuren, ruimte en lay-out. De app leert je eerst HTML en laat je CSS-bestanden toevoegen in de editor, zodat je kunt zien hoe beide samenwerken zonder hun functies te vermengen.
Hoe lang duurt het om de basis van HTML te leren?
De meeste mensen kunnen na een handvol korte sessies een eenvoudige, correcte pagina schrijven, omdat de belangrijkste elementen beperkt zijn: koppen, alinea's, links, afbeeldingen, lijsten en basisformulieren. Diepere onderwerpen zoals toegankelijkheid, semantische structuur en web components kosten meer tijd. De lessen hier zijn zo geschreven dat je ze in enkele minuten kunt afronden, waardoor een dagelijkse gewoonte haalbaar is.
Welke soorten projecten kan ik in de app bouwen?
De 20 begeleide projecten omvatten een receptpagina, een contactformulier, een fotogalerij, een navigatiebalk en een toegankelijke prijstabel. Elk project bouw je stap voor stap. Ze zijn bewust klein gehouden, zodat je ze afrondt en de code bewaart in je opgeslagen snippets.
Behandelt Learn HTML toegankelijkheid en formulieren?
Ja, en behoorlijk uitgebreid. Formulieren hebben drie cursussen over de basis, geavanceerde besturingselementen en validatie-attributen. Toegankelijkheid heeft eigen cursussen over de basis, ARIA-rollen en geavanceerde ARIA-patronen. De debugmissies bevatten ook problemen zoals een label waarop niemand kan tikken, waardoor deze onderwerpen praktisch in plaats van abstract worden.
Is de app gratis en wat voegt Pro toe?
Je kunt de app gratis downloaden en meteen beginnen: de eerste cursus, het eerste begeleide project, twee missies en de live editor zijn inbegrepen, samen met een dagelijks tegoed voor de AI-mentor. Pro ontgrendelt alle cursussen, projecten en missies, het certificaatexamen en onbeperkte vragen aan de AI-mentor, en verwijdert advertenties.
Aan de slag
Typ je eerste tag en zie hoe die wordt weergegeven
Gratis te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.