HTML module 1 / Les 1.5 t.b.v. studenten MBO Rijnland Leiden Applicatie en Mediaontwikkeling

1. 1.5 HTML/CSS Basis 4
HTML module 11.5 HTML/CSS Basis 4

2. Lesdoel!
Positioneren en navigeren
HTML module 11.5 HTML/CSS Basis 4
Position: absolute, relative en fixed.
<main> element, <details> en <summary> elementen.
Navigeren m.b.v. hamburger menu i.c.m. met details en
summary elementen.

3. HTML module 11.5 HTML/CSS Basis 4
Terugblik!
BOX-model

4. HTML module 11.5 HTML/CSS Basis 4
Terugblik!

5. HTML module 11.5 HTML/CSS Basis 4
Terugblik!
CSS Background

6. HTML module 11.5 HTML/CSS Basis 4
Terugblik!
CSS background-images
cover; plaats volledig plaatje als background

7. HTML module 11.5 HTML/CSS Basis 4
Terugblik!
CSS background-images / combinatie met padding en margin!
Padding zorgt voor ruimte om de tekst.
Margin zorgt voor de ruimte om article tags.

8. HTML module 11.5 HTML/CSS Basis 4
Terugblik! Navigatie!
Navigatie d.m.v. UL en LI tags
HTML Code

9. HTML module 11.5 HTML/CSS Basis 4
Terugblik! Navigatie!
CSS Code
Status van een link

10. HTML module 11.5 HTML/CSS Basis 4
Nieuwe lesstof !

11. HTML module 11.5 HTML/CSS Basis 4
Position!

12. HTML module 11.5 HTML/CSS Basis 4
Position basisbestand!

13. HTML module 11.5 HTML/CSS Basis 4
Position: Relative

14. HTML module 11.5 HTML/CSS Basis 4
Position: Relative
Gepositioneerd vanaf begin
van de body zoals ingesteld
in de css n.l. 16vw van begin
scherm.

15. HTML module 11.5 HTML/CSS Basis 4
Position: Relative
Gepositioneerd vanaf de positie van het element waar
het zich in bevindt.

16. HTML module 11.5 HTML/CSS Basis 4
Position: Absolute

17. HTML module 11.5 HTML/CSS Basis 4
Position: Absolute
Gepositioneerd vanaf begin
van de body het 0-punt.
De box staat nu 11vw van links
en 2vh van de top.

18. HTML module 11.5 HTML/CSS Basis 4
Position: Absolute
Gepositioneerd vanaf begin body 0-punt vanaf links maar
wel onder de tekst van blok 1

19. HTML module 11.5 HTML/CSS Basis 4
Position: Fixed

20. HTML module 11.5 HTML/CSS Basis 4
Opdracht !
Pas de website over jouw zelf aan door padding en margin in
de gevallen waar dit kan te vervangen voor position.
Verfraai het geheel ook….

21. HTML module 11.5 HTML/CSS Basis 4
<main> element

22. HTML module 11.5 HTML/CSS Basis 4
<details> en <summary> element
Wanneer er veel dat tegelijk wordt weergegeven
kan je gebruik maken van accordions.
Normaal had je hier javascript voor nodig maar in HTLM5.
Kun je gebruik maken van het <details> element i.c.m. het
<summary> element.
Na klik op kennis

23. HTML module 11.5 HTML/CSS Basis 4
<details> en <summary> element

24. HTML module 11.5 HTML/CSS Basis 4
Navigatie menu met <details> en <summary>
D.m.v. de elementen <detail> en <summary> is het mogelijk
zonder javascript een hamburger menu te creëren zoals
je op vele websites ziet en vooral op webpagina’s / apps
voor de mobieltjes ziet.
We gaan dit stap voor stap uitvoeren.

25. HTML module 11.5 HTML/CSS Basis 4
Navigatie menu met <details> en <summary> Stap 1
Ascii code voor hamburger menu

26. HTML module 11.5 HTML/CSS Basis 4
Navigatie menu met <details> en <summary> Stap 2
Logo bijvoegen en positioneren d.m.v.
position absolute en relative.

27. HTML module 11.5 HTML/CSS Basis 4
Navigatie menu met <details> en <summary> Stap 3
Navigatie toevoegen d.m.v. ul en vastzetten
hamburger d.m.v. position fixed

28. HTML module 11.5 HTML/CSS Basis 4
Navigatie menu met <details> en <summary> Stap 4
Navigatie, ul en a stylen

29. HTML module 11.5 HTML/CSS Basis 4
Huiswerk !
Pas de website over jouw zelf aan met navigatie d.m.v.
een hamburger-menu met de elementen details en summary.
Waar en hoe je de navigatie laat verschijnen op je pagina
mag jezelf bepalen. Codeer op de juiste manier.
Lever het geheel als zipfile in op edmodo in opdracht
HTML 1.5.