‹Return to search

Webdesign - Les 3 (23/24): CSS

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

This lesson contains 24 slides, with text slides.

time-iconLesson duration is: 30 min

Items in this lesson

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl

Slide 1 - Slide

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

Herhaling: 
Structuur van een webpagina

Slide 3 - Slide

Herhaling: 
Structuur van een HTML element

Slide 4 - Slide

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



HyperText Markup Language 






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



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Slide

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

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

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

Slide 9 - Slide

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













(zonder CSS)








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

Slide 11 - Slide

Voorbeeld 2
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

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

Slide 12 - Slide

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

Van ontwerp naar HTML & CSS

Slide 14 - Slide

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

Ontwerp

Slide 16 - Slide

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

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

CSS grid

layout in HTML & CSS

Slide 19 - Slide

Voorbeeld: Layout

Slide 20 - Slide

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

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

Afstand tussen grid-items
Drie mogelijkheden:

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

Slide 23 - Slide

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

More lessons like this

Webdesign (6: CSS Grid)

- Lesson with 15 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

6 HTML: Lay-outs

- Lesson with 18 slides

2 HTML: CSS

- Lesson with 17 slides

04 - CSS - selectoren

- Lesson with 15 slides
ICTMBOStudiejaar 1,2

02 - CSS - selectoren

- Lesson with 15 slides
ICTMBOStudiejaar 1-4

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

- Lesson with 41 slides
InformaticaWOStudiejaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Lesson with 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Week 5 - Les 1

- Lesson with 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 2