Web Fundamentals

Weergave

Introductie ​

Vorige week heb je een website leren maken met meerdere pagina's die werkt. Deze week maak je een pagina's die ook iets betekenen, met elementen die zeggen wat de inhoud is (💡semantisch ).

Dat is het verschil tussen een document dat er toevallig goed uitziet en een document dat een zoekmachine, een schermlezer en genAI kunnen lezen.

Lesdoelen ​

De codes verwijzen naar het MDN Curriculum voor junior webdevelopers, het overzicht dat we gebruiken om de inhoud van dit vak af te toetsen.

Na deze les kan je:

  • uitleggen dat een tag betekenis draagt, en wat schermlezers en zoekmachines daarmee doen CORE_2.2 CORE_7.1
  • het verschil uitleggen tussen generic elements (div, span) en semantic elements CORE_2.2
  • bij een stuk inhoud het element kiezen dat die inhoud het best beschrijft CORE_2.2
  • de landmark regions van een pagina benoemen en gebruiken: header, nav, main, footer CORE_2.2 CORE_7.1
  • controleren dat alle inhoud van je pagina binnen een landmark region staat CORE_7.1
  • de heading map van een pagina uitschrijven en er de fouten in aanduiden CORE_2.2
  • uitleggen waarom de volgorde van je elementen in het document belangrijk is CORE_2.2
  • een verzameling dingen markeren als een lijst met ul, ol en li, ook als ze er niet uitziet als een lijst CORE_2.3
  • het verschil uitleggen tussen een block-level en een inline element, en weten wat daaruit volgt voor nesting CORE_2.1
  • van een element opzoeken of het block-level of inline is G_1.3
  • class en id gebruiken, en uitleggen waarin ze verschillen CORE_2.1
  • je pagina valideren met de W3C-validator en de fouten oplossen CORE_2.9
  • een eerste toegankelijkheidscontrole doen met axe DevTools CORE_7.1

Slides ​

Bronnen ​

Na deze les ​

  • Herlees deze pagina's en maak de oefeningen die je in de les niet hebt gedaan.
  • Zet de heading map van je eigen portfolio op papier, voor je verder bouwt.
  • Installeer de axe DevTools-extensie en de HeadingsMap add-on in je browser.
  • Werk labo 2 af en zet het online.

Studietip

Maak een kapstok van elk hoofdstuk en subhoofdstuk, en hang alle begrippen en kernwoorden daaraan op. Vraag je bij alles af waarom het gegeven werd, en noteer elke waarschuwing apart.