coderdojo rotterdam #1 | introductie html / css

18
“Above All: Be Cool“ HTML / CSS CoderDojo Rotterdam

Upload: coderdojo-rotterdam

Post on 12-Jun-2015

330 views

Category:

Technology


1 download

DESCRIPTION

Wat is HTML en hoe kan ik met CSS mijn HTML opmaken om een website te bouwen? Je kunt het allemaal terug lezen in deze presentatie, gegeven op CoderDojo Rotterdam #1

TRANSCRIPT

Page 1: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

HTML / CSSCoderDojo Rotterdam

Page 2: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Wat is HTML?

Plain-Text.txt

Page 3: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Wat is HTML?

Rich-Text.doc

Page 4: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Wat is HTML?H y p e r

T e x t

M a r k u p

L a n g u a g e

Page 5: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Nesting

Soms horen dingen bij elkaar, deze kun je dan “nesten”.

Page 6: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

<h1>De HTML-tag</h1>

➔ Een tag vertelt wat over de inhoud

➔ Het attribuut geeft extra info

<hoofd><ogen>

<oog></oog><oog></oog>

</ogen><neus></neus><mond>

<lippen></lippen></mond>

</hoofd>

Page 7: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Zelf proberen!

Maak een beschrijving van je cd collectie in XML.

Let op NESTING en TAGS!

➔ <verzameling>

➔ <eigenaar>

➔ <artiesten>

➔ <artiest>

➔ <album>

➔ <liedje>http://pastebin.com/AWMCWdVd

Page 8: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Headers:<h1>, <h2>, <h3>

Paragraaf:<p>

Links:<a href=”http://google.nl”>

Echte HTML

Plaatjes:<img src=”plaatje.jpg”/>

Lijstjes:<ul>

<li>lijst item</li></ul><ol>

<li>lijst item</li></ol>Zelf doen!

Page 9: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Opmaken met CSS

Page 10: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Termen die je moet kennen

Selector { property: waarde;}

p {color: black;

}

Page 11: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Selectors

Elementen

h1 { color: black;}p { color: black;}ul { color: black;}

Classes

.zwart { color: black;}

ID’s

#uitleg { color: black;}

LET OP! Een ID mag maar één keer gebruikt worden in de HTML

Page 12: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

In de HTML

<p class=”zwart” id=”uitleg”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet id dolor nec hendrerit. Praesent porttitor pulvinar erat, volutpat porta neque egestas id.

</p>

Wat is het ELEMENT?Wat is de CLASSE?

Wat is de ID?

Page 13: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Alles bij elkaar

HTML

<p class=”blauw”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet id dolor nec hendrerit. Praesent porttitor pulvinar erat, volutpat porta neque egestas id.

</p>

CSS

.blauw {color: blue;

}

Page 14: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

1. Linken

<link href="style.css" type="text/css">

2. In header (BAH!)

<style type="text/css">

p {color: black;}

<style>

3. Inline (BAH BAH !!!!)

<p style="color:black;">

CSS aan HTML koppelen

Page 15: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

Handig om te weten

➔ font-size: 16px;

➔ font-weight: bold;

➔ color: black;

➔ text-decoration: underline;

➔ text-align: right;

➔ border: 1px double black;

➔ background-color: orange;

Page 16: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

ZELF DOEN!

Page 17: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

3 Typen Elementen

inline

➔ dezelfde regel als de tekst

➔ Géén breedte, hoogte, border, etc.

bv. <span>, <a>

block

➔ Eigen regel➔ Wél breedte,

hoogte, border, etc.

Bv. <div>, <h1>

inline-block

➔ Dezelfde regel als tekst

➔ Wél breedte, hoogte, border, etc

Bv. <p>

Page 18: CoderDojo Rotterdam #1 | Introductie HTML / CSS

“Above All: Be Cool“

➔ Breedte (width)

➔ Hoogte (height)

➔ Rand (border)

➔ Padding (padding)

➔ Margin (margin)

Breedte + Border + Padding = werkelijke breedte

BOXMODEL voor (inline-)block