1.5 html css basis 4
0 likes973 views
HTML module 1 / Les 1.5 t.b.v. studenten MBO Rijnland Leiden Applicatie en Mediaontwikkeling
More Related Content
Similar to 1.5 html css basis 4 (13)
1.5 html css basis 4
- 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.