HTML Hypertext Markup Language
HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen
Elementen Open tag: Close tag: Samen een element:
In een element Tekst: Hallo Andere elementen: Hallo
Eigenschappen (attributes) Plaatje (image): Eigenschappen – Welk bestand: src (source)
Veel verschillende elementen: Zelf uitproberen! Tabel, knop, link, input…
Structuur Elementen zitten in andere elementen
Wereld AfrikaEuropaAzië NederlandDuitsland EindhovenAmsterdamRotterdam DOM
HTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam
Waarom DOM kennen? CSS Eigenschappen (b.v. “is onzichtbaar”) Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam
Waarom DOM kennen? CSS Eigenschappen (b.v. “is onzichtbaar”) Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Duitsland
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België
Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België 1 2 3
Maak in je code de structuur zichtbaar
OnduidelijkDuidelijk
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam 1 1 DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML
Opdracht HTML code in html-code.txt In tweetallen (samen denken, één computer, één blaadje) Maak de code duidelijker – Beter inzicht structuur DOM Maak het DOM af op A4 papier (zet ook stuk DOM op deze slide op je papier) – Negeer gewone tekst binnen een element – Negeer attributes – Zet elementen duidelijk in de goede laag – Binnen een laag van links naar rechts – Schrijf klein en houd je papier horizontaal (DOM is breed) html head body titleh1 emh2a img address