Labo 01 – HTML

foto scherm met HTML code op

Doelstellingen

  • Zet de basisstructuur van een HTML-pagina op, inclusief vereiste elementen in de <head> en <body>.
  • Gebruik semantische HTML-tags zoals <header>, <main>, <footer>, <nav>, <section>, <ul> en <li>.
  • Maak een navigatiestructuur met relatieve paden tussen pagina’s.
  • Valideer regelmatig met de W3C-validator en aXe DevTools om fouten en toegankelijkheidsproblemen te detecteren.
  • Organiseer je project logisch, zonder hoofdletters of spaties in bestands- en mapnamen.
  • Voeg relevante metadata toe in de <head>, inclusief paginatitel en taalinstellingen (nl/en).
  • Voeg afbeeldingen toe met correcte bestandsstructuren en relatieve paden.
  • Gebruik altijd een <h1> binnen het <main>-element.
  • Publiceer correct op een server; zorg dat alle links werken en de pagina via de opgegeven URL toegankelijk is.
  • Rond op tijd af en publiceer voor de deadline.

Ga naar de oplossing

Omschrijving

Je bouwt een kleine website volgens de projectstructuur: een homepagina, een projects-pagina en een map met afbeeldingen. Je gebruikt enkel HTML en semantische tags om structuur te geven. De navigatie bevat twee links (home en projecten) met relatieve paden, en elke pagina heeft correcte metadata, taalinstellingen en een <h1> in <main>.

Volg de screenshots (home.png en projects.png), voeg eigen afbeeldingen toe in ./images/, en valideer elke pagina met de W3C-validator en aXe DevTools.

Gerelateerde links

Reflectie

Wat ging goed?

Wat was moeilijk?

Twijfels / niet zeker?