‹Terug naar zoeken

Webdesign (3: CSS)

Webdesign: CSS
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 16
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

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

time-iconLesduur is: 30 min

Onderdelen in deze les

Webdesign: CSS
Antje Roestenburg
a.roestenburg@minkema.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



HTML
HyperText Markup Language 


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



CSS
Cascading Style Sheets


OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Tekstslide

Waarom CSS?

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

Hoe werkt CSS?

Slide 9 - 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 10 - 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 11 - Tekstslide

Hoe is CSS opgebouwd?

Slide 12 - Tekstslide













(zonder CSS)








  

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

Slide 13 - Tekstslide

Voorbeeld
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

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

Slide 14 - 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 15 - 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 16 - Tekstslide

Meer lessen zoals deze

Beoordeling website Microsoft Sway

- Les met 2 slides door Schoolblocks
InformatievaardighedenMiddelbare schoolvmbo t, mavo, havo, vwoLeerjaar 1
SchoolblocksSchoolblocks

Beoordeling website maken Google

- Les met 2 slides door Schoolblocks
InformatievaardighedenMiddelbare schoolvmbo t, mavo, havo, vwoLeerjaar 1
SchoolblocksSchoolblocks

Paragraaf 4.4 t/m 4.6

- Les met 23 slides
Dienstverlening en ProductenMiddelbare schoolvmbo kLeerjaar 4

The Underground 1

- Les met 20 slides door Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

The Underground 4

- Les met 20 slides door Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

Critical essay- after rev 1

- Les met 6 slides
EngelsMiddelbare schoolvwoLeerjaar 5

Uitleg: The Underground

- Les met 3 slides door Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids

Prenez le métro! Parijs 5

- Les met 20 slides door Dé Schoolreisgids
Middelbare schoolvmbo, mavo, havo, vwoLeerjaar 1-6
Dé SchoolreisgidsDé Schoolreisgids