HTML & CSS 05 - 4.4 tmt 4.9 - CSS kleuren, hyperlinks, lijsten, tabellen, valideren

• Informatica
• WO
• Studiejaar 4,5

                      HTML & CSS

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 4.4 tmt 4.9

https://fundament-online.nl/leeromgeving/content.php?id=49035

Leerdoelen:

Na deze les kun je:

1. beschrijven hoe je kleuren op 3 manieren in CSS opgeeft
   
2. 3 CSS eigenschappen van tekst weergeven
   
3. uitleggen wat :hover in CSS doet
   
4. 3 CSS eigenschappen van een tabel beschrijven
   
5. beschrijven hoe je selectoren in CSS combineert
   
6. een hyperlink opmaken met CSS (welke tag het betreft)

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

CSS: 3 methoden

1. external
   
   
2. internal
   
   
3. inline
   

Je kunt alle 3 manieren naast elkaar gebruiken

CSS: opmaak internal/external

De opmaak van internal en external is gelijk:

selector {

      eigenschap: waarde;

      eigenschap: waarde;

}

Elke regel binnen de { } eindigt op een ;

CSS: opmaak inline

De inline opmaak is anders...

maar ook een beetje hetzelfde 

style=" eigenschap: waarde; eigenschap: waarde; "

• Elke eigenschap: waarde regel eindigt met een ;
• Inline CSS geldt alleen voor dat element
  ( vgl interne en externe CSS geldt voor die selector(en) )

CSS: opmaak

Met CSS kun je de opmaak aanpassen van HTML elementen het verschilt per element wat er precies aan te passen is:

zo heeft bv. Tekst font-size, maar een achtergrond niet

Voorbeelden van eigenschappen zijn:

• lettertype, -grootte, uitlijning van de tekst, etc.
• kleuren (achtergrond, letters, etc)
• afstanden (marges, padding)           en nog veel meer!
  

CSS: opmaak met IDE

Er zijn dus veel eigenschappen om uit te kiezen

Je hoeft niet alle eigenschappen uit je hoofd te kennen (maar wél die in deze les met onthouden zijn aangegeven)

   Een goede IDE 

   geeft suggesties!
   (autocomplete)

CSS: tekst: font

Voor tekst kun je veel opmaak toepassen, zoals:

• font-family
  
• font-size
• font-weight
  
• color
  
• etc.
  

CSS: color (onthouden)

Met color geef je aan wat de kleur van de tekst is

Met background-color geef je de achtergrond kleur aan

Er zijn een in HTML en CSS drie verschillende manieren om kleuren aan te duiden:

• RGB-waarde (Red, Green, Blue)
• #hexadecimaal
  
• keyword (naam)

CSS: RGB

RGB-waarde (Red, Green, Blue) is een mengsel van de drie kleuren: rood, groen en blauw.

Elk heeft een waarde tussen 0 en 255:

0 : geen kleur

255: maximale kleur

CSS: RGB

RGB-waarde (Red, Green, Blue) is een mengsel van de drie kleuren: rood, groen en blauw.

Elk heeft een waarde tussen 0 en 255:

0 : geen kleur

255: maximale kleur

Vraag: hoeveel combinaties zijn er mogelijk?

CSS: RGB

RGB-waarde (Red, Green, Blue) is een mengsel van de drie kleuren: rood, groen en blauw.

Elk heeft een waarde tussen 0 en 255:

0 : geen kleur

255: maximale kleur

Vraag: hoeveel combinaties zijn er mogelijk?

256 × 256 × 256 

= 16.777.216

CSS: Hexadecimale waarde 1/2

Een hexadecimale waarde bestaat uit 6 karakters

Elk karakter is een cijfer 0 - 9, of een letter a,b,c,d,e,f

#000000 = zwart

#ffffff = wit

#c0c0c0 = grijs

CSS: Hexadecimale waarde 2/2

6 karakters tussen 0 en F... 

zie je het verband tussen RGB en Hex?

