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

1. HTML / CSS
CoderDojo Rotterdam
“Above All: Be Cool“

2. Wat is HTML?
Plain-Text.txt
“Above All: Be Cool“

3. Wat is HTML?
Rich-Text.doc
“Above All: Be Cool“

4. Wat is HTML?
Hyper
Text
Markup
Language
“Above All: Be Cool“

5. Nesting
Soms horen dingen bij elkaar, deze kun je
dan “nesten”.
“Above All: Be Cool“

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

7. Zelf proberen!
Maak een
➔ <verzameling>
beschrijving van je cd
➔ <eigenaar>
collectie in XML.
➔ <artiesten>
Let op NESTING en
TAGS!
http://pastebin.com/AWMCWdVd
➔ <artiest>
➔ <album>
➔ <liedje>
“Above All: Be Cool“

8. Echte HTML
Headers:
<h1>, <h2>, <h3>
Plaatjes:
<img src=”plaatje.jpg”/>
Paragraaf:
<p>
Lijstjes:
<ul>
<li>lijst item</li>
</ul>
<ol>
<li>lijst item</li>
</ol>
Links:
<a href=”http://google.nl”>
Zelf doen!
“Above All: Be Cool“

9. Opmaken met CSS
“Above All: Be Cool“

10. Termen die je moet kennen
Selector {
property: waarde;
}
p{
color: black;
}
“Above All: Be Cool“

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

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

13. Alles bij elkaar
HTML
<p class=”blauw”>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Proin laoreet id dolor nec
hendrerit. Praesent porttitor
CSS
.blauw {
color: blue;
}
pulvinar erat, volutpat porta
neque egestas id.
</p>
“Above All: Be Cool“

14. CSS aan HTML koppelen
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;">
“Above All: Be Cool“

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

16. ZELF DOEN!
“Above All: Be Cool“

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

18. BOXMODEL voor (inline-)block
➔ Breedte (width)
➔ Hoogte (height)
➔ Rand (border)
➔ Padding (padding)
➔ Margin (margin)
Breedte + Border + Padding = werkelijke breedte
“Above All: Be Cool“