Design      Website

Auke van Slooten

auke@muze.nl

HTML & CSS Basics:
Syntax en Stijl

  • Hoe werkt HTML
  • Wat is een Tag
  • Belangrijke tags
  • Typografie en kleur

Hoe werkt HTML?

Tekst en structuur

Boomstructuur

View source

Inspect Element

Wat is een tag?

 

<tag>

bijvoorbeeld:

<h1> <p> <a> <img> <hr> <div>

 

Atributen

 

<tag atribuut="waarde">

 

bijvoorbeeld:

 

 

<a href="https://simplyedit.io/">

<p class="inleiding">

<img src="kittens.jpg">

Inhoud

<a href="https://ceespot.nl/">
     Welkom bij de Ceespot!
</a>

<p>
      <a href="https://ceespot.nl">
           <img src="logo.png">
      </a>
</p>

Het element:

 

 

<tag attribuut="waarde">

      inhoud

</tag>

 

 

Belangrijke Tags

<a href="https://mijn.website.nl/">Een link (Anchor)</a>

 

<p>Paragraaf</p>
<h1>Heading 1</h1>
<h2> <h3> <h4> <h5> <h6>
<ul><li>Lijsten</li></ul>
<ol><li>Genummerde lijsten</li></ol>
<img src="/img/afbeelding.jpg">

 

<span></span>

<div></div>

Typografie en Kleur

Font

font-size

line-height

font-weight

font-style

font-variant

font-family

 

Units

px pt % em
rem dpx vw vh

Kleur

color

background-color

 

#FFF
#FCFCFC
rgb(128,128,128)
rgba(128,128,128,0.5)
hsl(...)

CSS Selectors

tag:

h1 {
    color: red;
}
<h1>Dit is rood</h1>

CSS Selectors

class:

.important {
    color: red;
}
<h1 class="important">
  Dit is ook rood
</h1>

CSS Selectors

id:

#title {
    color: red;
}
<h1 id="title">
  Dit is ook rood
</h1>

CSS Selectors

combinaties:

h1.important {
    color: red;
}
<h1 class="important">
  Dit is ook rood
</h1>

CSS Selectors

ouder-afhankelijkheid:

main h1 {
    color: red;
}
<main>
  <section>
    <h1>
      Weer rood
    </h1>
  </section>
</main>

http://jgthms.com/web-design-in-4-minutes/

 

https://thimble.mozilla.org/


http://cssreference.io/

 

http://htmlreference.io/

HTML & CSS Advanced:
Structuur en Layout

  • HTML5 pagina structuur
  • Boxmodel
  • Positionering & Flow
  • Quirks

HTML5 pagina structuur

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8">
  </head>
  <body>
    <header>
      <h1>Hello World</h1>
    </header>
    <main>
      <p>Dit is een HTML5 pagina</p>
    </main>
    <footer>
      <p>&copy; 2017</p>
    </footer>
  </body>
</html>

Minimale pagina

<!doctype html>
<html lang="en">
  <head>
    <title>Hello</title>
    <meta charset="utf-8">
  </head>
  <body>
    <header>
      <h1>Hello World</h1>
    </header>
    <main>
      <p>Dit is een HTML5 pagina</p>
    </main>
    <footer>
      <p>&copy; 2017</p>
    </footer>
  </body>
</html>

Inline vs.  Block

Inline

  • Naast elkaar
     
  • Spatiering telt
     
  • Wrapt
     
  • Geen instelbare breedte of hoogte.
     
  • Baseline

 

Block

  • Onder elkaar
     
  • Spatiering verdwijnt
  • Wrapt niet
     
  • Hoogte breedte instelbaar
     
  • Geen Baseline

Box model

Content

Padding

Border

Margin

margin:

  • top right bottom left
  • negative margins
  • margins overlap

 

border:
size style color

 

padding:

% altijd t.o.v. breedte

Box model

Content

Padding

Border

Margin

width: 100%;  ?

Box model

Content

Padding

Border

Margin

box-sizing: content-box; /*default */

Box model

Content

Padding

Border

Margin

box-sizing: border-box; 

Positioning

position: 

  • static
  • absolute
  • relative
  • fixed

 

z-index

top / bottom

left / right

 

Centreren

Tot voor kort geen goede oplossing.

 

Nu wel met flexbox:

#container {
    display: flex;
    align-items: center;
    justify-content: center;
}

let op: geld voor alle kinderen van #container

Flow

float:

  • left
  • right

 

margin

 

modern:

columns, flexbox

Flow quirks

float: left

 

valt buiten container

 

oplossing:

 

overflow: hidden

Flow quirks

float: left

 

beinvloed volgende content.

 

oplossing:

clear: both;

(clear: left/right;)

 

overflow: hidden;


clearfix

Flow quirks

float: left

 

borders en background negeren floated elementen

 

oplossing:

geen

 

pas je html structuur aan

Algemene quirks

 

  • geen standaard start styling:
    gebruik een reset.css of normalize.css
     
  • niet alles is te stijlen, let met name op formulier inputs.
     
  • mobiele devices ondersteunen niet alle css opties, met name 'position: fixed'.
     
  • Mixen van Float, Flexbox en/of Columns levert uitdagingen op :)

Design naar Website

By Auke van Slooten

Design naar Website

  • 1,412