Cursus: maak uw eigen website (1)

Het is gemakkelijker dan ooit om een eigen website op internet te beginnen. Er is zoveel keus dat u niet meer met ingewikkelde code aan de slag hoeft te gaan. Maar het is wel zo handig als u in ieder geval de basisprincipes kent! In deze zevendelige cursus gaan we stapsgewijs een eigen website maken. In deel één behandelen we de basis. Wat voor website wilt u maken, welke nuttige gereedschappen staan daarbij tot uw beschikking en hoe zit het met de (basis)kennis van html? In de volgende zes afleveringen gaan we stapje voor stapje verder, tot u na zeven afleveringen uw eigen website gemaakt heeft.

Als u op internet rondkijkt ontdekt u een eindeloze variatie in websites. Maar in feite kunnen we ze allemaal onderbrengen in drie verschillende groepen:

Persoonlijke websites, waarin u informatie over uzelf vertelt of verslag doet van uw vakantie, de verbouwing van uw huis of de belevenissen van uw huisdier.

Zakelijke websites, die soms niet meer zijn dan een digitaal uithangbord. Ze kunnen ook ingewikkelder vormen aannemen, zoals een webwinkel of een vergelijkingssite.

Websites rond één onderwerp. Dit kan een bepaald hondenras, een nieuwsportaal over wielrennen of een vergelijkingssite voor hypotheken zijn.

Kies een gewone website als u:

• Informatie wilt publiceren die niet vaak wijzigt
• Eenmalig veel tijd aan uw website wilt besteden en daarna niet zoveel
• Iets ingewikkelds wilt maken, bijvoorbeeld een webwinkel, vergelijkingssite of nieuwsportaal.

Kies een weblog als u:

• Dagelijks iets nieuws te melden hebt
• Uw mening kwijt wilt of uw hart wilt luchten
• Wilt schrijven over iets dat tijdgebonden is (opgroeien van kind of huisdier, wereldreis, voorbereidingen voor marathon)
• Anderen wilt laten reageren

Kies een wiki als u:

• Uitleg wilt geven of een onderwerp diepgaand wilt bespreken
• Al veel materiaal hebt verzameld, dat nog niet compleet is
• Anderen wilt laten meeschrijven om uw materiaal compleet te maken

Misschien heb u al een onderwerp in gedachten voor uw website. Zo niet, loop dan eens uw interesses af en bedenk hoe u daarmee iets leuks kunt doen. Iets dat nog niet eerder op internet is gedaan, of iets dat beter is dan het huidige aanbod. Vraag vrienden en kennissen welke informatie ze tevergeefs op internet zoeken. Een andere manier om onderwerpen te verzamelen zijn de lijsten van zoekmachines. Een bekend voorbeeld is de Google Google Zeitgeist. Hierin vindt u de populairste zoekopdrachten van de afgelopen maand in de VS, Nederland en diverse andere landen. Maar houd er rekening mee: dit is een momentopname en bovendien is het verstandig om een onderwerp te kiezen waar u langere tijd lol in houdt. Andere lijsten met zoektermen zijn te vinden bij Lycos en in de Yahoo Buzz Index.

Misschien denkt u bij een website meteen aan een verzameling webpagina’s met relatief statische tekst en plaatjes. Maar er is veel meer mogelijk. Wat dacht u van een weblog, een digitaal dagboek waarbij de berichten op datum zijn gesorteerd. U kunt een persoonlijke weblog maken over uw belevenissen, maar we zien steeds vaker weblogs met een zakelijke insteek verschijnen. Niet alleen Computer Idee heeft een weblog, ook bij Microsoft bloggen de medewerkers er fanatiek op los. Het leuke van een weblog is dat u uw eigen mening kwijt kunt en dat het interactief is: bezoekers kunnen een reactie achterlaten en meepraten. Hebt u weinig tijd of niet zoveel te vertellen, dan begint u een fotoblog of u gaat microbloggen. Meer over de bekendste vorm van microbloggen, Twitter, leest u hier.

