HTML les 1.4 t.b.v. studenten MBO Rijnland Leiden AO

1. 1.4 HTML/CSS Basis 3
HTML module 11.4 HTML/CSS Basis 3

2. Lesdoel!
Navigatie en meer
HTML module 11.4 HTML/CSS Basis 3
ul / ol / li / nav / a / href / margin / padding / float

3. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
HTML class attribute
De html class attribute geeft je de mogelijkheid
dezelfde style aan meerdere elementen te geven.
Een class wordt geplaatst binnen een element
zoals hieronder:
<p class=“naam_class”>..</p> / <article class=“”>..</article>
In de stylesheet begint een class met een puntje.
.naam_class {……..}
Een class kan je zo vaak als je wilt gebruiken op een
webpagina.

4. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
css voor voorbeeld
vw is een lengte unit zoals %
in dit geval 90 lengte eenheden
van de breedte van het device!
30 lengte eenheden van de section!
float: left; zorgt ervoor dat
de articles met de class
bericht_klein naast elkaar komen
te staan.

5. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
HTML id attribute
De html id attribute geeft je de mogelijkheid
style aan een enkele element te geven.
Een id wordt geplaatst binnen een element
zoals hieronder:
<div id=“naam_id”>
In de stylesheet begint een id met een hashtag (#).
#naam_id {……..}
Een id mag je maar 1 keer gebruiken op een
webpagina en heeft een unieke naam. (geen tagnaam)

6. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
css voor voorbeeld
De hoogte wordt automatisch bepaald.
De breedte is 90 eenheden van het
device. background-color: zorgt voor
de achtergrond kleur.
De breedte van de section met het
id #content_index wid 90 eenheden
van het device.

7. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
BOX-model

8. HTML module 11.4 HTML/CSS Basis 3
Terugblik!
5 lengte eenheden
rondom de tekst.

9. HTML module 11.4 HTML/CSS Basis 3
Margin !

10. HTML module 11.4 HTML/CSS Basis 3
Margin !
margin met 4 waardes! margin met 3 waardes!

11. HTML module 11.4 HTML/CSS Basis 3
Margin !
margin met 2 waardes! margin met 1 waarde!

12. HTML module 11.4 HTML/CSS Basis 3
Voorbeeld zonder Margin !
Rand is border om body!

13. HTML module 11.4 HTML/CSS Basis 3
Voorbeeld met Margin !

14. HTML module 11.4 HTML/CSS Basis 3
Margin !
Margin wordt gecreëerd
rekenend vanaf html
start pagina.

15. HTML module 11.4 HTML/CSS Basis 3
Voorbeeld gebruik Margin !
Ruimte maken boven de header
d.m.v. margin-top.

16. HTML module 11.4 HTML/CSS Basis 3
CSS Background

17. HTML module 11.4 HTML/CSS Basis 3
CSS background-images

18. HTML module 11.4 HTML/CSS Basis 3
CSS background-images
cover; plaats volledig plaatje als background

19. HTML module 11.4 HTML/CSS Basis 3
CSS background-images / combinatie met padding en margin!
Padding zorgt voor ruimte om de tekst.
Margin zorgt voor de ruimte om article tags.

20. HTML module 11.4 HTML/CSS Basis 3
Nieuwe lesstof !

21. HTML module 11.4 HTML/CSS Basis 3
<ul> element
Unordered list

22. HTML module 11.4 HTML/CSS Basis 3
<ul> style

23. HTML module 11.4 HTML/CSS Basis 3
<ol> element
Ordered list

24. HTML module 11.4 HTML/CSS Basis 3
<ol> style

25. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
In HTML5 gebruiken we voor navigatie het element
<nav> </nav> hierbinnen realiseren we de navigatie voor
de pagina.

26. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
Voor het daadwerkelijk navigeren maken we gebruik
van de a-tag. Je kan navigeren naar een andere pagina
maar ook binnen een pagina naar een id-attribute.
Bijv. #item-kennis.

27. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
Link naar pagina buiten webapplicatie
Je kan gebruik maken van tekst of plaatjes

28. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
Navigatie d.m.v. UL en LI tags
HTML Code

29. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
Navigatie d.m.v. UL en LI tags
CSS Code

30. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
Navigatie d.m.v. UL en LI tags
CSS Code

31. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
CSS Code
Status van een link

32. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
CSS Code
Status van een link

33. HTML module 11.4 HTML/CSS Basis 3
Navigatie!
CSS Code
Status van een link

34. HTML module 11.4 HTML/CSS Basis 3
Navigatie toevoegen!

35. HTML module 11.4 HTML/CSS Basis 3
Navigatie style toevoegen!

36. HTML module 11.4 HTML/CSS Basis 3
Navigatie style toevoegen!

37. HTML module 11.4 HTML/CSS Basis 3
Navigatie!

38. HTML module 11.4 HTML/CSS Basis 3
Alle stof tot nu toe voorbeeld

39. HTML module 11.4 HTML/CSS Basis 3
Alle stof tot nu toe voorbeeld

40. HTML module 11.4 HTML/CSS Basis 3
Huiswerk !
Pas de opdracht aan met navigatie en maak er een
onepager van d.m.v. de opgedane kennis.
Lever het geheel als zipfile in op teams bij opdracht
HTML 1.4.