HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.

Presentatie over: "HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen."— Transcript van de presentatie:

1 HTML Hypertext Markup Language

2 HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen

3 Elementen Open tag: Close tag: Samen een element:

4 In een element Tekst: Hallo Andere elementen: Hallo

5 Eigenschappen (attributes) Plaatje (image): Eigenschappen – Welk bestand: src (source)

6 Veel verschillende elementen: Zelf uitproberen! Tabel, knop, link, input…

7 Structuur Elementen zitten in andere elementen

8 Wereld AfrikaEuropaAzië NederlandDuitsland EindhovenAmsterdamRotterdam DOM

9 HTML

10 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

11 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

12 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

13 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

14 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

15 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam

16 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

17 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

18 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België

19 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België

20 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam

21 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Duitsland

22 Waarom DOM kennen? CSS Eigenschappen Elementen toevoegen Elementen verwijderen Evenementen – Klik – Mouseover – vele anderen… Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam België

23 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

24 Maak in je code de structuur zichtbaar

25 OnduidelijkDuidelijk

26 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

27 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam 1 1 DOMHTML

28 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam 1 1 2 2 DOMHTML

29 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam 1 1 2 2 3 3 DOMHTML

30 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam 1 1 2 2 3 3 4 4 DOMHTML

31 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

32 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

33 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

34 Wereld AfrikaEuropaAzië Nederland Duitsland Eindhoven Amsterdam Rotterdam DOMHTML

35 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