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)

Naslagmateriaal

Uitleg (havo)

Uitleg (vwo)

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>, <ol>, <ul>, <li>, <h1> t/m <h6>, <br/>, <img> met src en alt, <a> met href, <div>, <table>, <tr>, <th>, <td>. Je kunt uitleggen wat deze tags doen en hoe je kunt ze gebruiken.
  6. Je kunt eenvoudige stukken HTML interpreteren, dat wil zeggen dat je kunt uitleggen hoe een webbrowser omgaat met een eenvoudig stuk HTML.
  7. 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: font-size, width, height, color, background-color.
  6. Je kunt werken met kleuren en doorzichtigheid in CSS, door gebruik te maken van kleurnamen en rgba().
  7. Je kunt de werking van boxen in CSS toelichten. Je kunt daarbij uitleggen wat de content, padding, border en margin van een box zijn.
  8. 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.
  9. 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/) .