HTML Lessen M. van Ginkel

1. 1.3 HTML/CSS Basis 2
HTML module 11.3 HTML/CSS Basis 2

2. Lesdoel!
Id’s Classes en CSS
HTML module 11.3 HTML/CSS Basis 2

3. HTML module 11.3 HTML/CSS Basis 2
Terugblik!
Uitschakelen margin en padding browser
Browsers gebruiken standaard stijl instellingen, deze
kunnen we uitschakelen zodat we schoon kunnen beginnen.

4. HTML module 11.3 HTML/CSS Basis 2
Terugblik!
Ruimte aan zijkanten pagina creëren!
Veel pagina’s die je bezoekt hebben standaard ruimte aan
de zijkant van de pagina gecreëerd. De truc hiervoor is simpel.

5. HTML module 11.3 HTML/CSS Basis 2
Terugblik!
De tag!
Waar kan de browser het plaatje vinden!
Hoogte van het plaatje!
! De img- tag word afgesloten door >
dus niet <img>….</img> !

6. HTML module 11.3 HTML/CSS Basis 2
Terugblik!
Font- family geeft aan dat de font gestyled moet
worden. De eerste is het standaard font, als deze niet
aanwezig is gebruikt hij times en daarna serif.
Font- family bepalen in stylesheet.

7. HTML module 11.3 HTML/CSS Basis 2
Uitwerking opdracht !

8. HTML module 11.3 HTML/CSS Basis 2
Uitwerking opdracht / HTML

9. HTML module 11.3 HTML/CSS Basis 2
Uitwerking opdracht / CSS

10. HTML module 11.3 HTML/CSS Basis 2
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.

11. HTML module 11.3 HTML/CSS Basis 2
HTML class attribute
class
class
class
class
2 classes voor de article- tag!

12. HTML module 11.3 HTML/CSS Basis 2
HTML class attribute
class = bericht_lang
class = bericht_klein

13. HTML module 11.3 HTML/CSS Basis 2
HTML class attribute
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.

14. HTML module 11.3 HTML/CSS Basis 2
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)

15. HTML module 11.3 HTML/CSS Basis 2
id = content_index
id = bovenkant

16. HTML module 11.3 HTML/CSS Basis 2
HTML id attribute
id = content_index
id = bovenkant

17. HTML module 11.3 HTML/CSS Basis 2
css voor voorbeeld
HTML id attribute
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.

18. HTML module 11.3 HTML/CSS Basis 2
Opdracht !
Pas het laatst ingeleverde bestand aan met de kennis
die tot op heden is behandeld.
Gebruik classes en id’s in de pagina voor het
stijlen van de pagina. Je hebt hiervoor 20 minuten.

19. HTML module 11.3 HTML/CSS Basis 2
Margin en Padding !
BOX- model

20. HTML module 11.3 HTML/CSS Basis 2
Margin en Padding !
BOX- model

21. HTML module 11.3 HTML/CSS Basis 2
Padding !

22. HTML module 11.3 HTML/CSS Basis 2
Padding !
padding met 4 waardes! padding met 3 waardes!

23. HTML module 11.3 HTML/CSS Basis 2
Padding !
padding met 2 waardes! padding met 1 waarde!

24. HTML module 11.3 HTML/CSS Basis 2
Padding voorbeelden !
Bovenkant zonder padding
Bovenkant met padding

25. HTML module 11.3 HTML/CSS Basis 2
Padding voorbeelden !
5 lengte eenheden
rondom de tekst.

26. HTML module 11.3 HTML/CSS Basis 2
Huiswerk !
Pas de opdracht aan met de opgedane kennis.
Upload deze als zip file naar edmodo in
opdracht 1.3