HTML

• Informatica
• Middelbare school
• havo
• Leerjaar 4

HTML (Project picobello BV)

Wat gaan wij vandaag doen

- Kort Herhaling les (in standup meeting)

- 1 minuut presteneer jouw wireframe

- Tips en Trucs

- Wat is HTML en CSS?

- Hoe begin ik met mijn website?

Beschrijving van de openingsfoto

Je ziet op de foto een Pingo.

Dit is een ijslens onder de grond. Doordat de ijsmassa water aantrekt groeit de pingo.

Blablabalbla

Groepjes van 2 leerlingen

Groep 1 : Bahar, Farhan

Groep 2: Zakaria, Mohammed Khan

Groep 3: Bellal , Bilal

Groep 4: Walid, Rawan

Groep 5: Delina

Groep 6: Steven

Groep 7: Zane

Groep 8: Ehsan, Mohammed ben

Groep 9: Anton, Vinay

Groep 10: Jozef , Baran

Vorige keer  ----> 

Jullie waren bezig met het ontwerpen van jouw wireframe

Wat is ook alweer wireframe?

Wat is ook alweer figma?

Hoe kom ik op nieuwe ideeën?

Hoe zit een layout van een website eruit?

Vorige keer  ----> 

Een webpagina bestaat uit delen

Vorige keer  ----> 

Een wireframe gebruik je om snel indeling en ontwerp te maken voor een website

Vorige keer ----> 

Figma

Waarom kolomgrid?

 

Presentatie per groepje

Klik op de volgende link : https://www.youtube.com/watch?v=HZuk6Wkx_Eg

Volg de tutorial en zet meteen jouw schets om in figma

Tips & Trukjes 

https://contrastchecker.com/

https://fontjoy.com/

https://www.toools.design/

https://principles.design/examples/5-guiding-principles-for-experience-design

Wat is HTML

HTML staat voor:

 Hyper Text Markup Language 

• Het is een opmaak taal
• Hiermee bouwen wij de structuur van de website
• Het werkt met html tags
• Er zijn heel veel html tags

Zo zijn er nog heel veel meer, Je hoeft ze niet allemaal uit jouw hoofd te kennen!

CSS

CSS staat voor cascading style sheet

Met css kunnen wij de website mooi maken

Denk aan welke 

• Lettertype
• Kleur letters
• Grootte van letters
• Achtergrond
• Vorm van een foto
• enz.

Demo nu.nl met en zonder css

Zonder HTML kan je geen CSS gebruiken. Je hebt dus altijd eerst HTML code nodig voor dat je CSS kan gebruiken

Ik weet waarvoor ik HTML moet gebruiken

Ja

Nee

Deels

Ik weet waarvoor ik CSS moet gebruiken

Ja

Nee

Deels

HTML gebruik ik voor

CSS gebruik ik voor

We gaan beginnen

Om een website te bouwen een code editor nodig. 

wij gebruiken hiervoor visual studio code

Stel de volgende vragen aan jou zelf

• Welke deel van jouw webpagina ga je maken?
• Welke achtergrondskleur(en) wil ik gebruiken
• Welke kleuren voor de letters gebruik ik voor de website?
• Welke lettertypes ga ik gebruiken?

Voor kleuren is het handig om het volgende aan te houden

• primiare kleur
• secondary kleur
• info kleur (meestal lichter dan primaire kleur)
• warning kleur (Meestal orangje)
• danger kleur (Meestal rood)

Kijk of de letterkleuren passen met de achtergronds kleur

Kijk of de lettertypes met elkaar passen (alleen nodig als je meer dan 1 lettertype gebruik)

https://contrastchecker.com/   : kleur contrast

https://fontjoy.com/       : contrast tussen lettertypes

https://htmlcolorcodes.com/ : color hex 

 10 minuten voor de opdracht --------------------------->

Voorbeelden volgende sheet!

Afronden

uploade jouw code naar oneDrive

Vragen?

Laag contrast

Hoog contrast