coderdojo rotterdam #1 | introductie html / css

“Above All: Be Cool“

HTML / CSSCoderDojo Rotterdam

“Above All: Be Cool“

Wat is HTML?

Plain-Text.txt

“Above All: Be Cool“

Wat is HTML?

Rich-Text.doc

“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

“Above All: Be Cool“

Nesting

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

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

“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

“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!

“Above All: Be Cool“

Opmaken met CSS

“Above All: Be Cool“

Termen die je moet kennen

Selector { property: waarde;}

p {color: black;

}

“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

“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?

“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;

}

“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

“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;

“Above All: Be Cool“

ZELF DOEN!

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

“Above All: Be Cool“

➔ Breedte (width)

➔ Hoogte (height)

➔ Rand (border)

➔ Padding (padding)

➔ Margin (margin)

Breedte + Border + Padding = werkelijke breedte

BOXMODEL voor (inline-)block