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

• Informatica
• WO
• Studiejaar 4

4V Informatica 19 september

Lid worden van Lessonup-klas

Ga naar www.lessonup.app

Gebruik code: kbdzq

Na de les zijn de presentaties daar terug te kijken

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.

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. 

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;

Je wilt alle items in een ongeordende lijst tekstkleur groen geven. Hoe doe je dat?

1. li { color: green;}
2. ul { color: green;}
3. ol { background-color: green;}
4. table { color: green;}

Welke kleur heeft tekst in de p in de div?

Welke tekstkleur heeft de p in de div?

1. blauw
2. oranje
3. groen
4. rood

Hoe maak je de tekstkleur van alle p en h1-elementen aqua?

1. p {color: aqua;} h1 {color: aqua;}
2. p, h1 {color: aqua;}
3. p + h1 {color: aqua;}
4. color (p, h1) = aqua;

Verbinding html + CSS

selector { property: value; }

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;
}

CSS: 1x opmaak voor meerdere elementen!!!

Deze groen

Deze rood

Classnames

Bekijk de html

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

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!

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!

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

Oplossing: Classnames

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..

CSS: width, height, border, margin, padding

CSS: width, height, border, margin, padding

CSS: o.a. border, margin, padding

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; 
   

Opdracht: Margin, padding, border

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
  

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

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

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

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

Stap 1.2

Dit ziet er in de praktijk zo uit

Stap 1.3

Lelijke witte randjes weghalen

Stap 2

Header stylen. In dit geval: wat hoogte geven

Stap 3.1

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

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

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. 

Stap 4

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

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;

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..

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); 

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

Hoe vond je deze les?

😒🙁😐🙂😃