1.7 terugblik module 1
•
0 likes•193 views
HTML Module 1 / T.b.v. studenten MBO Rijnland Leiden / Software Developer
Recommended
More Related Content
Similar to 1.7 terugblik module 1
Similar to 1.7 terugblik module 1 (20)
1.7 terugblik module 1
- 1. Terugblik HTML module 11.7 Terugblik Module 1
- 2. HTML module 11.7 Terugblik Module 1 Nested elements HTML heeft standaard een aantal elementen die meerdere tag’s en elementen kunnen bevatten. De body, header, section en footer tag zijn in dit voorbeeld nested elements.
- 3. HTML module 11.7 Terugblik Module 1 Basispagina html Uni code charset t.b.v. alle tekens in de wereld Taal van het land waarvoor de website is bedoeld Noodzakelijk voor scaling meerdere devices!
- 4. HTML module 11.7 Terugblik Module 1 Basispagina html Wat is het onderwerp van de webpagina! Wie heeft de webpagina gemaakt. Steekwoorden die voorkomen op de webpagina! Meta gegevens zijn belangrijk voor zoekmachines!
- 5. HTML module 11.7 Terugblik Module 1 Basispagina html De title is verplicht en verschijnt op het tabblad van de browser. Daarnaast ook belangrijk voor de zoekmachines.
- 6. HTML module 11.7 Terugblik Module 1 Basispagina html Hier plaats je de link naar css bestand voor de vormgeving van de website.
- 7. HTML module 11.7 Terugblik Module 1 Basispagina html Alles wat in het <head> element staat verschijnt niet op de pagina! Alle content wat op het scherm moet verschijnen moet in de body staan.
- 8. HTML module 11.7 Terugblik Module 1 Schermindeling browser Browsers hebben standaard een aantal style instellingen zoals ruimte tussen p-tags en h-tags. Ook is er ruimte aan de boven, onder en zijkanten gecreëerd. Deze ruimtes worden bepaald door de margin en padding. Vb margin en padding bepaald door browser
- 9. HTML module 11.7 Terugblik Module 1 * geld voor de gehele pagina Margin: 0 schakelt alles margin uit Padding: 0 schakelt alle padding uit. Uitschakelen margin en padding browser
- 10. HTML module 11.7 Terugblik Module 1 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.
- 11. HTML module 11.7 Terugblik Module 1 De img-tag Plaatjes kan je toevoegen d.m.v. de img-tag. Hier komt de juiste indeling van je map weer naar voren. De juiste indeling van de structuur van een website = Naam site/opdracht - Submap css (hier komt het css bestand of bestanden) - Submap images (hier komen alle plaatjes te staan)
- 12. HTML module 11.7 Terugblik Module 1 De img-tag Waar staat het plaatje Tekst op website als plaatje niet geladen kan worden. Ook voor het oplezen van het scherm t.b.v. blinden en slechtzienden
- 13. HTML module 11.7 Terugblik Module 1 Background webpagina of onderdelen CSS – Background-color Om een webpagina een achtergrond-kleur als achtergrond te geven gebruik je de volgende css.
- 14. HTML module 11.7 Terugblik Module 1 CSS - Background Background-color voor de gehele webpagina en body bepalen
- 15. HTML module 11.7 Terugblik Module 1 CSS - background-image
- 16. HTML module 11.7 Terugblik Module 1 CSS – Background-image
- 17. HTML module 11.7 Terugblik Module 1 Fonts gebruiken Interne fonts gebruiken 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.
- 18. HTML module 11.7 Terugblik Module 1 Externe font’s gebruiken! Je kan ook externe font’s gebruiken, de meeste gebruikte manier van externe font’s is gebruik te maken van google fonts. https://fonts.google.com
- 19. HTML module 11.7 Terugblik Module 1 Google font’s gebruiken! Na het selecteren klik ik op - Hier staat hoe je het kan gebruiken!
- 20. HTML module 11.7 Terugblik Module 1 Google font’s gebruiken! Font koppelen voor gebruik! Font-family bepalen in stylesheet.
- 21. HTML module 11.7 Terugblik Module 1 HTML classes en id’s Classes en id’s zijn attributen in html/css
- 22. HTML module 11.7 Terugblik Module 1 HTML class attribute De html class attribute geeft je de mogelijkheid dezelfde style aan meerdere elementen/tags te geven. Een class wordt gegeven aan een element/tag in HTML. Zoals hieronder. Let op het is wel binnen het element/tag. <p class=“naam_class”>..</p> / <article class=“”>..</article> Een class kan je zo vaak als je wilt gebruiken binnen een webapplicatie !
- 23. HTML module 11.7 Terugblik Module 1 HTML class attribute class class class class 2 classes voor de article-tag!
- 24. HTML module 11.7 Terugblik Module 1 HTML class attribute in css Een class wordt in het css bestand aangegeven met een punt . .bericht_lang {……….}
- 25. HTML module 11.7 Terugblik Module 1 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)
- 26. HTML module 11.7 Terugblik Module 1 id = content_index id = bovenkant 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.
- 27. HTML module 11.7 Terugblik Module 1 BOX-model
- 28. HTML module 11.7 Terugblik Module 1 BOX-model
- 29. HTML module 11.7 Terugblik Module 1 Padding !
- 30. HTML module 11.7 Terugblik Module 1 Wat gebeurt er als je de section en de article dit hier in staat allebei padding geeft. De section en de article worden allebei groter. Dus als er meer content onder staat wordt dit ook verplaatst naar beneden en of naar rechts cq links. (5%) + 5%) Padding !
- 31. HTML module 11.7 Terugblik Module 1 Margin !
- 32. HTML module 11.7 Terugblik Module 1
- 33. HTML module 11.7 Terugblik Module 1 Margin ! Margin wordt gecreëerd rekenend vanaf html start pagina.
- 34. HTML module 11.7 Terugblik Module 1 Voorbeeld gebruik Margin ! Ruimte maken boven de header d.m.v. margin-top.
- 35. HTML module 11.7 Terugblik Module 1 Ordered en unordered list <ul> <li> Unordered list
- 36. HTML module 11.7 Terugblik Module 1 <ul> style
- 37. HTML module 11.7 Terugblik Module 1 <ol> element Ordered list
- 38. HTML module 11.7 Terugblik Module 1 <ol> style
- 39. HTML module 11.7 Terugblik Module 1 Navigatie m.b.v. UL en LI In HTML5 gebruiken we voor navigatie het element <nav> </nav> hierbinnen realiseren we de navigatie voor de pagina.
- 40. HTML module 11.7 Terugblik Module 1 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.
- 41. HTML module 11.7 Terugblik Module 1 Navigatie! Link naar pagina buiten webapplicatie Je kan gebruik maken van tekst of plaatjes
- 42. HTML module 11.7 Terugblik Module 1 Navigatie m.b.v. ul en li!
- 43. HTML module 11.7 Terugblik Module 1 Status van een link Navigatie m.b.v. ul en li!
- 44. HTML module 11.7 Terugblik Module 1 Navigatie m.b.v. ul en li!
- 45. HTML module 11.7 Terugblik Module 1 Positioneren css position M.b.v. css position is het mogelijk teksten plaatjes en andere soorten elementen/tags op het scherm te positioneren!
- 46. HTML module 11.7 Terugblik Module 1 Position!
- 47. HTML module 11.7 Terugblik Module 1 Position!
- 48. HTML module 11.7 Terugblik Module 1 Position: Relative Gepositioneerd van oude positie in de section naar nieuwe positie zonder dat andere elementen wijzigen of verplaatst worden!
- 49. HTML module 11.7 Terugblik Module 1 Position: Relative Gepositioneerd van oude positie in de article naar nieuwe positie zonder dat andere elementen wijzigen of verplaatst worden! Je ziet nu dat hij uit de body wordt geplaatst. Bij gebruik relative goed opletten!
- 50. HTML module 11.7 Terugblik Module 1 Position: Fixed Fixed plaatst het blokje vast op een plek in het scherm. Blijft altijd zichtbaar op het scherm. Handig voor hamburger menu en logo.
- 51. HTML module 11.7 Terugblik Module 1 Position: Absolute Gepositioneerd vanaf ancestor in dit geval de het section (blokken) element.
- 52. HTML module 11.7 Terugblik Module 1 parent ancestor child
- 53. HTML module 11.7 Terugblik Module 1 article section Img met class Dus vanaf section berekenen
- 54. HTML module 11.7 Terugblik Module 1 <details> en <summary> element Wanneer er veel tekst tegelijk weer word gegeven 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
- 55. HTML module 11.7 Terugblik Module 1 Navigatie menu met <details> en <summary> Logo bijvoegen en positioneren d.m.v. position absolute en relative.
- 56. HTML module 11.7 Terugblik Module 1 Navigatie menu met <details> en <summary>
- 57. HTML module 11.7 Terugblik Module 1 Mobile First!
- 58. HTML module 11.7 Terugblik Module 1 Responsive Coderen d.m.v. de css @media rule
- 59. HTML module 11.7 Terugblik Module 1 Responsive d.m.v. Media Query Media query is een CSS techniek beschikbaar vanaf CSS3. De @media regel in css geeft stijl aan blokken code waarvan de @media conditie dit aangeeft. Als de schermbreedte max 600px breed is dan word het uitgevoerd.
- 60. HTML module 11.7 Terugblik Module 1 5 groepen @media indelingen voor het eenvoudig houden van de beschikbare devices.
- 61. HTML module 11.7 Terugblik Module 1 Een andere indelingen die je kunt gebruiken zijn.
- 62. HTML module 11.7 Terugblik Module 1 Een andere indelingen die je kunt gebruiken zijn.
- 63. HTML module 11.7 Terugblik Module 1 Voorbeeld @media
- 64. HTML module 11.7 Terugblik Module 1
- 65. HTML module 11.7 Terugblik Module 1 Bij een breedte van minder dan 992px wordt de foto niet weergegeven en ook de ruimte wordt vrij gemaakt.
- 66. HTML module 11.7 Terugblik Module 1 Visibility Property
- 67. HTML module 11.7 Terugblik Module 1 Visibility Property Bij een breedte van minder dan 992px wordt de foto niet weergegeven Maar de ruimte wordt wel vastgehouden
- 68. HTML module 11.7 Terugblik Module 1 Huiswerk ! Het huiswerk is het maken van een oefen eindcase. Het doel hiervan is dat je weet wat je kunt verwachten tijdens de eindcase module 1. Waar moet je nog aandacht aanbesteden en wat moet je nog meer oefenen Lever het geheel als zipfile in op teams in bij Opdracht 1.7.2 Oefencase. De case staat in teams onder bestanden les 1.7 met daarin de plaatjes die je nodig hebt.