Wilt u een website maken waarin u het één en ander wilt uitleggen, dan is een wiki misschien een beter idee. Een wiki is een website waarin u veel informatie op een gestructureerde manier kwijt kunt. Stel dat u al jarenlang rondloopt met het idee om een boek te schrijven over uw favoriete vakantieland, motorrijden of bonsai kweken. U hebt al heel wat informatie verzameld, maar het is er eigenlijk nooit van gekomen om het af te maken. Een wiki is dan het aangewezen medium: de informatie hoeft niet af te zijn, u kunt precies aangeven welke onderdelen nog ontbreken en u kunt eventueel anderen vragen om ze aan te vullen. Meer over wiki's leest u hier.

Welke hulpmiddelen u nodig hebt bij het maken van uw website is helemaal afhankelijk van de keuze die u maakt. Om bijvoorbeeld een instant-website of –weblog te kunnen maken zijn er allerlei online tools beschikbaar, bijvoorbeeld Google Page Creator of Blogger.com. Hiervoor hebt u geen eigen webruimte nodig, u hoeft geen software te installeren en u betaalt meestal niets. Verderop in dit artikel gaan we uitgebreid aan de slag met Google Page Creator.

Wilt u uw eigen website hosten, dan staat u voor een oerwoud aan mogelijkheden. In feite hebt u voldoende aan een webeditor en een ftp-programma. De webeditor zoals Dreamweaver of simpelweg Windows Kladblok gebruikt u om de webpagina's te maken. Het ftp-programma is nodig om de webpagina's te publiceren; het is niet meer dan een transportmiddel om uw webpagina's naar de webruimte op internet te verplaatsen. Het nadeel van deze aanpak is dat u snel het overzicht kwijtraakt als uw website groeit. Om tijd te besparen kunt u een websitesjabloon (template) gebruiken die u met uw eigen webinhoud (content) kunt vullen, maar het blijft vaak een heidens karwei om zo'n website te onderhouden.

Bij een dynamische website bevindt alle inhoud zich in een database. Als de bezoeker op een knop of link klikt wordt een pagina uit de database opgehaald en in de browser van de bezoeker getoond. Hiervoor wordt meestal gebruikgemaakt van de combinatie PHP en MySQL: MySQL is de database waarin u de bestanden opslaat en PHP is de taal waarmee u alle commando's geeft, bijvoorbeeld om webpagina's op te halen. Voorwaarde is wel dat uw hostingpakket beide ondersteunt. Alternatieven voor PHP/MySQL zijn ASP en ASP.NET van Microsoft (active server pages), JSP van Sun (java server pages), Perl en ColdFusion maar die zijn alleen geschikt voor de doorgewinterde webontwikkelaars. U kunt zelf een website met database ontwerpen en bouwen. Gemakkelijker is het om gebruik te maken van een kant-en-klaar content managementsysteem (cms).

1. Maak het niet te bont. Gebruik niet meer dan drie lettertypes door elkaar en wees spaarzaam met kleuren.

2. Kijk wat de concurrentie doet. Maak dan iets, wat anderen nog niet hebben.

3. Eenvoud voor alles. Zorg dat uw website er aantrekkelijk uitziet, maar maak er geen orgie van plaatjes en effecten van. Hoe overzichtelijker, hoe beter.

4. Laat uw website aan een ander lezen. Kies een proefpersoon die verstand heeft van websites en die niet bang is om kritiek te geven.

5. Verwijs naar andere websites door. Uw website kan niet elk onderwerp bestrijken. Link door naar anderen en laat anderen naar u linken; dat doet uw rangorde in Google ook goed.

