HTML en CSS leren

Elke webpagina bestaat uit twee lagen: HTML zegt wát er staat (een kop, een lijst, een link) en CSS zegt hoe het eruitziet (kleur, afstand, lettertype). Wie die twee begrijpt, begrijpt het web.

HTML: de bouwstenen

HTML werkt met tags: <h1>Welkom</h1> is een kop, <p> een alinea, <ul> met <li> een lijst, <a href="…"> een link. Bijna elke tag gaat open en dicht; wat ertussen staat, hoort erbij. Een tabel heeft rijen (<tr>) met cellen (<td>), en een knop is <button>. Dat is de kern; de rest zijn variaties.

CSS: de opmaak

CSS koppelt regels aan selectors: h1 { color: red; } maakt alle koppen rood, .kaart { border: 2px solid; padding: 16px; } geeft elk element met de class "kaart" een rand en ruimte. Zo blijft de inhoud gescheiden van het uiterlijk: één regel CSS verandert honderd pagina's tegelijk.

Zo oefent je kind in Progio

Op planeet Progio zijn drie levels webpagina's: de eerste pagina van de kolonie (kop, alinea, lijst, link), de opmaak (kleur, achtergrond, border, padding) en een dashboard met een tabel en knop. Twee editors (HTML en CSS), een voorvertoning die live meeverandert en een lijst controles die groen worden: "een lijst met minstens 3 items", "h1 krijgt de kleur red".

Veilig

De code van de speler wordt nooit uitgevoerd op de pagina van Progio. De HTML wordt gelezen en gecontroleerd, en de voorvertoning staat in een afgeschermd kader (een iframe met een lege sandbox) waaruit scripts zijn verwijderd. Zo kan een tikfout of een grap nooit iets kapotmaken.

Verder

Wie HTML en CSS kent, wil knoppen laten werken: dat is JavaScript. En wie het echt te pakken heeft, bouwt daarna een eigen site met een gratis hostingdienst. Progio legt de basis en zorgt dat de begrippen kloppen. Zie ook algoritme voor het denkwerk achter elke pagina.