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>© 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>© 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 :)