U bent niet de eerste die een website met database probeert te bouwen. Duizenden mensen gingen u al voor, die allemaal tegen dezelfde problemen aanliepen. De kennis die daarmee is vergaard is terug te vinden in content managementsystemen. Dit zijn kant en klare systemen die u in uw webruimte installeert. Ze zorgen ervoor dat u via een simpel dashboard uw website kunt beheren, zodat u niet de weg kwijtraakt in de grote hoeveelheid bestanden. De meeste content managementsystemen zoals Joomla (voor websites) en WordPress (voor weblogs) bestaan in feite uit een gestructureerde verzameling php-pagina's die naar uw webruimte kopieert. Daarna kunt u via een webformulieren nieuwe pagina's aanmaken, de opmaak wijzigen en dergelijke. Sommige aanbieders (zoals WordPress) bieden zelfs aan om uw website te hosten, zodat u zelf niets hoeft te installeren. Het grote voordeel van kant-en-klare cms'en is dat er allerlei plugin verkrijgbaar zijn waarmee u nieuwe functies kunt toevoegen, zonder dat u iets hoeft te programmeren: denk aan tellers, een fotobibliotheek, een poll of een kant-en-klaar-contactformulier.

Html (Hypertext Markup Language) is dé basis van het web: alle webpagina's maken er gebruik van. De taal bestaat uit verschillende labels (tags) die de browser vertellen hoe bepaalde elementen op een webpagina eruit komen te zien. Wilt u een stukje tekst vetgedrukt maken dan zet u er de labels <B> en </B>omheen. De letter B staat voor Bold, het Engelse woord voor vetgedrukt.

Html bevat twee soorten labels: begin- en eindlabels. Als u aangeeft dat iets vetgedrukt moet zijn, moet u natuurlijk ook kunnen aangeven wanneer het vetgedrukte gedeelte weer eindigt. De meeste html-labels betaat in twee varianten, als begin- en eindlabel, maar niet allemaal. Het label <BR>voor een nieuwe regel is een veelgebruikte uitzondering.

We zeiden al: alle webpagina's maken gebruik van html. Elke webpagina is als volgt opgebouwd:

<HTML>
  <HEAD>
    <TITLE De titel van mijn webpagina </TITLE>
  </HEAD>
    <BODY>
      De inhoud van mijn webpagina.
    </BODY>
</HTML>

Om overzicht te houden op de structuur maken webontwikkelaars gebruik van inspringing. Een veelgemaakte fout is namelijk dat mensen vergeten een html-label af te sluiten.

Html kent geen methoden om plaatjes en tekst te positioneren. Om te zorgen dat een website een mooie indeling krijgt, werden ooit frames gebruikt. Hierbij wordt een website opgedeeld in een aantal gebieden. De frames zelf verwijzen weer naar html-bestanden, zodat u in feite een lappendeken van losse webpagina's te zien krijgt. Het navigatiemenu stopt u in een apart frame (meestal aan de linkerkant). Dat heeft als voordeel dat het navigatiemenu er op elke webpagina er hetzelfde uitziet. Elke webpagina heeft dezelfde indeling en u kunt de elementen tot op de pixel nauwkeurig positioneren. Tegenwoordig zijn frames hopeloos verouderd.

Vijf jaar geleden stapten webontwikkelaars over op tabellen. Het handige daarvan is dat de afmetingen van onderdelen op de website zich automatisch kunnen aanpassen: u kunt bijvoorbeeld instellen dat het navigatiemenu altijd 20% van de totale breedte in beslag moet nemen. Het grootste bezwaar tegen tabellen is dat het html-label <table> eigenlijk niet is bedoeld voor layout; maar omdat er vroeger geen alternatief was, werd er toch intensief gebruik van gemaakt.

Dat alternatief is er nu wel: tegenwoordig raadt de W3C, de organisatie die internetstandaarden bepaalt, aan om zogenoemde cascading stylesheets (CSS) te gebruiken. Daarbij splitst u de inhoud van de webpagina helemaal van de opmaak. De inhoud van de webpagina bevindt zich in een html-bestand (of in een database) en de opmaak wordt helemaal los daarvan geregeld in CSS. Het voordeel van CSS is dat het makkelijker aanpasbaar, flexibeler en toegankelijker is dan de oude aanpak. Wilt u de kleur of lettergrootte van alle kopteksten op uw website wijzigen, dan hoeft u dat maar op één plaats aan te passen. In het vervolg van deze webcursus zullen we nog vaker terugkomen op CSS en het gebruik ervan. U kunt bijvoorbeeld verschillende stylesheets voor verschillende apparaten en toepassingen maken; bijvoorbeeld een Mac-thema voor bezoekers die uw website met de browser Safari bezoeken en een eenvoudig thema voor bezoekers die uw website op een mobiel apparaat zoals een smartphone bekijken.

