23 september 2017
Webdesign & <? php /* CSS
Studies
 
 
 
 
 
 
Hoe maak je een website ? 1. De echte basisprincipes ! 15 april 2009
 

Hoe wordt een website gemaakt ?

Welkom bij deze beginnershandleiding. Als je in een zoekmachine intikt "hoe maak ik een website" dan vind je gelijk allemaal pagina's die al best wel ingewikkeld zijn met allemaal termen waar je gelijk al niks van begrijpt. Of de pagina's zijn al zo rommelig en vol van reclame dat je nog niet weet waar je moet beginnen. Nou, speciaal voor jouw heb ik deze pagina gemaakt. Vergeet al die andere pagina's maar even en kijk of je hier wat aan hebt. Ik zal hier heel eenvoudig gaan uitleggen hoe je een website maakt. Als je deze dingen begrijpt dan gaat er als het goed is een wereld voor je open. Als je het snapt wil je gelijk aan de slag en kun je vandaag nog een site hebben en het adres aan al je vrienden of familie mailen. Later als je er een beetje beter in wordt gaat je pagina er steeds beter uitzien en zul je er trots op zijn omdat je het zelf gemaakt hebt en zul je ook leuke complimenten krijgen. Ik zal geen boeken aanbevelen en ook geen reclame maken voor programma's die geld kosten. 1 waarschuwing vooraf: webdesign kan soms met nogal wat frustraties gepaard gaan omdat dingen niet lukken zoals je ze wilt maar het is ook ontzettend leuk !Afbeelding van een smiley die zijn pc stukslaat

Laten we beginnen

Websites staan op het internet, maar hoe zet je websites nou op het internet ? Waar gaat het dan heen ?
Je hebt vast wel is een brief geschreven in Word of in een andere tekstverwerker op je computer. Daarna heb je het ergens opgeslagen op je computer. Met een website maken gaat het eigenlijk hetzelfde. Je schrijft wat tekst in een programma en je slaat het op en dan kun je het op het internet zetten. Dat doe je met een speciaal programma waarover straks meer. Maar wat is nu "het internet" en hoe kun je daar dan wat opzetten ?

Hoofdstuk 1: Het internet, providers en webruimte

Het internet

Het internet bestaat uit allemaal grote computers die met elkaar verbonden zijn. Op die grote computers staan allemaal websites. Zo'n grote computer heet een webserver. Jij en een heleboel andere mensen maken met je pc verbinding met al die grote computers en als je wilt mag je zelf ook wat op zo'n grote pc zetten zodat andere het kunnen bekijken. Dat heet dan je website.

Al die grote computers zijn wereldwijd ook weer met elkaar verbonden. Omdat het zo verschrikkelijk veel netwerken en computers zijn die wereldwijd met elkaar verbonden zijn wordt dit niet voor niks het Wereld Wijde Web genoemd: www.

Een provider kiezen

Meestal heb je op zo'n grote computer al wat ruimte gekregen om je eigen website op te zetten zonder dat je het weet. Namelijk bij je eigen kabel of adsl internet provider, degene die jouw toegang geeft tot het internet. Heb je bijvoorbeeld adsl van Hetnet dan heb je daar al een website op het volgende adres: http://home.hetnet.nl/~jegebruikersnaam die helemaal leeg is. Je mag daar dus gratis wat opzetten. Zit je bij Orange (sinds kort Online) dan ziet het adres er zo uit: http://home.online.nl/jegebruikersnaam . Hoe het adres van jouw webruimte er bij jouw provider uitziet kun je meestal op de website van je provider vinden of je hebt de gegevens een keer in een brief gekregen. Kun je de informatie over jouw website ruimte nergens vinden bel dan even de heldesk van je provider.

Gratis webruimte zonder reclame

Heb je zoiets van "nou ik heb liever geen website bij mijn eigen internet provier want dan zien mensen ook mijn gebruikersnaam" dan kun je gratis webruimte krijgen bij providers die er speciaal zijn om websites op te zetten. Meestal krijg je dan verplicht een reclame banner op je website. Daar zit je natuurlijk niet op te wachten. Een van de weinige GRATIS Nederlandstalige providers waar je GEEN RECLAME op je website krijgt is DeDs www.deds.nl. Je kunt daar binnen 5 minuten aan de slag en de gegevens die je nodig hebt om je site op te zetten krijg je netjes in een mailtje toegestuurd. Let er op dat je een leuke of zinvolle gebruikersnaam kiest voor je account want dat wordt ook het adres van je website.

Hoofdstuk 2: WYSIWYG Editors en de webtaal HTML

De webtaal HTML

Goed laten we verder gaan. Een website ook wel homepage genoemd bestaat uit meerdere pagina's. De belangrijkste daarvan is de index pagina. Webpagina's zijn geschreven in een soort van programmeer taal. Die taal heet HTML. HTML is vrij makkelijk maar je hoeft het niet persee te leren. Als je namelijk gewoon een computer programma gebruikt wat gemaakt is om webpagina's mee te maken en je schrijft daar wat tekst in dan slaat het programma het automatisch voor jouw in die programmeer taal HTML op. Zo'n programma heet een WYSIWYG editor en kun je gratis downloaden van het internet. WYSIWYG betekent: What You See Is What You Get. Naast HTML zijn er nog een aantal hulptalen om je site mooier te maken of van speciale effecten te voorzien. Die talen zijn CSS en Java Script maar daarover later meer.

Enkele Gratis Editors

De meest bekende gratis editors zijn Nvu, Trellian WebPage of PageBreeze. Er zijn er echter nog meer. Voor een volledig overzicht kun je kijken bij het overzicht van gratis WYSIWYG-Editors bij de Aanbevolen Websites. Je kunt ze later allemaal is installeren op je computer om te kijken welke je het prettigst vindt om mee te werken maar je hebt er maar eentje nodig. In de voorbeelden die ik hieronder zal geven zal ik Nvu gebruiken omdat Nvu in het Nederlands vertaald is en er ook een nederlandstalige handleiding beschikbaar is. Dat is wel zo makkelijk.
Je kunt Nvu hier downloaden. Ietsje naar onderen daar aan de rechterkant moet je klikken op "Nu downloaden!". Kom je er niet uit met installeren kijk dan even hier.. Je hoeft alleen maar op volgende, installeren en voltooien te klikken. Na de installatie vind je een pictogram van Nvu op je buroblad.

Hoofdstuk 3: Je eerste pagina maken

Map maken

Nu ga je echt je eerste pagina maken. Eerst is het verstandig om een nieuwe map te maken in Mijn Documenten waar je je eerste webpagina zometeen in gaat opslaan. Je vindt meestal een snelkoppeling naar Mijn Documenten op je buroblad. Open Mijn Documenten en kies via Bestand linksboven of via je rechtermuisknop voor nieuwe map en noem die Mijn Website.

Een pagina maken in een Editor en opslaan

Start je Editor (in dit voorbeeld Nvu)
Start het zojuist geinstalleerde programma Nvu. Je vindt het pictogram Nvu op je buroblad.

Wat tekst typen
Je krijgt een nieuw blanco pagina voor je. Dit wordt de eerste pagina van je website. Daarin kun je zetten wat je wilt: tekst, plaatjes en je kunt de pagina een achtergrond kleur geven. Voor nu houden we het simpel. Tik de tekst: "Welkom op mijn website !". Klik vervolgens op het pictogram Opslaan bovenaan in het programma.

Titel opgeven
Er wordt nu door dit programma gevraagd of je de titel wilt opgeven voor je website. Voor nu kun je daar gewoon invullen: "mijn eerste pagina" en op OK klikken.

Pagina opslaan in de map Mijn website
Vervolgens krijg je het opslaan venster. Je gaat deze pagina opslaan in de map Mijn Website die je zojuist hebt gemaakt. Je moet dus in dit opslaan venster gaan naar Mijn Documenten en vervolgens naar Mijn Website. Maar klik nog niet op opslaan want je moet nog de bestandsnaam opgeven voor deze eerste pagina van je website. Omdat je als titel hebt opgegven "mijn eerste pagina" vult het programma dat automatisch in bij bestandsnaam. Dat moet je veranderen in index zoals het hier geschreven is met kleine letters. De index pagina is altijd de eerste pagina die bezoekers van je website te zien krijgen. Dat is een afspaak die wereldwijd is gemaakt. Klik nu op opslaan. Het bestand wordt automatisch opgeslagen als HTML bestand.

Gefeliciteerd
Je hebt zojuist de eerste pagina van je website gemaakt. Maar wat nu ? Deze pagina staat nog op je computer maar hij moet natuurlijk op het internet komen te staan.. Hoe dat moet ga ik je nu uitleggen.

Hoofdstuk 4: Je eerste pagina op het internet zetten

De inloggegevens van je provider

Zoals ik je hierboven al vertelde kun je kiezen of je gebruik wilt maken van de webruimte bij je eigen internet provider of bij een andere (gratis) provider. Ik ga er vanuit dat je inmiddels een keus hebt gemaakt en dat je de gegevens die daarbij horen gevonden hebt. Het gaan om de zogenoemde inloggegevens, dus je gebruikersnaam en wachtwoord die je hebt voor die provider. Als het bij je eigen provider is dan kun je die gegevens vinden op de website van je provider of je hebt ze per brief gekregen. Het is dan dezelfde gebruikersnaam en wachtwoord die je gebruikt voor je adsl of kabel verbinding. Als je gekozen hebt voor een andere privider bijvoorbeeld DeDs dan heb je die gegevens in een e-mail toegestuurd gekregen. Deze inloggegevens heb je nodig om je website te kopieren naar de grote computer van deze provider. Je website staat dan op het internet en iedereen kan hem zien.

Je webpagina naar de provider kopieren met een FTP-programma

Dat kopieren van je webpagina naar de provider doe je met een speciaal programma. Zo'n programma heet een FTP-programma. Ftp komt van het Engelse File Transfer Protocol. Gelukkig zijn ook hier weer meerdere gratis programma's voor beschikbaar zoals WinSCP, FTP Commander of FileZilla. Ze werken allemaal in principe hetzelfde maar zien er gewoon net iets anders uit.

Werken met het gratis FTP-programma FileZilla

Het meest eenvoudige FTP-programma is FileZilla en die zal ik dan ook gebruiken in de voorbeelden hieronder. Je kunt FileZilla hier downloaden. Ook dit programma is weer Nederlandstalig.

De installatie van FileZilla
Start het installatiebestand. Klik op I Agree en vervolgens op Next. Zet een vinkje bij Desktop Icon. Op die manier krijg je een pictogram naar FileZilla op je buroblad. Klik vervolgens weer op Next en weer op Next en dan op Install en vervolgens op Finish. De installatie is klaar. Je vindt nu een pictogram naar FileZilla op je buroblad getiteld: FileZilla Client. Dubbelklik op dat pictogram om FileZilla te starten. Het venster van FileZilla ziet er dan ongeveer zo uit:

De juiste instellingen
Voordat ik verder ga met de uitleg hoe je je webpagina op de grote computer van je provider kan zetten kun je eerst even de volgende dingen controleren:
A. Is FileZilla in het Nederlands ?
Zo niet ga dan in FileZilla linksboven naar Edit en dan naar Settings en dan naar Language en kies dan aan de rechterkant Dutch en klik op OK. FileZilla is nu in het Nederlands.
B. Heb je in het midden maar 2 vakken in plaats van 4 vakken ?
Ga dan naar Beeld en zet een vinkje bij Locale boomstructuur en een vinkje bij Externe boomstructuur. De breedte van de venster kun je verder aanpassen naar je eigen wensen, hoe jij het prettig vindt.

Inloggegevens invullen in FileZilla
Kijk eens naar de volgende afbeelding van FileZilla. Ik heb alles even mooi met kleurtjes omcirkeld. Je moet nu wat gegevens in gaan vullen. Het eerste is het FTP-adres van je provider. Dat vind je ook in die gegevens van de door jouw gekozen provider. Het gaat meestal als volgt ftp.naamprivider.nl . Dat vul je linksboven in. Daarnaast vul je je gebruikersnaam in en daarnaast je wachtwoord. Nu kun je verbinding gaan maken met de webruimte op de grote computer van de provider. Dit doe je door op Snelverbinden te klikken. Je ziet dan rechts ook ineens een mapje verschijnen. Dit kan www heten of public_html afhankelijk van je provider. Soms bevind je je na inloggen gelijk al IN deze map, in andere gevallen moet je eerste dubbelklikken op die map zodat je je IN die map bevindt. Zojuist had je in de Nvu Editor je eerste webpagina gemaakt. Je gaat dat bestand nu kopieren naar dat mapje aan de rechtkant. Het bevindt zich dan in jouw webruimte op de grote computer van de provider. Onder het plaatje zal ik verder uitleggen hoe dit moet.

Als eerste moet je in het linker bovenvenster bladeren naar de map Mijn Documenten en dan naar de map Mijn Website. Als je dat gedaan hebt zie je linksonder het bestand index.html (zie plaatje hierboven nog een keer). Klik met de rechtermuisknop op dat bestandje en dan zie je een menu. Kies vervolgens voor Uploaden en het bestand wordt automatisch naar de rechterkant gekopieerd. Voila ! Het staat nu op de grote computer van je provider in jouw persoonlijke webruimte.

Hoofdstuk 5: Je eerste website bekijken

Het adres van je website

Je bekijkt websites met een browser, dat is dat programma waarmee je nu ook deze website bekijkt. Grote kans dat je Internet Explorer gebruikt maar mischien wel Firefox of Opera. Iedere website op het internet heeft een eigen adres. Het adres van jouw website wordt bepaalde door je provider en bestaat uit de naam van je provider en je gebruikersnaam. Het kan er zo uitzien:

http://www.naamprovider.nl/~jegebruikersnaam

of

http://home.naamprovider.nl/~jegebruikersnaam

of

http://home.naamprovider.nl/jegebruikersnaam

en soms

http://jegebruikersnaam.naamprovider.nl/

of

http://www.jegebruikersnaam.naamprovider.nl/

Ook dat moet je dus even nakijken in de gegevens die je hebt gekregen van je provider. Als je het juiste adres hebt kun je je website gaan bekijken op het internet door het adres in te tikken of te kopieren in de adresbalk van je browser. Het eindresultaat zal er ongeveer zo uitzien:

Gefeliciteerd !

Je hebt je eerste pagina op het internet gezet en hebt nu een eigen website. Je kunt het adres aan al je vrienden en familie sturen zodat ze hem ook kunnen bekijken. Natuurlijk kun je er ook nog even mee wachten tot er wat meer informatie op staat.
Je bent nu heel eenvoudig begonnen, maar meestal bestaat een website uit meerdere pagina's met links waar je op kunt klikken om op de volgende pagina te komen. Zoiets heet een hyperlink, maar hoe je dat maakt en hoe je je pagina mooier kan gaan maken ga ik je uitleggen in deel 2 van deze beginnershandleiding.

Vragen of opmerkingen

Ik heb wel is gehoord dat je Flash of Dreamweaver moet gebruiken om een website te maken ?
Macromedia/Adobe Flash en Dreamweaver zijn betaalde programma's en worden veel door bedrijven gebruikt. Het zijn inderdaad ook editors om websites mee te maken maar voor specifieke taken. In wiki lezen we over Adobe Flash: "Adobe Flash is een computerprogramma waarmee animaties, (korte) webvideo's en webapplicaties (zoals spelletjes en gehele websites) gemaakt kunnen worden. Het wordt veel gebruikt om websites aan te kleden en voor reclame-uitingen bij websites, zogenaamde banners." (1)
Over Dreamweaver lezen we: "Dreamweaver is met name bedoeld voor gevorderde webontwikkelaars. (..) Dreamweaver heeft een interface die afwijkt dan die van de meeste programma's. Hierdoor vinden beginnende gebruikers het programma soms moeilijk om mee te werken.". (2)
Je kunt deze programma's dus wel is gaan gebruiken maar dan ben je wel wat euro's lichter. Hetzelfde geldt ook voor Adobe Photoshop. Het leuke is dat er mensen over de hele wereld bezig zijn om gratis alternatieven (Open Source) te maken voor deze programma's die toch hetzelfde doen. Als je daarin geinteresserd bent is de website van www.osalt.com een aanrader om eens op te kijken waar je voor alle betaalde programma's ook de gratis versies vindt.

Hoe zit het dan met Microsoft Frontpage ?
Microsoft Frontpage wordt standaard meegeleverd op de Microsoft Office cd. Voor zover ik heb begrepen ook op de home/student versie. Het is een goede en makkelijke editor net als bijvoorbeeld Nvu dus als je in het bezit bent van Microsoft Office kun je ook gebruik maken van Frontpage ipv bijvoorbeeld Nvu. (3)

Heb je vragen of opmerking ? Kom je ergens niet uit of snap je iets niet dan ben je welkom in het Forum om je vraag te stellen. Natuurlijk vind ik het ook leuk als je gewoon even laat weten wat je vindt van deze cursus en of je er wat aan hebt gehad. Is je vraag of opmerking interesant genoeg dan zal ik hem hier vermelden op deze website.

Voetnoten:
1. http://nl.wikipedia.org/wiki/Adobe_Flash
2. http://nl.wikipedia.org/wiki/Dreamweaver
3. http://office.microsoft.com/nl-nl/frontpage/HA010714991043.aspx 

Naar Deel 2 van deze beginnershandleiding > Deel 2 gaat over de Layout van een website, een plan maken voor de opzet van je website maken, hyperlinks, broncode en HTML.