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

Slides:



Advertisements
Verwante presentaties
Het internet.
Advertisements

I.s.m. Gebruikersdag 2014.
Handboek verzenden van Nieuwsbrief Caribbean.nl 12 september 2012 •Ga naar CMS •Kies Nieuwsbrief Caribbean.nl.
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
Paginanaam aanpassen Activeren of deactiveren vd pagina Verwijderen vd pagina NOOIT OP KLIKKEN Geen functie.
Module: Delicious • Verzameling ‘favorieten of bookmarks’ • Eenvoudig om eigen bookmarks bij te houden • Je kan er overal aan (waar internet is) • Gebruikt.
Module 1 – Dag 2 Hallo Module 1 – Dag 2 een 1 Module 1 – Dag 2 twee 2.
E3: Office 2007 What’s in it for you…… Jeff Blox.
(c) Marc de Graauw Presentatie XML Marc de Graauw 2 maart 2000.
Hoofdstuk 2 Communicatie
Het oog wil oog wat. Kijk ook op
Webdesign.
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
Crashcursus HTML en CSS 2013
Protocol het geheel van afspraken over de communicatie en vooral de stuurinformatie.
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Stijn Van Wonterghem1 ALICE Een inleiding. Alice - Een Inleiding2 Wat is ALICE? Een moderne programmeeromgeving –Visuele voorstelling, opgebouwd uit drie-
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
6.8, De Vrede van Bresk-Litovsk Eerste Wereldoorlog.
Mijn eerste Website bouwen
WMF Plaatjes bewerken In 2007.
Module 1 – Dag 1 Hallo.
Hoofdstuk 16 en 19 PHP en MYSQL
1 paragraaf 9 Bestanden met digitale informatie Informatica Blok 1 Hoofdstuk 1 Digitale informatie in bestanden.
WEBBUILDING 07/03/2005 Saartje De Geyter.
Deel XXI 1 Internetapplicaties Internetprogrammeren Capita Selecta.
Starten met PHP Dynamischer bouwen. PHP is een een scripttaal waarmee de server pagina’s in elkaar kunt laten zetten. Het verschil met HTML: Een php pagina.
Module 1 – Dag 3 Hallo Module 1 – Dag 3 een 1 Module 1 – Dag 3 twee 2.
Wikiwijs.
Waar te downloaden? Dit is voor android gebruikers | start u tablet op en open het programma PlayStore | klik op het icoontje Dit is voor Apple gebruikers.
Aan klikken. TAB blad favorieten aan klikken Nieuwe verzamel map maken.
HTML De basis-elementen.
Design je eigen web-pagina Met behulp van Photoshop.
De basis-elementen Deel 2
HTML. Wat is HTML Je kunt er sites mee bouwen Hypertext Markup Language Afspraken voor opmaak: tags.
Css basics. terminologie Block level element Inline element Css – eigenschap : display : Voorbeeld : display eigenschap en genummerde lijst.
1 Les 08: Formulieren. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 8  Bespreken huiswerk  Presentatie over lesstof  formulieren 
BEWERKEN VAN GEGEVENS Programmeertalen.  Machinecode  Assembleertalen  Hogere programmeertalen  Vierde-generatietalen  Objectgeoriënteerde talen.
Zet de letters leesbaar rechtop en niet in spiegelbeeld. Plaats ze in de juiste volgorde (van links naar rechts). Zorg dat alles netjes op een rij staat.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
Eindbeoordeling websites Seminarie Webdesign. Technische puntenverdeling Niet online en losse bestanden
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
HTML & CSS Samen gebruiken. Verschil HTML – Structuur CSS – Styling Twee verschillende dingen – Loskoppelen!
Ken u afstandsbediening! 1. aan/uit knop 2. (geluid)mute knop 3. zet de TV op kanaal 9 Zelf TOETS.
Hoe maak ik een PowerPoint presentatie?
Trimester 2. Hfdst 1: e-Presentatie, master! e-Presentatie Met de hulp van Powerpoint gaan we leren hoe we een elektronische presentatie kan maken.
ARNHEM NAAM DATUM TITEL Voeg afbeelding in, klik rechts en kies Naar achtergrond, pas dan de tekst aan.
Hallo.
GUI Graphical User Inferface. Window Definieer object(en) create voeg toe aan Gui update Gui draw Gui.
Hoofdstuk 2 Communicatie
Kennismaking met programmeren
Javascript.
Sjabloonsite Koen Van Cauwenberge.
Deutschland stellt sich vor
Communicatie en taal Begrippen: Gegevens Informatie
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Sesamstraat Part II Erin..... Eruit......
Programmeren is Makkelijk
Kennismaking met programmeren
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Hoe werkt Wikispaces? Wikispaces in 10 stappen!.
Hoe maak je een pagina voor een website?
Welkom :-).
Telefoon | adres | Webadres
Creëer een mooie folder
Powershell & HTML.
HTML5 introductie.
Transcript van de presentatie:

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