Hoe maak je een website

Wat is een web site?

Een web site is eigenlijk niet meer dan een verzameling bij elkaar horende web pages (met bijhorende plaatjes en zo), die geplaatst zijn op een web server...

Web pages zijn een samenhangende groep bestanden (files), bedoeld om door internet browsers (als FireFox, Internet Explorer) via het internet te worden opgehaald en weergegeven. Ze zijn standaard gemaakt in een taal genaamd 'HTML', bijvoorbeeld met programma's als het gratis NVU (ook met Nederlandstalige versie), of met Microsoft FrontPage.

Web server: Als je pagina's op je computer gemaakt hebt moeten ze nog doorgestuurd worden naar de 'server': de computer waar de mensen je pagina's ophalen, zodat je eigen computer niet altijd aan hoeft te staan. Dit is bijvoorbeeld een computer van je eigen internet-provider. Bij de meeste providers krijg je ruimte voor wat eigen web pages, of kan je deze (al dan niet gratis) vragen. Heb je meer wensen, dan moet je naar de server van een web hosting bedrijf: een bedrijf dat servers beheert, en meestal meer bied dan gratis diensten als bij je provider.

Let op: deze 'web hosting' staat los van het hebben van een 'domeinnaam' als www.keesmoerman.nl , deze moet wer apart geregeld worden (kan een web hosting bedrijf wel vaak voor je doen). Zonder eigen domeinnaam ziet je web adres er bijvoorbeeld uit als http://home.hccnet.nl/kees.moerman: je ziet dus bijvoorbeeld de naam van je host/provider voor je eigen naam.

Het maken van een (eenvoudige) web site bestaat uit een aantal stappen:

1. Het vinden van een plek om je web site neer te zetten (de bovengenoemde 'hosting'); bijvoorbeeld bij je internetprovider, of bij een hiervoor gevonden web hoster.
2. Het maken van de web pages (normaal met een startpagina 'index.html' als beginpunt), gewoon thuis op je eigen computer, met bijvoorbeeld een programma als NVU. Zie verderop op deze pagina.
3. Het uploaden van de gemaakte pages naar de server: zie mijn 'pages uploaden' pagina. Kan overigens bij sommige web editor programma's (als NVU) direct vanuit stap 2.

Voor simpele pagina's kan het vaak nog eenvoudiger: het is bij een aantal providers (zoals websitemaker) mogelijk om simpele web-pages direct via hun web site te maken door het invullen van wat templates/formulieren. Hier heb ik echter zelf geen ervaring mee. Deze pagina is als je zelf met web pages aan de slag wilt, omdat je dan veel meer mogelijkheden hebt.

