‹Revenir à la recherche

Webdesign - Les 3 (23/24): CSS

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 24
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 24 diapositives, avec diapositives de texte.

time-iconLa durée de la leçon est: 30 min

Éléments de cette leçon

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl

Slide 1 - Diapositive

Vorige les: 

Fundament: HTML & CSS (A2)
* t/m hoofdstuk 4 (Multimedia)
* vraag 1 t/m 3 van hoofdstuk 4.9
YouTube:
* Kijk t/m video 4 (zie Google Classroom)


Slide 2 - Diapositive

Herhaling: 
Structuur van een webpagina

Slide 3 - Diapositive

Herhaling: 
Structuur van een HTML element

Slide 4 - 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 5 - Diapositive



HyperText Markup Language 






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



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Diapositive

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

Hoe werkt CSS?
  • Maak een nieuw bestand in je editor.

  • Sla het nieuwe bestand op als CSS formaat (b.v. opmaak.css).

  • Verwijs in al je HTML-pagina's naar het stylesheet.

Slide 8 - Diapositive

Hoe werkt CSS?
(zie ook w3schools.com/css)

Slide 9 - Diapositive

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


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

Slide 10 - Diapositive













(zonder CSS)








 
   h1 {color: yellow;}
   p {color: #e88300;}
Voorbeeld 1

Slide 11 - Diapositive

Voorbeeld 2
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

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

Slide 12 - 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 13 - Diapositive

Van ontwerp naar HTML & CSS

Slide 14 - Diapositive

Ontwerp

Bij het ontwerpen van een website moet
je vaak denken in de vorm van tabellen.

Als je een ruwe schets maakt van een website dan
bestaat een website vaak uit verschillende blokken.

Slide 15 - Diapositive

Ontwerp

Slide 16 - Diapositive

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

<header>
<div>
<footer>
<header>...</header>

<div>...</div>

<footer>...</footer>
1. Grove blokken:

Slide 17 - Diapositive

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

<aside>
<article>
<nav>
<div>
<header>
<footer>
<header>...</header>

<nav>...</nav>

<article>...</article>

<aside>...</aside>

<footer>...</footer>
2. Waar nodig
opbreken in
kleinere blokken:

Slide 18 - Diapositive

CSS grid

layout in HTML & CSS

Slide 19 - Diapositive

Voorbeeld: Layout

Slide 20 - Diapositive

HTML


CSS


<div id="grid-container">

  <div id="kop">
    De kop
  </div>
  <div id="midden">
    Het midden
  </div>
  <div id="voet">
    De voet
  </div>

</div>

#kop {
  grid-area: kop;
} 
#midden {
  grid-area: midden;
} 
#voet {
  grid-area: voet;
} 

#grid-container { 
  display: grid; 
  grid-template-areas:
    'kop'
    'midden'
    'voet';
} 

Slide 21 - Diapositive

Grid areas


Grid container


#kop {
  grid-area: kop;
} 
#kopafbeelding {
  grid-area: kopafbeelding;
} 
#midden {
  grid-area: midden;
} 
#middenlinks {
  grid-area: links;
} 
#middenrechts {
  grid-area: rechts;
} 
#voet {
  grid-area: voet;
} 
#grid-container { 
  display: grid; 
  grid-template-areas:
    'kop kop kopafbeelding'
    'links midden rechts'
    'voet voet voet';
} 
kop
kop
kopafbeelding
links
midden
rechts
voet
voet
voet

Slide 22 - Diapositive

Afstand tussen grid-items
Drie mogelijkheden:

  • grid-column-gap 
  • grid-row-gap
  • grid-gap
.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Slide 23 - Diapositive

Aan de slag:
Fundament: HTML & CSS (A2)
* t/m hoofdstuk 5 (Werken met blokken)
* vraag 1 van hoofdstuk 5.12

W3Schools
* CSS Grid Layout Module (w3schools.com/css/css_grid.asp)


Slide 24 - Diapositive

Plus de leçons comme celle-ci

Webdesign (6: CSS Grid)

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

6 HTML: Lay-outs

- Leçon avec 18 diapositives

04 - CSS - selectoren

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2

2 HTML: CSS

- Leçon avec 17 diapositives

02 - CSS - selectoren

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1-4

HTML + CSS les 4: selectors + margins + ontwerp + flexbox

- Leçon avec 41 diapositives
InformaticaWOStudiejaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Leçon avec 22 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

BBL Week 4

- Leçon avec 12 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2