HTML & CSS: Blokkendoos

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

Domein A2: HTML & CSS
Blokkendoos

Leerdoelen

Na deze les kun je uitleggen

• dat een website is opgebouwd uit blokken en wat het semantische web is
• Hoe je met float blokken uit kunt lijnen
• Hoe je een basis webpage layout opzet
• Hoe je een goede projectstart maakt

Na deze les kun je 

• Een begin maken met het ontwerp van je website
• Hier in Visual Studio Code aan werken

Blokkenontwerp

• Een goed ontwerp begint met een goede structuur
  voor elke pagina. 
• Een webpagina is opgebouwd
   uit blokken. Deze
  blokken vormen
  de basis voor
  de structuur.

Het semantische web

Standaardblokken
(semantische blokken)
geven via hun naam aan
waarvoor ze dienen.

Semantische elementen

 Kop: <header>

 Navigatiebalk: <nav>

 Tekst: <article>

 Voettekst: <footer>

 Andere blokken: <div>

Float

Zonder het gebruik van floating worden alle geneste elementen in het article-element onder elkaar gezet.

Float

Door float: left; te gebruiken wordt
het plaatje links uitgelijnd. De tekst
loopt om het plaatje heen waarbij
rekening wordt gehouden met de
width en margin van het plaatje.

Door float: right; te gebruiken wordt
 een plaatje rechts uitgelijnd.

Checklist stap 1
Ken je je HTML-tags?

😒🙁😐🙂😃

Ken je je HTML-tags?

             Mooi! Op naar stap 2!

             Niet getreurd, bekijk de volgende bronnen nog eens om meer te leren:

• Maak alle 4 de delen van de regenboogopdracht af
• Maak de eindopdracht in Fundament (https://fundament-online.nl/leeromgeving/content.php?id=54210)
• Gebruik de HTML-sectie op w3schools.com om meer te leren
  
• Kijk de presentaties van vorige week nog eens door

Checklist stap 2
Begrijp je hoe CSS werkt?

😒🙁😐🙂😃

Begrijp je hoe CSS werkt?

             Perfect! Op naar stap 3!

             Niet getreurd, bekijk de volgende bronnen nog eens om meer te leren:

• Maak de eindopdracht in Fundament (https://fundament-online.nl/leeromgeving/content.php?id=54210)
• Leer meer over CSS selectors met CSS Diner (https://flukeout.github.io/)
• Gebruik de CSS-sectie op w3schools.com om meer te leren
• Kijk de presentaties van deze week nog eens door

Checklist stap 3
Heb je een ontwerp voor de website?

😒🙁😐🙂😃

Heb je een ontwerp voor de website?

             Echt? Goed bezig! We zijn bijna klaar voor stap 4!

             Niet getreurd, volgende week gaan we aan de slag met:

• Je functioneel ontwerp. Fundament F1 - deel 8 vertelt hier meer over (https://fundament-online.nl/leeromgeving/content.php?id=49150)
  
• Houd rekening met de usability richtlijnen. Fundament F1 - deel 1 t/m 5 (https://fundament-online.nl/leeromgeving/content.php?id=49143)
• Bekijk de filmpjes en inhoud op webpage layout tutorial en kies een layout 

Kies een website layout

Voordat je begint je website
te bouwen is het verstandig

eerst een standaard layout
uit te kiezen. 

Bekijk hiervoor de blogpost op:

https://www.101computing.net/
html-website-layout/

Checklist stap 4
Is er een mappenstructuur voor de website?

😒🙁😐🙂😃

Is er een mappenstructuur voor de website?

             Dat geloof ik niet! Laten we hier toch maar even naar kijken!

             Tuurlijk niet, hiervoor schakelen we over naar een betere editor.

• Demonstatie Visual Studio Code (https://vscode.dev)
• Demonstratie mappenstructuur (images, html-bestanden linken, externe stylesheet)
• Demonstratie hoe website bekijken en inspector gebruiken

Checklist stap 5
Zijn er al middelen/ afbeeldingen verzameld?

😒🙁😐🙂😃

Zijn er al middelen/ afbeeldingen verzameld?

             Echt? De website is al bijna klaar!

             Logisch, hiervoor moet eerst overlegd worden over wat jullie precies willen gaan maken. Volgende week gaan we dit doen middels scrum.

Tips voor een goede start

• Lees de opdrachtbeschrijving nog eens door.
• Denk alvast na over een overwerp (passend binnen jullie thema).
  
• Probeer vast materiaal te vinden (websites, artikelen, filmpjes, plaatjes). Sla deze middelen op in een aparte kolom in je Trello bord! 
• Werk samen! Overleg, verdeel de taken en focus je op waar je goed in bent! 
• Een goede manier van samenwerken is pair programming. 1 groepslid schrijft de code, de ander kijkt mee, geeft suggesties en corrigeert waar nodig. Omdat je er samen over nadenkt, krijg je betere code!

Opdracht (thuis afmaken)

Maak de volgende veranderingen met VSCode . Dit mag ook in overleg waarbij jullie samen aan de opdracht werken. 

• Maak een extern stylesheet-bestand (style.css) en kopieer (een gedeelte van) de interne stylesheet hiernaar toe.
• Link naar style.css vanuit je HTML-bestand(en)
• Verander CSS-eigenschappen als kleur, width en padding om de werking te begrijpen. Zoek eigenschappen die je niet kent op (op w3schools).

Heb je genoeg geleerd om een goede start te maken met je project?

😒🙁😐🙂😃