‹Terug naar zoeken

Webdesign - Les 3 (23/24): CSS

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

In deze les zitten 24 slides, met tekstslides.

time-iconLesduur is: 30 min

Onderdelen in deze les

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl

Slide 1 - Tekstslide

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

Herhaling: 
Structuur van een webpagina

Slide 3 - Tekstslide

Herhaling: 
Structuur van een HTML element

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



HyperText Markup Language 






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



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 6 - Tekstslide

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

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

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

Slide 9 - Tekstslide

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













(zonder CSS)








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

Slide 11 - Tekstslide

Voorbeeld 2
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

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

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

Van ontwerp naar HTML & CSS

Slide 14 - Tekstslide

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

Ontwerp

Slide 16 - Tekstslide

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

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

CSS grid

layout in HTML & CSS

Slide 19 - Tekstslide

Voorbeeld: Layout

Slide 20 - Tekstslide

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

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

Afstand tussen grid-items
Drie mogelijkheden:

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

Slide 23 - Tekstslide

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

Meer lessen zoals deze

Webdesign (6: CSS Grid)

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

6 HTML: Lay-outs

- Les met 18 slides

Webdesign - Les 2 (22/23)

- Les met 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

2 HTML: CSS

- Les met 17 slides

04 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1,2

02 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1-4

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

- Les met 41 slides
InformaticaWOStudiejaar 4

Week 5 - Les 1

- Les met 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 2