‹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

Webdesign - Les 2 (22/23)

- Leçon avec 30 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign - Les 3 (23/24): CSS

- Leçon avec 24 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign (6: CSS Grid)

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

HTML & CSS: Opmaak met CSS

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

WEEK 3 - INFORMATICA

- Leçon avec 33 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

01 - CSS - wat is

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1-4

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4