HTML + CSS les 3: introductie CSS

  • Je weet wat een css stylesheet is
  • Je kan cs selectors, properties en values toepassen op html elementen
1 / 28
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

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

time-iconLesduur is: 45 min

Onderdelen in deze les

  • Je weet wat een css stylesheet is
  • Je kan cs selectors, properties en values toepassen op html elementen

Slide 1 - Tekstslide

Lid worden van Lessonup-klas
Ga naar www.lessonup.app
Gebruik code: kbdzq
Na de les zijn de presentaties daar terug te kijken

Slide 2 - Tekstslide

Wat doet deze code?
<img src="afbeelding.png" alt="" height="100">
A
Niets, want width ontbreekt
B
Niets, want alt heeft geen value gekregen
C
Het plaatst een plaatje op je website
D
Niets, want het heeft geen closing tag

Slide 3 - Quizvraag

Met welk element maak je een genummerde lijst?
A
<ul>
B
<li>
C
<p>
D
<ol>

Slide 4 - Quizvraag

Welk element gebruik je voor een invoerveld van meerdere regels?
A
<input type="radio">
B
<textarea>
C
<input type="text">
D
<table>

Slide 5 - Quizvraag

Heb je je wachtwoord voor Fundament al gewijzigd?
A
ja
B
nee

Slide 6 - Quizvraag

Terugblik vorige les
  • Basis van een website is html-bestand (of meerdere...)

  • Inhoud van website moet in HTML-elementen
  • HTML-elementen hebben opening- en closing-tags
  • Commentaar via <!-- dit is commentaar -->
  • Geen Windows-computer??? Gebruik Replit!
  • afbeeldingen via <img src="afbeelding.png" alt="" width="100" height="">
  • video's embedden via <iframe src="video.mpg">
  • ongeordende lijsten via <ul><li>item 1</li><li>item2</li></ul>
  • geordende lijsten via <ol><li>item 1</li><li>item2</li></ol>
  • tabellen via <table><tr><td>cel1</td></tr></table>
  • inputvelden via <form><input type="text" placeholder="Uw naam"></form>

Slide 7 - Tekstslide

Vandaag: opmaak toevoegen aan je website via CSS
Dit is wat we nu aan het doen zijn. Onze "lelijke" html gaan we opmaken met css

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

:
Waar gaan we dan die css typen?
Je bent al bezig of misschien zelfs al klaar met de html tutorial(s) op htmldog.com. Dat is belangrijk, want we moeten wel iets hebben om te stylen.


Met dit stukje code geef je aan welk css bestand we gaan gebruiken.
1
Hier staat het css bestand
2

Slide 12 - Tekstslide

:
Zelf css typen
Als je het bestand opent krijg je alvast wat css te zien (2)

We halen al deze css weg en typen wat anders:




Replit maakt automatisch al een beetje css voor je. Dat halen we weg.
2
Je kan zien dat we het bestand geselecteerd hebben
1
Wat gebeurt er?

Slide 13 - Tekstslide

:
Zelf css typen
Als we de css hebben aangepast en we drukken weer op Run (1) dan zien we dat er wat is veranderd aan onze website (2)
Je ziet dat de tekst in het <p> element groen is geworden en dat de tekst in beide <h2> elementen rood is geworden
2
1

Slide 14 - Tekstslide

Maar wat staat er nou eigenlijk?
De p is de selector. Hiermee selecteer je op welke elementen je de stijl wil toepassen 
De color is de property. Dat is de eigenschap die je wil aanpassen.
green is de value. De waarde die je de property wil geven.
Alles bij elkaar staat hier dat we alle <p> elementen de kleur groen willen geven en all <h2> elementen de kleur blauw.

Slide 15 - Tekstslide

:
3. In een apart css bestand
1. In de html
Drie plekken om css te schrijven
2. In een apart css element
In de tutorial wordt als eerste uitgelegd waar je allemaal css kan typen. Aangezien wij alleen css in een css bestand gaan typen, en niet inline omdat we geen barbaren zijn, kunnen de andere methoden gewoon overslaan.

Slide 16 - Tekstslide

Vandaag: opmaak toevoegen aan je website
  • Bestudeer de uitleg over CSS in paragraaf A.4 Opmaak met 
  • Maak de code na/ Kopieer de code in je eigen bestand;
  • Doe dit in onze team-omgeving in Replit (zie instructies in Classroom);
  • Ga verder met de opdracht in Fundament bij paragraaf 4.9 (gebruik daarvoor de template op Replit)
  • Klaar? Lever het in via Replit;
  • Ga verder met htmldog (Beginner Tutorial); 

Slide 17 - Tekstslide

CSS: o.a. kleur, lettertype, achtergrond
p {
    font-size: 32px;
    color: white;
    background-color: #009;
    font-family: Verdana;
    font-weight: bold;
    font-style: italic;
    text-align: centre
}

Slide 18 - Tekstslide

CSS: 1x opmaak voor meerdere elementen!!!

Slide 19 - Tekstslide

CSS: image als achtergrond...

Slide 20 - Tekstslide

CSS: pseudoklasse voor hover-effect

Slide 21 - Tekstslide

CSS: o.a. border, margin, padding

Slide 22 - Tekstslide

CSS: o.a. border, margin, padding

Slide 23 - Tekstslide

Ik kan in css een selector voor meerdere elementen maken
A
Dat kan ik!
B
Ik kan dat niet :(
C
Misschien kan ik het een beetje

Slide 24 - Quizvraag


De value in deze code is...?
A
li
B
border
C
1px solid red

Slide 25 - Quizvraag

De property en de selector zijn dan dus:

Slide 26 - Open vraag

Huiswerk 19/9
Bestudeer Fundament A.2 onderdeel 4
lever uitwerking www.htmldog.com in
Maak opdracht 4.9 in Fundament

Slide 27 - Tekstslide

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 28 - Poll