4. Divisions en Classes

WEB
Webdevelopment-I (WDV-I)
Les 4 / Week 4
Divisions en Classes
1 / 27
next
Slide 1: Slide
Software Developer [WEB_A]MBOStudiejaar 1

This lesson contains 27 slides, with interactive quizzes and text slides.

Items in this lesson

WEB
Webdevelopment-I (WDV-I)
Les 4 / Week 4
Divisions en Classes

Slide 1 - Slide

Week 4 // WEB
Divisions & Classes

Oktober 2021

Slide 2 - Slide

Hoe link ik een externe stylesheet aan mijn pagina (je mag cheaten door het even te googlen)

Slide 3 - Open question

Hoe kan ik mijn gehele header een lettertype 'Verdana' geven en de kleur van de letters op groen?
:
:
(
}
)
{
header
font
text-color
Verdana
green
font-family
color
;
;

Slide 4 - Drag question

Op welke manier kan ik mijn a-element een dubbele rand geven van 3 pixel dikte en met de kleur oranje.

Slide 5 - Open question

Hoe noem ik de groene stippels om het element heen?
A
Content
B
Padding
C
Border
D
Margin

Slide 6 - Quiz

Hoe noem ik de ruimte tussen de tekst 'Link2' en de groene stippels?
A
Content
B
Padding
C
Border
D
Margin

Slide 7 - Quiz

Hoe noem ik de ruimte tussen de elementen?
A
Content
B
Padding
C
Border
D
Margin

Slide 8 - Quiz

Slide 9 - Slide

Sneltoetsen
CTRL + SHIFT + J (in browser): Inspecteren van je code 
CTRL + SHIFT + R: Refreshen van je browser
CTRL + / (in editor): code-regel wordt in comment gezet of uit comment gehaald.
CTRL + X: knippen, CTRL + C: kopiëren, CTRL + V: plakken
tab: 1 tab verder naar rechts uitlijnen (in HTML als de verhouding parent tot child)
SHIFT + tab: 1 of meerdere regels 1 tab verder naar links uitlijnen.

Slide 10 - Slide

display: block
  • Voor het betreffende element wordt de gehele ingestelde breedte (width) ingenomen.
    Als de breedte (width) van het betreffende blok/kamer niet is ingesteld wordt hier standaard het gehele blok (hele regel dus) gevuld. 
  • Handig als we een lijstje willen met items onder elkaar (en niets ernaast), 
  • Niet handig als we een navigatiebalk willen met meerdere links naast elkaar. 
  • Met inspecteren in onze browser (CTRL + SHIFT + J) kunnen we door over een element te hooveren goed zien welk deel van de pagina ingenomen wordt door een element.
  • Een block is handig als we de volledige breedte van een kamer willen gebruiken.
  • Standaard krijgen de volgende HTML-elementen een display: block:
<h1> t/m <h6>, <p>,  <li>,  <div>,  <main>, <footer>, <section>

Slide 11 - Slide

display: inline
  • Elementen binnen hun kamer verschuiven
  • De sectie reikt van 1e tot laatste letter van de content (uit te breiden met padding).
  • Naast element is nog ruimte voor ander element.

Slide 12 - Slide

Wat is een logische display voor mijn <a>-element op een navigatiebalk?.
A
inline
B
block
C
position
D
fixed

Slide 13 - Quiz

CSS property display: inline of block

Slide 14 - Slide

Als ik een element over de volledig ingestelde breedte wil laten zien gebruik ik property:
A
text-align: center
B
display: inline
C
display: block
D
width: 100px;

Slide 15 - Quiz

Classes
Onze site bestaat uit kamers (divisions).
Op die kamers kunnen we losse eigenschappen toepassen als we er een class aan toekennen.


Slide 16 - Slide

Een classes-voorbeeld

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Classes aanspreken in CSS

Slide 20 - Slide

Voorbeeld class 'song'

Slide 21 - Slide

Opdracht 4.2: werkblad classes
Je krijgt een werkblad met opdrachten waarbij je classes zult moeten aangeven of zult moeten
toekennen. Het kan ook zijn dat je CSS-waarden moet toevoegen aan bepaalde classes.

Slide 22 - Slide

Opdracht 4.3: pagina met classes
Laten we aan onze hobbies.html-pagina eens wat classes toevoegen (in project ‘myportfolio’) een aantal classes toevoegen. Op die manier kunnen we meerdere soortgelijke elementen op dezelfde manier stijlen.
1. Denk na over drie hobby’s die je hebt. Die gaan we hierna gebruiken.
2. Als je dit nog niet gedaan had zet je de basisstructuur op en kopieer je de gegevens uit de header van de ‘index.html’ naar’ hobbies.html. Doe dit ook voor de footer.
3. Check of je stylesheet gelinkt is met een linkelement in de head.
4. We gaan aan de slag in de main.
5. Voeg in de main een h2 toe met de tekst ‘Hobbies’
6. Voeg onder het h2-element een division met class ‘hobby’ toe. (typ ‘.div’ en druk op tab).
7. Zet in de div:
• Een h3 met daarin jouw eerste hobby.
• Voeg hieronder een p toe met daarin een beschrijving van jouw hobby. Sluit de div af met </div>
• Voeg tot slot een afbeelding toe van jouw hobby
• Sluit de div. af met </div>
8. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.
9. Ga naar je style.css en spreek de class ‘.hobby’ aan.
10. Geef de class een border van 1px double grey en een breedte van 300px.
11. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.
12. Geef de class een padding van 10px.
13. Check je resultaten tussentijds steeds in de browser.

1. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.
2. Ga naar je style.css en spreek de class ‘.hobby’ aan.
3. Geef de class een border van 1px double grey en een breedte van 300px.
4. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.
5. Geef de class een padding van 10px.
6. Check je resultaten tussentijds steeds in de browser.

Slide 23 - Slide

Id's
  • Kan hetzelfde als een class.
  • Id kun je maar 1x gebruiken.
  • Veel gebruikt bij JavaScript.
  • Wij gebruiken classes bij stylen van pagina's

Slide 24 - Slide

Wrapper

Slide 25 - Slide

Opdracht 4.4: een wrapper toevoegen en display aanpassen

1. Voeg direct onder de header, main en footer een div class met naam ‘wrapper’ toe en sluit hem af precies vóór de eindtag van alle drie de sitedelen. Let op het indenten.
2. Vervang het body-element in CSS door .wrapper met een width van 968px en een margin: 0 auto.
3. Check of de achtergrond voor de header en footer en voor de main nog is ingesteld.
4. De webpagina is nu in het midden uitgelijnd, terwijl de achtergrond de hele breedte van de pagina vult.



Slide 26 - Slide

Slide 27 - Slide