Web Design
Inhoudsopgave
Wat is HTML................................................................................................... 4
Basis opbouw HTML.......................................................................................4
Twee soorten elementen op basis van afsluiting:...........................................................5
Twee soorten elementen op basis van startplaats:.........................................................5
Attributes........................................................................................................................ 5
Verschillende toepassingen van attributes..................................................................5
Nesting.......................................................................................................... 6
Basis tags...................................................................................................... 6
Geavanceerdere opbouw HTML.....................................................................10
Afbeelding bronnen toevoegen.....................................................................................10
Semantiek..................................................................................................................... 11
Waarom semanatische elementen gebruiken............................................................11
Vaste structuur website............................................................................................. 12
Semantische elementen............................................................................................ 12
Toegankelijkheid bij afbeeldingen.................................................................................14
Afbeeldingen en bestandsformaten...........................................................................16
WebP gebruiken........................................................................................................ 17
Toegankelijkheid/accessibility v.e. website....................................................17
Wat is CSS................................................................................................... 18
CSS verbinden met HTML..............................................................................18
1.Inline CSS................................................................................................................... 18
2.Internal CSS............................................................................................................... 19
3.External Style Sheet (gebruiken wij)..........................................................................19
Mappenstructuur in CSS...............................................................................19
CSS reset..................................................................................................... 19
Hard refresh & Caching................................................................................20
DOM Tree..................................................................................................... 20
Erfelijke CSS Elementen Niet-erfelijke elementen.........................................................21
Box model.................................................................................................... 21
Height & Width............................................................................................................. 21
Voorangregels.............................................................................................. 21
Basis opbouw CSS........................................................................................22
Soorten selectors.......................................................................................................... 22
1
, 1.Element selector.................................................................................................... 23
2.ID selector.............................................................................................................. 23
3.Class selector......................................................................................................... 23
5.Pseudo classes selector.............................................................................................24
Selectoren combineren.................................................................................................25
Meet eenheden in CSS..................................................................................................26
Absolute lengths........................................................................................................ 26
Relative lenghts......................................................................................................... 26
Fonts inladen............................................................................................... 27
Web-safe fonts.............................................................................................................. 27
Niet web-safe fonts in bronbestanden bijvoegen..........................................................27
1.Lokale fonts inladen............................................................................................... 27
Basis properties & values CSS.......................................................................28
Kleuren......................................................................................................................... 28
Color: red;................................................................................................................. 28
Background-color: pink;............................................................................................. 28
Lettertype..................................................................................................................... 28
Font-size: 14px;......................................................................................................... 28
Font-family: sans-serif;.............................................................................................. 28
Font-weight: 700; of font-weight: bold;......................................................................29
Font-style: italic;........................................................................................................ 29
Text-decoration: underline;........................................................................................29
Text-allign: center;..................................................................................................... 29
Text-transform: uppercase;........................................................................................ 29
Height: 100 px; & Width: 300 px;..................................................................................29
Border........................................................................................................................... 29
Border: 5px solid #FF0000;.......................................................................................29
Margin/padding......................................................................................................... 30
Margin: 5px;.............................................................................................................. 30
Padding: 5px;............................................................................................................ 30
Youtube videos toevoegen............................................................................................30
Background images...................................................................................................... 31
3 mogelijkheden instellen van de achtergrond:.........................................................31
Background-color...................................................................................................... 31
Opacity...................................................................................................................... 31
Background-image.................................................................................................... 31
Positionering properties & values CSS...........................................................32
Handig om te herhalen voor positionering in CSS.........................................................32
Manieren om element te positioneren..........................................................................33
1.Position property........................................................................................................ 33
Mogelijke waarden “position”....................................................................................34
2.CSS Flexbox............................................................................................................... 35
A.Instellingen voor de container................................................................................35
B.Intellingen voor de items........................................................................................ 38
3.CSS Grid..................................................................................................................... 40
Verschil position property VS Flexbox VS Grid...........................................................40
Terminologie Grid...................................................................................................... 40
Container vs items.................................................................................................... 41
2
, A.Instellingen voor de container................................................................................41
B.Instellingen voor grid-items....................................................................................44
Responsive design.......................................................................................46
Chrome Developer Tools...............................................................................................46
5 guidelines van responsive design..............................................................................46
1.Maak gebruik van relative units.............................................................................46
2.Maak gebruik van breakpoints...............................................................................46
3.Maak gebruik van minimale & maximale breedtes.................................................46
4.Design Mobile First................................................................................................. 47
5.Gebruik geoptimaliseerde afbeeldingen.................................................................47
Media Queries............................................................................................................... 47
Twee delen van een Media Query..............................................................................48
Deeltje per deeltje..................................................................................................... 48
Min- en max waardes van de schermbreedte............................................................49
Reset css code............................................................................................. 50
Typische moeilijkheden.................................................................................52
Header in flexbox met een niet-meewerkende <ul> of <ol>.......................................52
3
, VOLGORDE ALTIJD TE DOEN BIJ OEFENINGEN
1) Per oefening maak je een map
2) Index.html(mag in geen mapje staan), mapje pages, mapje assets
en mapje css
3) In index.html bestand maak je standaardstructuur met !
4) Titel document aanpassen
5) Header, main en footer aanmaken binnen de body
6) In CSS map maak je een bestand style.css en reset.css
7) Kopiëer en plak de reset code in het reset.css bestand
8) Plak onderstaande code in het style.css bestand
html { box-sizing: border-box;}
*, *:before, *:after {box-sizing:inherit;}
9) Link in het index.html bestand, het style.css en reset.css bestand
1.HTML
GoLive: op webpagina te zien. Rechtermuisklik en inspecteren brengt je
naar de code maar aanpassingen die daar gebeuren zijn slechts tijdelijk.
Echte aanpassingen doe je in VS.
Wat is HTML
Seperation of Concers: Er zijn drie codetalen (HTML, CSS en JavaScript),
ze hebben elk hun eigen functie. Zo is het makkelijk om bv. de kleur te
veranderen want dan kan je niet de interactiviteit van de website om zeep
helpen als iets fout zou gaan.
Codetaal HTML CSS JavaScript
Wat Structuur en Styling van de Interactiviteit van
inhoud webpagina, de website
toevoegen zorgen dat het
er mooi uitziet
Voorbeeld Tekst, foto’s,… Tekstkleur, Dat je iets kan
toevoegen tekstgrote, lay- toevoegen aan je
out,… winkelmandje
Basis opbouw HTML
Vb. element: <openingstag> Hier komt jouw tekst te staan</sluittag>
Elementen die bestaan uit tags & eventueel attributen
Let op: tags moeten altijd uit kleine letters bestaan
Tags staan altijd tussen < en >, en de sluitingstag heeft ook een /
4
Inhoudsopgave
Wat is HTML................................................................................................... 4
Basis opbouw HTML.......................................................................................4
Twee soorten elementen op basis van afsluiting:...........................................................5
Twee soorten elementen op basis van startplaats:.........................................................5
Attributes........................................................................................................................ 5
Verschillende toepassingen van attributes..................................................................5
Nesting.......................................................................................................... 6
Basis tags...................................................................................................... 6
Geavanceerdere opbouw HTML.....................................................................10
Afbeelding bronnen toevoegen.....................................................................................10
Semantiek..................................................................................................................... 11
Waarom semanatische elementen gebruiken............................................................11
Vaste structuur website............................................................................................. 12
Semantische elementen............................................................................................ 12
Toegankelijkheid bij afbeeldingen.................................................................................14
Afbeeldingen en bestandsformaten...........................................................................16
WebP gebruiken........................................................................................................ 17
Toegankelijkheid/accessibility v.e. website....................................................17
Wat is CSS................................................................................................... 18
CSS verbinden met HTML..............................................................................18
1.Inline CSS................................................................................................................... 18
2.Internal CSS............................................................................................................... 19
3.External Style Sheet (gebruiken wij)..........................................................................19
Mappenstructuur in CSS...............................................................................19
CSS reset..................................................................................................... 19
Hard refresh & Caching................................................................................20
DOM Tree..................................................................................................... 20
Erfelijke CSS Elementen Niet-erfelijke elementen.........................................................21
Box model.................................................................................................... 21
Height & Width............................................................................................................. 21
Voorangregels.............................................................................................. 21
Basis opbouw CSS........................................................................................22
Soorten selectors.......................................................................................................... 22
1
, 1.Element selector.................................................................................................... 23
2.ID selector.............................................................................................................. 23
3.Class selector......................................................................................................... 23
5.Pseudo classes selector.............................................................................................24
Selectoren combineren.................................................................................................25
Meet eenheden in CSS..................................................................................................26
Absolute lengths........................................................................................................ 26
Relative lenghts......................................................................................................... 26
Fonts inladen............................................................................................... 27
Web-safe fonts.............................................................................................................. 27
Niet web-safe fonts in bronbestanden bijvoegen..........................................................27
1.Lokale fonts inladen............................................................................................... 27
Basis properties & values CSS.......................................................................28
Kleuren......................................................................................................................... 28
Color: red;................................................................................................................. 28
Background-color: pink;............................................................................................. 28
Lettertype..................................................................................................................... 28
Font-size: 14px;......................................................................................................... 28
Font-family: sans-serif;.............................................................................................. 28
Font-weight: 700; of font-weight: bold;......................................................................29
Font-style: italic;........................................................................................................ 29
Text-decoration: underline;........................................................................................29
Text-allign: center;..................................................................................................... 29
Text-transform: uppercase;........................................................................................ 29
Height: 100 px; & Width: 300 px;..................................................................................29
Border........................................................................................................................... 29
Border: 5px solid #FF0000;.......................................................................................29
Margin/padding......................................................................................................... 30
Margin: 5px;.............................................................................................................. 30
Padding: 5px;............................................................................................................ 30
Youtube videos toevoegen............................................................................................30
Background images...................................................................................................... 31
3 mogelijkheden instellen van de achtergrond:.........................................................31
Background-color...................................................................................................... 31
Opacity...................................................................................................................... 31
Background-image.................................................................................................... 31
Positionering properties & values CSS...........................................................32
Handig om te herhalen voor positionering in CSS.........................................................32
Manieren om element te positioneren..........................................................................33
1.Position property........................................................................................................ 33
Mogelijke waarden “position”....................................................................................34
2.CSS Flexbox............................................................................................................... 35
A.Instellingen voor de container................................................................................35
B.Intellingen voor de items........................................................................................ 38
3.CSS Grid..................................................................................................................... 40
Verschil position property VS Flexbox VS Grid...........................................................40
Terminologie Grid...................................................................................................... 40
Container vs items.................................................................................................... 41
2
, A.Instellingen voor de container................................................................................41
B.Instellingen voor grid-items....................................................................................44
Responsive design.......................................................................................46
Chrome Developer Tools...............................................................................................46
5 guidelines van responsive design..............................................................................46
1.Maak gebruik van relative units.............................................................................46
2.Maak gebruik van breakpoints...............................................................................46
3.Maak gebruik van minimale & maximale breedtes.................................................46
4.Design Mobile First................................................................................................. 47
5.Gebruik geoptimaliseerde afbeeldingen.................................................................47
Media Queries............................................................................................................... 47
Twee delen van een Media Query..............................................................................48
Deeltje per deeltje..................................................................................................... 48
Min- en max waardes van de schermbreedte............................................................49
Reset css code............................................................................................. 50
Typische moeilijkheden.................................................................................52
Header in flexbox met een niet-meewerkende <ul> of <ol>.......................................52
3
, VOLGORDE ALTIJD TE DOEN BIJ OEFENINGEN
1) Per oefening maak je een map
2) Index.html(mag in geen mapje staan), mapje pages, mapje assets
en mapje css
3) In index.html bestand maak je standaardstructuur met !
4) Titel document aanpassen
5) Header, main en footer aanmaken binnen de body
6) In CSS map maak je een bestand style.css en reset.css
7) Kopiëer en plak de reset code in het reset.css bestand
8) Plak onderstaande code in het style.css bestand
html { box-sizing: border-box;}
*, *:before, *:after {box-sizing:inherit;}
9) Link in het index.html bestand, het style.css en reset.css bestand
1.HTML
GoLive: op webpagina te zien. Rechtermuisklik en inspecteren brengt je
naar de code maar aanpassingen die daar gebeuren zijn slechts tijdelijk.
Echte aanpassingen doe je in VS.
Wat is HTML
Seperation of Concers: Er zijn drie codetalen (HTML, CSS en JavaScript),
ze hebben elk hun eigen functie. Zo is het makkelijk om bv. de kleur te
veranderen want dan kan je niet de interactiviteit van de website om zeep
helpen als iets fout zou gaan.
Codetaal HTML CSS JavaScript
Wat Structuur en Styling van de Interactiviteit van
inhoud webpagina, de website
toevoegen zorgen dat het
er mooi uitziet
Voorbeeld Tekst, foto’s,… Tekstkleur, Dat je iets kan
toevoegen tekstgrote, lay- toevoegen aan je
out,… winkelmandje
Basis opbouw HTML
Vb. element: <openingstag> Hier komt jouw tekst te staan</sluittag>
Elementen die bestaan uit tags & eventueel attributen
Let op: tags moeten altijd uit kleine letters bestaan
Tags staan altijd tussen < en >, en de sluitingstag heeft ook een /
4
