Mijn eerste Website bouwen

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Mijn eerste Website bouwen

De basis

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Voorjaar 2009 Mijn eerste website bouwen 2

Uw Lesgever : Guido WillekensAnimator bij…

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Inhoud van deze cursusModule 1: Browsers en Webservers

Hoe gebeurt surfen eigenlijk en wat speelt er zich af achter de schermen?

Module 2: HTML en KompoZer De codetaal van de webpagina en een tool om er mee te

leren werken en te verstaan.Module 3: Hosting en FTP

Waar staat mijn website en hoe breng ik er mijn pagina’s naartoe?

Module 4 WebSiteX1 Een website maken met een tool op de PC, gebaseerd op

sjablonen (templates).Module 5: Google Sites

Een alles in één oplossing.Voorjaar 2009 Mijn eerste website bouwen… 3

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW Module 1Browsers en Webservers

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

5Voorjaar 2009

Curriculum volgens moeilijkheidsgraad

Internet2. Internet

3.3 WebSite 3.2 Beeld

3.1 Office

4. Video 5. Programmeren:VBA;Java; dotNet

1. Instap

Mijn eerste website bouwen…

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

6Voorjaar 2009

Wat leren we?Wat is het internet?

Router IP-adres Domeinnaam versus internetadres

Wat is een URL? Hoe werkt surfen?Opbouw van een webpagina


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

7Voorjaar 2009

Wat is het internet?

Een netwerk dat miljoenen computers met elkaar verbindt

Regionale netwerken zijn verbonden via een “ruggengraat” of backbone netwerk : het is wereldwijd (WorldWideWeb)

Het is opgebouwd met Routers die van hun buren weten of ze nog functioneren: het overleeft dus aanslagen

Elke aansluiting heeft een IP-adres dat er steeds uitziet als 196.123.12.56


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

8Voorjaar 2009

Wat is het internet?

196.13.12.56

192.212.126.10

Router

Router

Router

Router

Router


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

9Voorjaar 2009

Wat zijn Protocols?

Een protocol voor communicatie tussen computers bestaat uit: Een aantal spelregels: “als ik jou een boodschap stuur

moet ik wachten tot jij geantwoord hebt, dan begin ik terug…”

Een vastgelegde syntax, foutcodes…Protocols worden door een instituut gestandaardiseerd:

vb. RFC xxxx door W3CDe belangrijkste voor vandaag zijn HTTP en FTP

de “P” staat altijd voor ProtocolHTTP: Hyper Text Transfer ProtocolFTP: File Transfer Protocol


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

10Voorjaar 2009

Hoe werkt surfen ?

Gebruiker met Internet Explorer WebServer1

1. HTTP_Verzoek(URL)

2. HTTPAntwoord(HTMLpagina1)

WebServer2

3. Klik op een Hyperlink (onderlijnde tekst die verandert in een handje)4. HTTP_Verzoek(URL)

5. HTTPAntwoord(HTMLpagina2)

pagina1

pagina2

Volledig boek


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

11Voorjaar 2009

Wat is een URL?Een aanvraag van een webpagina, gebeurt met een

URL, een Universal Resource Locator. Bv:http://www.bokrijk.be/info/ligging.html

Deze bestaat uit: Het gebruikte protocol: http: Een naam voor de server: //www.bokrijk.be Eventueel een map of submap op deze server: /info Een naam voor de webpagina: ligging.html

Mijn volledig boek bestaat uit pagina’s verspreid over een aantal servers


http://www.bokrijk.be/info/ligging.html

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

12Voorjaar 2009

Wat doet de WebServer?

De WebServer heeft een hele reeks mappen, met daarin de webpagina’s en de bijhorende beelden, geluiden, documenten

Een voorbeeld: /index.html

/mijnWeb/pagina6.html/beelden/vogel.jpg/geluid/donder.wav/documenten/onkosten.xls

Bij een verzoek voor een bepaalde pagina worden alle bestanden die op de pagina zijn vermeld, apart opgestuurd, na het antwoord. Met FireFox 12 kan al die bestanden apart ophalen: Extra Pagina-info Media

Als ons werk af is moeten we onze pagina’s en bestanden naar de server overbrengen, in de juiste mappen, met FTPMijn eerste website bouwen…

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

13Voorjaar 2009

De andere kant…

Internet

Gebruiker met Browser

Ontwikkelaar met

KompoZer en FileZilla

WebServer


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Dynamische pagina’sEen dynamische pagina vergt een

programma dat er voor zorgt dat er iets gebeurt bij klikken… Dit programma loopt ofwelAan de Client-kant, in de Browser. Bv:

JavaScript en Visual Basic Script Applets (kleine applicaties in Java) en AxtiveXControls Flash en Silverlight

Aan de Server-kant, door de server software. Bv.:

Servlets en JavaServerPages(JSP) Active Server Pages(ASP) en dot.net (ASPX) PHP, coldfusion…

Dit programmeren is voor specialisten en valt buiten het bestek van deze cursus !!!Voorjaar 2009 Mijn eerste website bouwen… 14

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Java Script

Voorjaar 2009 Mijn eerste website bouwen… 15

Acties van de gebruiker leiden tot het uitvoeren van Java Script door de Java Script Interpreter

Gebruiker met Browser WebServer


2. HTTPAntwoord(HTMLpaginamet JavaScript)

pagina

CoreJSI

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Programma op de server


De WebServer Core laat de pagina indien nodig verwerken door de Compiler (.net of JSP).

Gebruiker met Internet Explorer WebServer


2. HTTPAntwoord(HTMLpagina)

pagina

Core

Compiler

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Drie benaderingen om een website te maken1. Op de PC, met een algemeen programma en FTP

Men maakt de pagina’s met een programma en brengt het resultaat met FTP over op de webserver. Voorbeelden: Voor de beginner: KompoZer Iets meer gevorderd: Frontpage De professional: Dreamweaver

2. Op de PC met een speciaal programma dat een aantal templates aanbiedt, waarbinnen men kan werken. Voorbeeld:

Website X1, Xara Webstyle…3. On-line met klaargemaakte Templates, zonder FTP.

Vb Google Sites


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, noc

h ge

deel

telij

k w

orde

n ge

brui

kt o

f gek

opie

erd

zond

er d

e sc

hrift

elijk

e to

este

mm

ing

van

Sen

iorn

et V

laan

dere

n V

ZW

Wat zullen wij doen?Eerste stap:

We maken een pagina op onze PC, met een gratis tool KompoZer

Dit geeft ons inzicht in HTML code en de structuur van een pagina

Voordeel: we hebben hier geen Webserver voor nodig

Tweede stap: We maken een paar pagina’s online, met de gratis

Google Sites Nu krijgen we een zicht op een site, met navigatiemenu Alles staat meteen online, dus weer geen FTP nodig


Mijn eerste Website bouwen

Documents