HTML + CSS les 4: selectors + margins + ontwerp + flexbox

4V Informatica 19 september
1 / 41
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4

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

time-iconLesduur is: 120 min

Onderdelen in deze les

4V Informatica 19 september

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

Na de les kun je...
  • Classes (en id's) gebruiken voor de opmaak van specifieke elementen;
  • werken met margin en padding voor de positie van je elementen ten opzichte van elkaar;
  • een basis-ontwerp voor een website opstellen in blokken en dat uitvoeren m.b.v. flexbox.

Slide 3 - Tekstslide

Herhaling aanpak 4V Informatica
  • Programmeren leer je door het te doen;
  • Veel moet je daarbij zelf ontdekken door de uitleg in Fundament of elders te lezen en uit te proberen;
  • Loop je vast, vraag om hulp bij je buurmens of bij mij.
  • Je hebt relatief veel vrijheid, maar wacht niet totdat ik zeg dat je iets moet doen;
  • Uiteindelijk moet je een eigen website opleveren: verdiep je nu alvast goed in de basis. 

Slide 4 - Tekstslide

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
  • Styling website door apart css-bestand en link hiernaar op te nemen in de head van je html-document
  • In CSS-bestand per selector/ element styling aangeven: selector { property: value; }
  • color voor kleur lettertype
  • background-color/ background-image voor achtergrondkleur of afbeelding
  • font-weight/ font-style/ font-family
  • text-decoration: none/ underline/ overline / line-through;
  • text-align: left/ right/ center;

Slide 5 - Tekstslide

Je wilt alle items in een ongeordende lijst tekstkleur groen geven. Hoe doe je dat?
A
li { color: green;}
B
ul { color: green;}
C
ol { background-color: green;}
D
table { color: green;}

Slide 6 - Quizvraag

Welke kleur heeft tekst in de p in de div?

Slide 7 - Tekstslide

Welke tekstkleur heeft de p in de div?
A
blauw
B
oranje
C
groen
D
rood

Slide 8 - Quizvraag

Hoe maak je de tekstkleur van alle p en h1-elementen aqua?
A
p {color: aqua;} h1 {color: aqua;}
B
p, h1 {color: aqua;}
C
p + h1 {color: aqua;}
D
color (p, h1) = aqua;

Slide 9 - Quizvraag

Verbinding html + CSS

Slide 10 - Tekstslide

selector { property: value; }

Slide 11 - 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: center;
}

Slide 12 - Tekstslide

CSS: 1x opmaak voor meerdere elementen!!!

Slide 13 - Tekstslide

Deze groen
Deze rood
Classnames
Bekijk de html

Hoe kan je ervoor zorgen dat de ene li groen wordt onderstreept maar de andere rood?

Slide 14 - Tekstslide

Deze groen
Deze rood
Classnames
Oplossing?
De li kunnen we groen maken door deze css te gebruiken:
Maar dan worden alle <li> elementen groen..

Oplossing!
gebruik een classname! Of twee!

Slide 15 - Tekstslide

Deze groen
Deze rood
Classnames: in html: class = "naam" / in css: .naam 
Classnames kun je eindeloos hergebruiken!
Het is nu heel makkelijk om alle
belangrijke tekst groen te maken. Je
voegt in de html simpelweg de classname toe en de rest gebeurt vanzelf!

Slide 16 - Tekstslide

Probeer met de basiscode in Replit de hiernaast afgebeelde styling van de linkjes en bullets na te maken.

Werk daarvoor met classnames...

Inleveren via Replit over ongeveer 10 minuten
Opdracht

Slide 17 - Tekstslide

Oplossing: Classnames

Slide 18 - Tekstslide

Dan nog even dit
In Fundament en de tutorials van htmldog leer je dat je classes en id's kan gebruiken.

Het gebruik van id's gaan wij niet doen. Een id gebruik je voor andere dingen..

Slide 19 - Tekstslide

CSS: width, height, border, margin, padding

Slide 20 - Tekstslide

CSS: width, height, border, margin, padding

Slide 21 - Tekstslide

