‹Revenir à la recherche

2 HTML: CSS

Webdesign: CSS
Roland Kok
ro.kok@kw1c.nl
1 / 17
suivant
Slide 1: Diapositive

Cette leçon contient 17 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

Webdesign: CSS
Roland Kok
ro.kok@kw1c.nl

Slide 1 - Diapositive

Herhaling: Structuur van een webpagina

Slide 2 - Diapositive

Herhaling: Structuur van een HTML element

Slide 3 - Diapositive

Hoe werkt CSS?
Een stylesheet maak je in een eigen bestand.

Je slaat het bestand op met de naam style.css.

Je verwijst in al je HTML-pagina's naar de stylesheet.

Slide 4 - Diapositive

Wat is CSS?

Slide 5 - Carte mentale



HyperText Markup Language 






INHOUD & STRUCTUUR 
(paragraph, kopje, links, etc) 



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Diapositive



HTML
HyperText Markup Language 


INHOUD & STRUCTUUR 
(paragraph, kopje, links, etc) 



CSS
Cascading Style Sheets


OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 7 - Diapositive

Waarom CSS?

Slide 8 - Carte mentale

Waarom CSS?
  • Alle opmaak van de website in
      één bestand.
  • Een kleine verandering wordt
      gelijk     doorgevoerd op alle 
      pagina's van je website.
  • Maakt de HTML-code een stuk
     overzichtelijker.


Slide 9 - Diapositive

Hoe werkt CSS?

Slide 10 - Diapositive

Hoe werkt CSS?
Een stylesheet maak je in een eigen bestand.

Je slaat het bestand op met de naam style.css.

Je verwijst in al je HTML-pagina's naar de stylesheet.

Slide 11 - Diapositive

Hoe werkt CSS?
<html>
  <head>
    <title>Dit is de titel van pagina 1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <p>Dit is de eerste alinea van pagina 1</p>
  </body>
</html>

Slide 12 - Diapositive

Hoe is CSS opgebouwd?

Slide 13 - Diapositive












(zonder CSS)








  

  
  style.css
  h1 {color: yellow;}
  p {color: #e88300;}
Voorbeeld

Slide 14 - Diapositive

Voorbeeld
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

p { 
  font-family: verdana; 
  font-size: 18px; 
}

Slide 15 - Diapositive

Opmaak definiëren met selectors
Tag selector (HTML tag)
h2 {
  color: blue;
  font-style: italic;
}
ID selector (een per pagina)
#footer {
  color: red;
}
Class selector (meerdere)
.article {
  background-color: #cccccc;
}

Slide 16 - Diapositive

Aan de slag:
  • Kijk t/m video 4 
  • Maak t/m opdracht 12 (stel evtl vragen in het Q&A document)
  • Verzamel ideen (teksten en plaatjes) voor je Website

Volgende les:
Tabellen


Slide 17 - Diapositive

Plus de leçons comme celle-ci

Beoordeling website Microsoft Sway

- Leçon avec 2 diapositives par Schoolblocks
InformatievaardighedenMiddelbare schoolvmbo t, mavo, havo, vwoLeerjaar 1
SchoolblocksSchoolblocks

Beoordeling website maken Google

- Leçon avec 2 diapositives par Schoolblocks
InformatievaardighedenMiddelbare schoolvmbo t, mavo, havo, vwoLeerjaar 1
SchoolblocksSchoolblocks

The Underground 1

- Leçon avec 20 diapositives par Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

The Underground 4

- Leçon avec 20 diapositives par Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

Critical essay- after rev 1

- Leçon avec 6 diapositives
EngelsMiddelbare schoolvwoLeerjaar 5

Uitleg: The Underground

- Leçon avec 3 diapositives par Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

Prenez le métro! Parijs 5

- Leçon avec 20 diapositives par Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

Word

- Leçon avec 20 diapositives
ICTMiddelbare schoolvmbo b, k, gLeerjaar 1