CSS: keywords (naam)

Er zijn 140 unieke keywords om kleuren aan te geven in CSS

CSS: keywords (naam)

Er zijn 140 unieke keywords om kleuren aan te geven in CSS

maar RGB heeft 16.777.216 variaties (256^3)

CSS: keywords (naam)

Er zijn 140 unieke keywords om kleuren aan te geven in CSS

maar RGB heeft 16.777.216 variaties (256^3)

en hexadecimaal ook! 00 = 0 en FF = 255

CSS: hover (onthouden)

Met CSS kun je ook dingen doen die je niet direct met HTML kunt doen, zoals bijvoorbeeld aangeven hoe iets reageert als de muis er overheen gaat

Dat doe je met :hover

Opdracht #1

1. Maak een HTML met onderstaande <p> code
2. Pas deze aan met een inline CSS 
   
   zodat de pagina er als onderstaand uit komt te zien:

Je mag zoeken in w3schools.com

Kijk goed en bedenk welke eigenschap(pen) het zijn!

CSS: tags

CSS gebruikt zgn. selectoren

er zijn meerdere selectoren, maar het meest gebruikt zijn:

• tag selector
  
  
• id selector

CSS: selector combo

Je kunt ook selectoren combineren met een , 

Je kunt een element ook meerdere keren laten terugkomen zoals <p> hieronder:

                                 

CSS: selector combo

Je kunt ook selectoren combineren met een , 

Je kunt een element ook meerdere keren laten terugkomen zoals <p> hieronder:

                                Vraag: als je van 1 element dezelfde

                                eigenschap drie keer aanpast... 

                                welke zou CSS dan gebruiken?

Als je in CSS dezelfde eigenschap
van 1 element 3 keer aanpast...
welke gebruikt CSS dan?

1. eerste CSS regel
2. tweede CSS regel
3. derde CSS regel
4. wat is CSS?

Opdracht #1

1. Maak een HTML met internal CSS stijl
2. Gebruik een p element dat je twee kleuren geeft
3. Kijk welke kleur daadwerkelijk te zien is

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

CSS: hyperlink

De <a> tag (= anchor tag) gebruikten we voor hyperlinks

Standaard worden die in HTML blauw en onderstreept weergegeven, maar dat kun je met CSS aanpassen

:hover kunnen we ook gebruiken bij het a element:

CSS: lijsten

We zagen in een eerdere les dat we via type="A" een lijst konden omzetten naar een A B C lijst

Met CSS kunnen we nog meer opmaak toevoegen aan een lijst, zoals achtergrond kleur.... maar CSS kan ook meer bijzondere dingen, zoals ...

CSS: lijsten

AUTOMATISCH elke oneven <li> een kleur geven...

(dit hoef je niet uit je hoofd te kennen, maar je moet wel weten dat het kan)

CSS: schaduw

Ook kan CSS coole dingen doen, zoals een schaduw geven aan een element (zoals een tabel of afbeelding)

CSS: tabellen (onthouden)

De voornaamste eigenschappen bij tabellen zijn:

• border                border: 1px solid black;
• border-collapse   border-collapse: collapse;
• height                 height: 100px;
• width                  width: 100px;
• color                   color: #000000;

validatie

Om je code te kunnen controleren (de browser geeft bijna nooit een zichtbare foutmelding!) kun je je code valideren

Met valideren controleer je je code op validiteit

Dit kun je onder andere doen op 

https://www.w3schools.com/w3css/w3css_validation.asp

Opdracht #1

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Leerdoelen

Je kunt:

• beschrijven hoe je kleuren op 3 manieren in CSS opgeeft
  
• 3 CSS eigenschappen van tekst weergeven
  
• uitleggen wat :hover in CSS doet
  
• 3 CSS eigenschappen van een tabel beschrijven
  
• beschrijven hoe je selectoren in CSS combineert
  
• een hyperlink opmaken met CSS (welke tag het betreft)

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6