1.3 html css basis 2
- 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