T1. Web Design met HTML en CSS

Je leert hoe je informatie op een website zet met de programmeertalen HTML en CSS.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

  1. Khan Academy

Oefeningen

Khanacademy, module Intro to HTML/CSS

  1. Intro to html
  2. Intro to css
  3. More html tags
  4. Css text properties
  5. Web development tools (geen toetsstof)
  6. CSS layout
  7. More css selectors
  8. Other ways to embed css (geen toetsstof)
  9. Further learning (geen toetsstof)

Presentaties en Opdrachten

Leerdoelen voor de toets

HTML

  1. Je kunt uitleggen wat een URL is en waarvoor een webbrowser deze gebruikt en je kent de volgende vier onderdelen van een URL: protocol, server, map, bestand
  2. Je kent het principe van tags zoals die in HTML gebruikt worden.
  3. Je kent de basisstructuur van een HTML-pagina.
  4. Je weet wat de begrippen parent, child en sibling betekenen en kunt de betekenis van deze begrippen toelichten. Je kunt deze begrippen toepassen op HTML.
  5. Je kent de volgende tags: <html>, <head>, <body>, <p>, <strong>, <em>, <ol>, <ul>, <li>, <h1> t/m <h6>, <br>, <img> met src en alt, <a> met href, <span>, <div>, <table>, <thead>, <tbody> <tr>, <th>, <td> en kunt commentaar (<!-- ... -->) toevoegen in HTML. Je kunt uitleggen wat deze tags doen en hoe je kunt ze gebruiken.
  6. Je kunt complexere links gebruiken, zoals een afbeelding die klikbaar is of een link die naar een specifieke plek binnen dezelfde pagina springt.
  7. Je kunt uitleggen wat block-level en inline elementen zijn en wat hun invloed is op de layout van een webpagina. Je weet van de geleerde tags in welke catergorie ze vallen.
  8. Je kunt eenvoudige stukken HTML interpreteren, dat wil zeggen dat je kunt uitleggen hoe een webbrowser omgaat met een eenvoudig stuk HTML.
  9. Je kunt wijzigingen aanbrengen in een eenvoudig stuk HTML, de syntax van de HTML tags die daarvoor nodig zijn wordt daarbij gegeven in de vraag.

CSS

  1. Je kunt uitleggen wat er binnen de informatica met Separation of Concern wordt bedoeld en hoe dat op HTML en CSS van toepassing is.
  2. Je kunt uitleggen wat selectors, properties en values in CSS zijn en je kunt ermee werken. Dat wil zeggen dat je eenvoudige stukken CSS met selectors, properties en values kunt maken en de werking ervan kunt uitleggen.
  3. Je kunt CSS selectors maken die bestaan uit een tag, class of id of een combinatie daarvan.
  4. Je kunt de voorrangsregels tussen tags, classes en id’s toepassen en je kunt daarbij aangeven welke selectors meer of minder specifiek zijn.
  5. Je kent van de volgende properties de betekenis en kunt deze toepassen in CSS: color, background-color, font-size, font-family, width, height, padding, margin, border, float, clear en kunt commentaar (/* ... */) toevoegen aan CSS.
  6. Je kunt werken met kleuren en doorzichtigheid in CSS, door gebruik te maken van kleurnamen en rgba().
  7. Je kent het verschil tussen px en % in CSS en je kunt ze toepassen.
  8. Je kunt div en span op een juiste en zinvolle manier gebruiken, afgestemd op hun rol als block-level en inline element.
  9. Je kunt de werking van boxen in CSS toelichten. Je kunt daarbij volgende concepten uitleggen en gebruiken: content, padding, border en margin.
  10. Je kunt de werking van float en clear in CSS toelichten.
  11. Je kunt eenvoudige stukken CSS interpreteren, dat wil zeggen dat je kunt uitleggen hoe een webbrowser omgaat met een eenvoudig stuk CSS en hoe het eruit ziet in een webbrowser.
  12. Je kunt wijzigingen aanbrengen in een eenvoudig stuk CSS, de properties die daarvoor nodig zijn worden beschreven in de vraag.

Oefentoets

Een oefentoets voor deze module staat in Woots .

Verdieping

  1. CSS Battle ( https://cssbattle.dev ).

Oud materiaal

Hieronder vind je materiaal van voorgaande jaren. De inhoud komt grotendeels overeen, maar er kunnen kleine verschillen zijn. Raadpleeg daarom altijd de slides van dit jaar om zeker te zijn. Het materiaal is bedoeld als aanvulling, zodat je de stof vanuit een ander perspectief kunt bekijken.

Uitleg video 1:

Uitleg video 2: