4. Divisions en Classes

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

In deze les zitten 25 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

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

Slide 1 - Tekstslide

Week 4 // WEB
Divisions & Classes

Oktober 2021

Slide 2 - Tekstslide

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 3 - Sleepvraag

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

Slide 4 - Open vraag

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

Slide 5 - Quizvraag

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

Slide 6 - Quizvraag

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

Slide 7 - Quizvraag

Sneltoetsen
CTRL + SHIFT + I (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 8 - Tekstslide

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 9 - Tekstslide

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 10 - Tekstslide

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

Slide 11 - Quizvraag

CSS property display: inline of block

Slide 12 - Tekstslide

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 13 - Quizvraag

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


Slide 14 - Tekstslide

Een classes-voorbeeld

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Classes aanspreken in CSS

Slide 18 - Tekstslide

Voorbeeld class 'song'

Slide 19 - Tekstslide

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 20 - Tekstslide

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 21 - Tekstslide

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 22 - Tekstslide

Wrapper

Slide 23 - Tekstslide

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 24 - Tekstslide

Slide 25 - Tekstslide