HTML / CSS
CoderDojo 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?
Hyper
Text
Markup
Language

“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...
Zelf proberen!
Maak een
➔ <verzameling>
beschrijving van je cd
➔ <eigenaar>
collectie in XML.
➔ <artiesten>
Let op NESTING...
Echte HTML
Headers:
<h1>, <h2>, <h3>

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

Paragraaf:
<p>

Lijstjes:
<ul>
<li>lijst item</l...
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
#ui...
In de HTML
<p class=”zwart”

id=”uitleg”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin laoreet id dolor...
Alles bij elkaar
HTML
<p class=”blauw”>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Proin laoreet id dolor ne...
CSS aan HTML koppelen
1. Linken
<link href="style.css" type="text/css">
2. In header (BAH!)
<style type="text/css">
p {col...
Handig om te weten
➔ font-size: 16px;
➔ font-weight: bold;
➔ color: black;
➔ text-decoration: underline;
➔ text-align: rig...
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
➔
➔

...
BOXMODEL voor (inline-)block
➔ Breedte (width)
➔ Hoogte (height)
➔ Rand (border)
➔ Padding (padding)
➔ Margin (margin)
Bre...
Upcoming SlideShare
Loading in …5
×

CoderDojo Rotterdam #1 | Introductie HTML / CSS

1,078 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,078
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CoderDojo Rotterdam #1 | Introductie HTML / CSS

  1. 1. HTML / CSS CoderDojo Rotterdam “Above All: Be Cool“
  2. 2. Wat is HTML? Plain-Text.txt “Above All: Be Cool“
  3. 3. Wat is HTML? Rich-Text.doc “Above All: Be Cool“
  4. 4. Wat is HTML? Hyper Text Markup Language “Above All: Be Cool“
  5. 5. Nesting Soms horen dingen bij elkaar, deze kun je dan “nesten”. “Above All: Be Cool“
  6. 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. 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. 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. 9. Opmaken met CSS “Above All: Be Cool“
  10. 10. Termen die je moet kennen Selector { property: waarde; } p{ color: black; } “Above All: Be Cool“
  11. 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. 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. 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. 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. 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. 16. ZELF DOEN! “Above All: Be Cool“
  17. 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. 18. BOXMODEL voor (inline-)block ➔ Breedte (width) ➔ Hoogte (height) ➔ Rand (border) ➔ Padding (padding) ➔ Margin (margin) Breedte + Border + Padding = werkelijke breedte “Above All: Be Cool“

×