‹Terug naar zoeken

2 HTML: CSS

Webdesign: CSS
Roland Kok
ro.kok@kw1c.nl
1 / 17
volgende
Slide 1: Tekstslide

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

Onderdelen in deze les

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

Slide 1 - Tekstslide

Herhaling: Structuur van een webpagina

Slide 2 - Tekstslide

Herhaling: Structuur van een HTML element

Slide 3 - Tekstslide

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

Wat is CSS?

Slide 5 - Woordweb



HyperText Markup Language 






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



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Tekstslide



HTML
HyperText Markup Language 


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



CSS
Cascading Style Sheets


OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 7 - Tekstslide

Waarom CSS?

Slide 8 - Woordweb

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

Hoe werkt CSS?

Slide 10 - Tekstslide

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

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

Hoe is CSS opgebouwd?

Slide 13 - Tekstslide












(zonder CSS)








  

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

Slide 14 - Tekstslide

Voorbeeld
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

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

Slide 15 - Tekstslide

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

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

Meer lessen zoals deze

Webdesign - Les 2 (22/23)

- Les met 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign - Les 3 (23/24): CSS

- Les met 24 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign (6: CSS Grid)

- Les met 15 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

HTML & CSS: Opmaak met CSS

- Les met 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

WEEK 3 - INFORMATICA

- Les met 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

CSS

- Les met 15 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

CSS

- Les met 15 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

CSS_ALA_webdesign 1

- Les met 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1