Ook op het gebied van html hebben de ontwikkelingen niet stilgestaan. De meeste webontwikkelaars zijn overgestapt van html naar xhtml (eXtensible Hypertext Markup Language). Deze taal verschilt inhoudelijk niet zoveel van HTML 4.01, maar is wel strikter geformuleerd en er is minder rekenkracht nodig om de code te verwerken waardoor het beter geschikt is voor apparaten met minder rekenkracht zoals smartphones. Een van de wijzigingen is dat alle labels gesloten moeten worden: een <p> voor een nieuwe paragraaf is niet voldoende; u moet de paragraaf ook afsluiten met een </p>. Bij 'gewone’ html is dat niet vereist, bij xhtml wel.

Bij veel hostingaanbieders zoals Lycos en Strato krijgt u de beschikking over software waarmee u uw website kunt bouwen. Omdat niet iedereen voor deze aanbieders kiest gaan we aan de slag met een dienst die voor iedereen toegankelijk is: Google Page Creator.

Zonder technische kennis kunt u met deze online webeditor snel een professioneel ogende website maken. U doorloopt de stappen van een wizard en ziet daarbij meteen hoe uw website eruit komt te zien. Eventueel kunt u aanpassingen in de html-code doen, maar dit is zeker niet noodzakelijk. De website die u maakt mag maximaal 100 MB groot zijn en is te bereiken via het webadres http://gebruikersnaam.googlepages.com. U hoeft geen hosting te regelen of contracten af te sluiten en u betaalt helemaal niets. Ideaal om zonder risico eens uit te proberen of een eigen website iets voor u is. Wilt u liever een weblog maken, dan heeft Google daarvoor de dienst Blogger.com maar u kunt ook terecht bij het Nederlandstalige Web-log.nl.

1. Ga naar Pages.google.com en meld uzelf aan met uw Gmail-adres.
2. U komt terecht op een pagina met uitleg. Ga akkoord met de voorwaarden en klik op de knop I'm ready to create my pages om de editor te starten.
3. U ziet nu een lege webpagina die u kunt gaan vullen. Wees niet bezorgd dat u uw werk tussendoor kwijtraakt: Google Pages slaat het automatisch op. Let op de opmaakknoppen linksboven; die heeft u straks ook nodig.

4. Ziezo, we hebben wat tekst ingevuld. Vul in ieder geval een titel, ondertitel en een paar regels tekst voor uw webpagina in. Met de Heading-linkjes in de linkerkolom kunt u koppen invoegen.
5. Met de opmaakknoppen linksboven in het browservenster kunt u afbeeldingen, hyperlinks en opmaak toevoegen.

6. Klik op de koppeling Change Look om een passend thema te kiezen.
7. Klik op de koppeling Change Layout om de indeling van de website te veranderen.

8. Zoals u ziet kan uw website er al snel professioneel uitzien. In de linkerkolom van de website maakt u hyperlinks naar andere webpagina's. Met de link Create new page bovenin het venster maakt u een nieuwe pagina aan.
9. Bent u tevreden, dan kunt u uw website publiceren. Ga terug naar de Site Manager om een overzicht te zien van de websites die u inmiddels hebt gemaakt.

In deel 2 van deze cursus bezoeken we nuttige (wat zeggen we: ónmisbare) websites waar u materiaal kunt vinden en kijken we naar kleuren en letters en hoe u die kunt gebruiken om uw site toegankelijker te maken.