Hoeveel ruimte heb je nodig voor een web-site? Voor een simpele site, zeg 10 pagina's zonder grote plaatjes, is dit ongeveer zo'n 100 tot 500 Kbyte. Mijn site (maar daar staan ook heel wat foto's op) is zo'n 50 Mbyte.

Hoe maak je de site

Web pages, hoe maak je die? Vroeger deed je dat helemaal met de hand, in een 'taal' die HTML (HyperText Markup Language) wordt genoemd. Dit is geen programmeertaal, zoals sommige mensen denken, maar een taal die de opmaak (layout) van een webpagina beschrijft. Je kan deze HTML code zien bijvoorbeeld in Internet Explorer via het menu 'Beeld'/'Bron'. In HTML mix je tekst met markeringen die aangeven hoe de indeling van je document is: wat paragrafen, hoofdstukken, lijsten en zo zijn. De vormgeving wordt daarbij gebruikt zoals standaard is ingesteld, of naar eigen wens is geregeld via zogeheten 'CSS styles', waar ik hier even niet op in ga.

Bijvoorbeeld een onderhoofdstuk als hieronder geef je aan met de <H3> (hoofdstuk, niveau 3) markering (en </H3> geeft het einde van die tekst aan):

<H3>Tegenwoordig doen we het anders.....</H3>

wordt in de uiteindelijke web page weergegeven als:

Tegenwoordig doen we het anders.....

Er zijn twee modernere manieren voor het maken en bijhouden van een site:

1. Zelf (op bijvoorbeeld je eigen computer) de pagina's maken, wat je de meeste flexibiliteit bied, maar ook het meeste werk geeft. Deze aanpak wordt op deze pagina's uitgelegd.
2. Gebruik maken van een kant-en-klaar CMS: 'Content Management System' (Inhoudsbeheersysteem) als Joomla en Xoops, waar je kant-en-klare layouts kan gebruiken en 'alleen de inhoud hoeft in te vullen' (maar, ook vast zit aan deze structuur, en een boel complexiteit in een keer over je heen krijgt). Deze aanpak leg ik verder hier niet uit, maar kijk even verderop bij 'Kant en klaar'.
   

In beide gevallen hoef je niets (of niet veel) van HTML af te weten, al is wat basiskennis vaak nuttig. Werken direct in HTML is best een gedoe, en eigenlijk alleen maar nuttig als je speciale effecten wilt hebben. Voor alle huis-, tuin- en keuken-gebruik kan je beter een programma gebruiken waarin je je gewoon op de tekst kan concentreren, en het programma voor de onderliggende HTML kan laten zorgen, net zoals je Word gebruikt voor tekstdocumenten zonder je zorgen te maken hoe iets als 'vetgedrukt' nu precies door de computer wordt bijgehouden.

Er zijn heel wat programma's om web pages te ontwerpen zonder met HTML aan de slag te moeten:

• Wat ik zelf gebruik: Een web page editor gebaseerd op Mozilla, genaamd NVU (of eigenlijk KompoZer, zie hiernaast), gratis te downloaden. Zitten nog enkele schoonheidsfoutjes in maar is zeer bruikbaar, en levert nette HTML op... Met vragen over NVU kan je terecht op het NVU/Kompozer forum (Engels).
  NVU/Kompozer is uitbreidbaar; een handige extensie voor mensen die met hun eigen editor in de ruwe HTML source willen editen is HandCoder. De ingebouwde HTML broncode editor in NVU is namelijk nogal beperkt.
  

• Beginnen met NVU? Heb eens een cursus over NVU/KompoZer gegeven voor HCC Zuid-oost Brabant, zie hier de hand-outs (sheets) ...

• Het kan ook met Micro$oft Word, maar doe dit liever niet... De resulterende web pages zijn technisch gezien vaak van beroerde kwaliteit. FrontPage vind ik overigens wat dat betreft ook geen voorbeeld.
• Wil je erg nette (X)HTML (of XML) maken, kijk dan eens naar Amaya (gratis) op de site van het WWW consortium. Maar, niet eenvoudig in het gebruik.
• En er zijn nog heel wat meer (al dan niet gratis) programma's voor dit doel...

Daarnaast is een grafisch programma als Paint Shop Pro, of de gratis programma's PhotoFiltre of (voor gevorderden) GIMP nuttig. Hiermee kan je plaatjes maken, foto's passend maken, en zo voort. Voor mooie achtergronden voor op sites: kijk eens op www.grsites.com/textures/. En je kan je pagina's nog verder verfraaien met behulp van scripts, zie op de pagina voor gevorderden bij scripts.

Hoe nu verder?

Hoe nu verder? Om te beginnen: richt je eerst op de inhoud, niet op een flitsende vormgeving. Mensen komen terug vanwege wat je te vertellen hebt, niet omdat je zulke mooie kleurtjes gebruikt...

Maak gewoon eens wat pagina's aan, en bekijk ze eerst op je eigen computer. Daarna kan je ze versturen (uploaden) naar de computers van je provider of web hoster.

Verder een tip: als web designer (op Windows) is het aan te raden om zowel Internet Explorer als FireFox te gebruiken om je site te testen. De Microsoft tools als Internet Explorer houden zich niet aan de standaarden, waardoor de inhoud op andere browsers (als FireFox) wel eens totaal in het water valt. FireFox test wat dat betreft een stuk beter.

Daarnaast is er voor FireFox een uitbreiding (extensie) speciaal voor web developers (web ontwikkelaars), waarmee je met enkele muisklikken (twee per check...) je pagina naar diverse 'validators' (programma's die checken of je page volgens de standaard is) kan sturen. Voorbeelden zij checks op correcte HTML en CSS, een timing report om te checken of je pagina (bijvoorbeeld door grootte) erg traag bekijkt, geldige links, etc. Dit gaat voor een deel zelfs als je page nog niet op de server maar nog op je eigen computer staat. Ook testen op verschillende schermgroottes is heel eenvoudig (krijg je geen lelijke scroll bars?). En: ze bijten elkaar niet, je kan IE en FireFox zonder probleem naast elkaar installeren! P.s.: mijn site wordt voor 33% door andere browsers dan Internet Explorer bekeken, dus of je dat wilt negeren...

Ik heb nog een pagina voor gevorderde beginners met een aantal onderwerpen als scripting (Perl/CGI, PHP, JavaScript), layout en CSS, MP3 downloads, frames, en de index.

Maar, het meest leer je door andere sites te bekijken en uit te vinden hoe anderen het doen. Wat vind je mooi, wat voor effecten wil je bereiken? Bekijk ook de diverse links op deze pagina.

Kant en Klaar

Naast deze aanpak zijn er tegenwoordig ook complete 'Content Management Systemen', CMS-systemen. Hiermee kan je via je web-browser het volledige beheer van je web-site doen, inclusief aanmaken van nieuwe pagina's en zo. Moet je overigens wel een provider hebben die je toelaat om zelf Perl of PHP-scripts op je site te zetten en cgi-scripts te runnen. Dit zijn behoorlijk complexe systemen, die op de server draaien (dus niet op je PC thuis), en ook het installeren is vaak niet eenvoudig! Maar daarna heb je wel een systeem dat alle werk voor z'n rekening neemt, en waarbij je met meerdere mensen tegelijk aan een site kunt werken.

Waarom ik het dan niet gebruik? Ik vind het leuker om dit soort zaken zelf te maken (ik ben tenslotte een hobbyist), en zelf doen geeft mij meer mogelijkheden. Maar voor wie er toch gebruik van willen maken, een paar CMS-systemen die goed bekend staan:

• Xoops is denk ik de meest bekende, en een heel volledige.
• Ook Joomla wordt erg veel gebruikt
• Postnuke is een van de eerste systemen. Heel volledig, maar minder eenvoudig
• eZ Publish is zeer flexibel, maar meer voor professionele gebruikers, vraagt wel wat van je!
• Xaraya is een afsplitsing van PostNuke, met een XML-gebaseerde methodiek. Nog in ontwikkeling.

(Gratis) web hosting

Wat was een hosting ook al weer: Bij de meeste providers heb je ruimte voor wat eigen web pages, of kan je deze (al dan niet gratis) vragen. Heb je meer wensen, dan moet je naar de server van een web hosting bedrijf: een bedrijf dat servers beheert, en meestal meer bied dan de gratis diensten van je internet provider.

Ik heb er zelf geen ervaring met gratis web hosting, maar krijg er wel vragen naar: waar kan ik gratis web pages plaatsen? Ik heb bijvoorbeeld via een simpele zoekopdracht op Google de volgende links met meer informatie gevonden:

• gratis-internet.rubrieken.com, links naar "Gratis internet, free hosting, website, eigen site, domain, webhosting, web space"
• www.100best-free-web-space.com heeft een overzicht van gratis hosters etc
• RipWay biedt 30 Mbyte gratis web-ruimte, met PHP scripting (geen reclame, maar een limit op bandbreedte: in totaal mogen bezoekers maximaal 10 Mbyte per dag bekijken aan pagina's)

Ik heb wel ervaring met betaalde hosters, en die zijn er in allerlei soorten en maten. Voordeel is dat je meer krijgt vergeleken met de gratis hosters (subdomeinen, POP3 email boxes, Perl en PHP scripting, en zo voort). Ook het regelen van domeinnamen zoals www.keesmoerman.nl doen ze voor je (rond de 20 Euro voor een .nl domein).

• Goede ervaringen heb ik met AD Hosting. Niet de goedkoopste, wel goede service.
• Een heel goedkope hoster is budgetwebhosting, gebruik ik zelf nu ook. Vanaf zo'n 2 euro per maand, met veel mogelijkheden, maar ook met z'n beperkingen (bv niet altijd even snel). Alle waar naar zijn geld, maar ik ben tevreden met de prijs/kwaliteitsverhouding, en ook over de meestal toch heel vlotte support (als ik die al nodig heb).
• En er zijn nog honderden anderen, kijk maar in computerbladen.

Gratis domeinnamen zijn een ander onderwerp, kijk hiervoor eens naar .tk domein namen. Maar, hiervoor moet je dus al een site (dus de inhoud) hebben bij een andere provider, zie bovenaan.

Meer info

• Lees verder op mijn pagina met onderwerpen voor meer gevorderden, met informatie over (onder andere) scheiding inhoud en vormgeving door CSS, gebruik van JavaScript, MP3 etc
• Meer uitleg over HTML? Kijk op Handleiding HTML (en CSS).
• Engelstalig: kijk naar de reference guides van SitePoint: HTML, CSS en JavaScript. SitePoint heeft sowieso veel info over webdesign.
• Wil je je web-page op correctheid laten checken? Kijk dan op HTML-checker. Deze pagina is geldig HTML! Ook je CSS kan je daar automatisch laten checken.
• Links checken of ze nog wel naar bestaande sites wijzen? Xenu's Link Sleuth is hier een heel uitgebreid programma voor
• CSS: welke browser ondersteunt welke features? Zie CSS contents and browser compatibility. Hoe krijg je toch op elke browser werkende code? Check strategieën op Cross-browser strategies for CS
• Meer info over gebruikte programma's: kijk op mijn links pages.
• Wil je je site laten ontwerpen, in plaats van het zelf te doen: kijk eens op bijvoorbeeld www.offerteswebdesign.nl.