Les 1 — HTML: Basis

Lesprogramma

👩🏻‍🏫 Introductie (~30 min.)

  • Docent neemt studiehandleiding door:
    • Wat ga je leren?
    • Hoe ziet het weekrooster eruit?
    • Hoe verdien je punten?
    • Wat heb je nodig?
  • Introductie op HTML

Doelen

  • Je weet wat er van je verwacht wordt om dit vak te halen.
  • Je kent de basis html-elementen.
  • Je hebt een eerste html-pagina gemaakt.
  • Je kunt een HTML-document structuur geven op basis van kopjes en lijsten;
  • Je maakt onderscheid tussen koppen en paragrafen;
  • Je gebruikt hyperlinks (a) om naar andere pagina’s te navigeren;
  • Je toont plaatjes in een document.

👷🏼 Opdracht 1: Eerste HTML-document maken (~20 min.)

  1. Installeer Visual Studio Code.
  2. Start een eigen ‘project’ met een index.html-bestand aan de hand van de onderstaande mappenstructuur:
mijn-project/
├── css/
├── images/
└── index.html

2 directories, 1 file

Voor meer informatie daarover zie: Projectstructuur 3. Vul nu het index.html bestand met de onderstaande code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

👩🏻‍🏫 Theorie (~50 min.)

  • Behandeling van tags (~30 min.) aan de hand van demo’s (les01_html-demo.html en les01_tabellen.html):
    • h1, h2, h3 (H. 3: Koppen markeren)
    • p (H. 3: Alineatekst markeren)
    • strong, em (H. 3: Speciale betekenis aangeven)
    • ol, ul, li (H. 3: Inhoud groeperen)
    • a (H. 4: Verbindingen (links) leggen met <a>)
    • img (H. 5: Afbeeldingen plaatsen met <img>)
    • video (H. 5: Het element <video>)
    • table en bijbehorende tags als thead, tbody, tr en td

Besef dat veel van de HTML-documenten soortgelijke structuur en elementen hebben als Word-documenten:

  • Hoofdkop
  • Kleinere koppen
  • Content
  • Plaatjes
  • Opsomming
  • Tabellen
  • Etc.

👷🏼 Opdracht 2: Appeltaartrecept in HTML (~ 20 min.)

  1. Maak een nieuwe file: recept-voor-taart.html.
  2. Maak een kopje in het document met daarin de tekst: ‘Appeltaart’.
  3. Maak een paragraaf waarin je beschrijft wat je het lekkerste vindt aan appeltaart.
  4. Maak een tabel met ingrediënten die je nodig hebt voor appeltaart (in de eerste kolom de hoeveelheid, in de tweede kolom het ingrediënt) (bijvoorbeeld deze).
  5. Maak een geordende lijst met de stappen die je moet doorlopen.
  6. Zet nog een mooi plaatje van de appeltaart in het document.
  7. Kijk nu naar de toegankelijkheid (Accessibility of a11y) van je recept:
    1. Open de Accessibility Inspector in Firefox, de Lighthouse-tab in Chrome/Brave/Opera of de Audit-tab in Safari
    2. Wat valt je op?
    3. Voor welke doelgroep is deze website moeilijk toegankelijk?
  8. Bestaat je website uit "valide" HTML?

👩🏻‍🏫 Meer theorie

  • Behandelen van main, header etc. zoals in H. 2: Secties markeren aan de hand van de demo (les01_html-demo-layout.html) van de docent.

👷🏼 Opdracht 3: Secties markeren (~10 min.)

  1. Open opnieuw het appeltaart recept en voeg met linkjes een navigatie-menu toe.
  2. Voeg ook een titel aan de pagina toe
  3. Zet nu de goede structuur-elementen (main, header, nav) om de juiste stukken.

👷🏼 Opdracht 4: Installeer Github Desktop en maak je eerste commit (~30 min.)

  1. Installeer Github Desktop
  2. Maak een account aan op Github.com
  3. Volg de tutorial uit de Reader
  4. Open nu de link naar Opdrachten WTUX die de docent rondtstuurt en clone de repository
  5. Verplaats de gemaakte opdrachten naar de lokale repository.
  6. Commit en push naar github.
  7. Verifiëer of de gegevens op Github staan.

👩🏻‍💻 📖 Opdracht 5: Maak de voorbereiding van Les 2

Zie voorbereiding les 2

Bonus: Leesmateriaal

Deze les komt grotendeels overeen met de onderstaande onderdelen uit het boek en de reader.