CSS: o.a. border, margin, padding

Slide 22 - Tekstslide

Opdracht: Margin, padding, border
  1. Lees Fundament paragraaf 5.5, 5.6 en 5.7;
  2. Zorg voor styling van het template in Replit; (Margins en padding)
  3. Geef het article-element een breedte van 400px en een margin rondom van 20px en een padding links en rechts van 10px en onder en boven van 20px;
  4. Geef het h3-element een padding en margin rondom van 5px;
  5. Geef de p-elementen aan de bovenkant een margin van 0px, aan de onderkant een margin van 5px en links en rechts 10px en rondom een padding van 10px;
  6. Geef het article-element een zwarte, dotted border van 3px;
  7. Geef het h3-element een rode, solide border van 2px;
  8. Geef de p-elementen een blueviolet, solide border van 1px; 

Slide 23 - Tekstslide

Opdracht: Margin, padding, border

Slide 24 - Tekstslide

Van ontwerp naar html
  • Je kan een semantisch correcte html structuur bouwen met een header, footer en content elementen
  • Je kan deze elementen visueel positioneren zodat het overeen komt met het ontwerp dat je op papier hebt gemaakt

Slide 25 - Tekstslide

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!
  4. Gebruik echte teksten!

Zo kan een schets eruit zien

Slide 26 - Tekstslide

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

Stel, je hebt een layout, maar hoe begin je nou?

In (ongeveer) 4 stappen:
  1. Juiste html schrijven
  2. Header styling
  3. Content en navigatie styling
  4. Footer styling

Slide 27 - Tekstslide

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

<header>
<div>
<footer>
Stap 1.1

Opbreken grove blokken

Slide 28 - Tekstslide

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

<header>



   <article>
<footer>


   
   <nav>



   <aside>
<div>
Stap 1.2

Waar nodig de blokken opbreken in blokken

Slide 29 - Tekstslide

Stap 1.2

Dit ziet er in de praktijk zo uit

Slide 30 - Tekstslide

Stap 1.3

Lelijke witte randjes weghalen

Slide 31 - Tekstslide

Stap 2

Header stylen. In dit geval: wat hoogte geven

Slide 32 - Tekstslide

Stap 3.1
Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar. 

Slide 33 - Tekstslide

Flexbox
  1. Plaats je elementen in een 'container' of 'wrapper'
  2. Maak van je container een flexbox via display: flex;
  3. Geef de juiste richting aan met flex-direction: row/ column
  4. Gebruik eventueel justify-content en align-items om de elementen in je container te uit te lijnen; 
  5. Oefenen met flexbox via flexbox froggy

Slide 34 - Tekstslide

Stap 3.2
We geven het nav en article element een width. vw staat voor ViewWidth = breedte van het scherm betekent. 20vw is dus 20% van breedte van scherm. 

Slide 35 - Tekstslide

Stap 4
Footer positioneren door deze fixed te positioneren. De footer mag ook wat meer hoogte gebruiken. En wat doet position:fixed eigenlijk?

Slide 36 - Tekstslide

Opdracht: flexbox
  • Maak het voorbeeld van Fundament 5.12 na via het template in Replit;
  • Kijk goed hoe de containers zijn geplaatst;
  • Voeg in CSS op de juiste plekken display: flex; en flex-direction: row; of flex-direction: column; toe...
  • Pas zonodig ook margin en padding aan;
  • Klaar? Oefen met flexbox-froggy;
timer
10:00

Slide 37 - Tekstslide

Layout maken
Verdeel je layout in drie "blokken". Gebruik daarvoor eventueel deze les

  • Header: het menu? Een mooi plaatje?
  • Article: het verhaal: tekst, plaatjes, filmpjes etc..
  • Footer: titel, plaatje etc..

Slide 38 - 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 39 - Tekstslide

Huiswerk 26/9
Bestudeer Fundament A.2: 5.1 t/m 5.8
Maak opdr. 5.12 in Fundament m.b.v. Flexbox en template in Replit

Slide 40 - Tekstslide

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 41 - Poll