CoderDojo Rotterdam #1 | Introductie HTML / CSS
-
Upload
coderdojo-rotterdam -
Category
Technology
-
view
329 -
download
1
description
Transcript of 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