Hoe maken we doeltreffend een webpagina?

Inleiding

Het maken van een webpagina is heel eenvoudig. Het lijkt alleen moeilijk omdat u niet begrijpt hoe u een pagina bouwt en welke regels gelden. Bovendien raakt u verward door alle technische termen. Laten we een kleine pagina maken, de techniek doorgronden en stilstaan bij de eisen die de lezer en u stellen aan een webpagina.

Onderwerpen

We staan in dit document stil bij:

Wat is een webpagina?

Een webpagina is een tekstbestand. U stuurt dit tekstbestand naar een computer waarop een programma draait om deze tekst als pagina op het wereld wijde web aan te bieden, een zogenaamde webserver.

Het tekstbestand kunt u aanmaken in elke tekstverwerker, bijvoorbeeld Microsoft Word of LibreOffice Writer. U slaat het bestand op als html-bestand. Open het bestand in een browser of zie daar .. uw webpagina. (Hoe u de pagina op uw homepage op uw webserver krijgt, kunt u vragen aan uw internetaanbieder.) Vaak is het resultaat niet helemaal zoals u het had ontworpen. Dan is een beetje kennis over de opbouw en werking van een html-pagina belangrijk.

Een webpagina is een tekstbestand. Openen voor een goed begrip in uw tekstverwerker een bestaand rapport en sla het op als ascii-bestand het noem het bestand proef.htm. Open vervolgens dit bestand in uw browser. De weergave is lelijk. De tekst staat achter elkaar zonder regeleinden en witregels. De browser legt uw tekst uit volgens de standaard afspraken: zet alle tekst achter elkaar op het scherm tot dat een opmaakcode een andere weergave voorschrijft.

De opmaakcode is in het begin verwarrend, maar eigenlijk vrij simpel. Alles tussen < en > zijn opmaakcodes. Teksten tussen <en > noemen we labels; in het Engels tags. Deze labels legt de browser uit als een programmeertaal. Uw tekst kende geen labels en daarom zet de browsers alle tekst achter elkaar op het scherm. Door het bestand op te slaan als html-bestand maakt de tekstverwerker wel labels aan. Open hetzelfde rapport in de tekstverwerk en sla het op als html-bestand met de naam proef2.htm. Open het vervolgens in de browsers en let op het verschil. De opmaak lijkt veel op die in de tekstverwerker. U kunt proef2.htm ook openen in een editor, bijvoorbeeld notepad. U ziet dan labels tussen < en >.

Een webpagina bestaat uit tenminste:

<html>
<head> ... </head>
<body> ... </body>
</html>

Bijvoorbeeld: een <hmtl> label opent het document. Een </html> sluit het document. De / geeft het einde van een label aan. De opdrachten tussen twee labels noemen we een blok.

Een goed html-document bestaat tenminste uit drie labels (zes met de eind labels meegerekend) en dus drie blokken:

In de body plaats u de tekst. U wilt die natuurlijk mooi opmaken zodat de pagina er fraai uitziet.

Scheiding vormgeving en inhoud

Voordat we verder gaan is het erg belangrijk stil te staan bij de gedachten achter html-pagina's. De eerste leidraad is het scheiden van inhoud en vormgeving. Vormgeving is bijvoorbeeld de lettergrootte, vet, cursief en de kantlijnen. Inhoud is wat u nu leest. Om deze splitsing te bereiken, passen we cascading style sheets (CSS) toe. Een vakterm die in het Nederlands "Trapsgewijs opmaakmodel" kan heten. In een CSS-bestand staat gewoon hoe u de teksten wilt weergeven. U kent dus opmaak doe aan de labels. Deze pagina gebruikt het style sheet alforto.css met onder andere:

body {
	font-size: 11pt;
	line-height: 13 pt;
	font-family: Arial, sans-serif;
	color: black;
	background-color: #fffff0; 
	position: absolute; width: 460px; left: 30px; top: 10px; 
	}

In gewoon Nederlands staat hier dat voor alle niet speciaal aangemerkte test, het body-label, de lettergrootte 10 punts is, de regelhoogte 12 punts, het lettertype Arial, de tekstkleur zwart is, de achtergrondkleur iets gelig is en de tekst blijft tussen een gebied van links 30 puntjes en rechts 460 punten. Hier kunt u het stylesheet downloaden: http://www.alforto.nl/css/alforto.css.
De volledige uitleg van CSS-bestanden kunt u lezen op http://www.w3.org/TR/REC-CSS2.

De opmaakinformatie legt u slechts eenmaal vast in een apart bestand. Hierdoor bent u in staat het lettertype van al u pagina's door een handeling te veranderen. Bovendien hebben al uw pagina's exact dezelfde opmaak, dus een goede huisstijl.
In het html bestand verwijst u naar het CSS-bestand via het link-label. De regel met link leest als: ik verwijst naar een stylesheet met de naam alforto.css en het type is text/css. Hierdoor weet de browser welke acties hij moet uitvoeren.

 <html>
<head>
<title>Mijn eigen titel van mijn webpagina</title>
<link rel="stylesheet" href="alforto.css" type="text/css">
</head>
<body>
<p>Mijn eerste bladzijde op het web.</p>
</body>
</html>

Het label <p> staat voor paragraaf en begint op een nieuwe regel. De belangrijkste opmaaklabels zijn verder:

U kunt alle labels nalezen op de label index of het html spiekbriefje

Voor kunstige toepassing van CSS kunt u terecht op: http://www.meyerweb.com/eric/css/, http://www.positioniseverything.net/index.php of CSS play, een echte aanrader.

Waarom opmaak scheiden van inhoud

Het Wereld wijde web is en moet platform onafhankelijk zijn. Webpagina's brengen dezelfde boodschap naar lezers met verschillende besturingssystemen. (Be, Linux, Mac, OS/2, Be, Unix, Windows), verschillende browsers (grafisch, alleen-tekst, braille of voorlees machine voor blinden) en andere apparatuur (zoekmachines, indexmakers), en verschillende gebruikersinstellingen, (schermresolutie, venster groottes, lettertypes, kleuren, grafieken aan of uit). Iedereen ziet hierdoor uw pagina anders dan u het had ontworpen op uw systeem. Zie statistieken van gebruikers voor een actuele weergave van verschillende systemen van de lezers. Door de inhoud te scheiden van de opmaak kunnen blinden bijvoorbeeld een voorleesapparaat benutten en kunt u de kleurweergave op een projector in één bestand aanpassen. De lezer laadt uw pagina ook sneller omdat de browser de opmaakcodering slechts eenmaal hoeft op te halen. Bovendien zien al uw pagina's er hetzelfde uit: een perfecte huisstijl.

Bedenk wel dat HTML een content markup language, niet een desktop publishing of een presentatie omgeving is. Veel vragen in de nieuwsgroepen gaan over animaties, achtergrond en bijzondere lettertypes. Begin echter eerst met het organiseren van de inhoud in paragrafen, titels, lijsten en afbeeldingen. Denk eerst aan de inhoud en dan aan de opmaak. De opmaak kunt u altijd nog toevoegen.

Grafisch ontwerp

Bij het maken van uw pagina moet u de lezer voor ogen houden. Helaas bestaat DE lezer niet. Iedereen is anders en heeft verschillende voorkeuren. Toch zijn uit laboratorium onderzoek (bijvoorbeeld camera's die pupil omvang meten) objectieve normen ontstaan. De meeste mensen geven de voorkeur aan:

Zie ook Hoe maak je een perfecte grafiek?

Waar zijn de plaatjes?

U vindt uw eerste webpagina heel mooi, maar een beetje saai. Geen sprankelende foto's. Geen mooie grafische plaatsje. Goed, die plaatst u op uw pagina via een link, een verwijzing.

<img src="grafisch/alforto.png" alt="alforto" align="right" height="125" width="180">

alforto U leest dit als: Plaats een afbeelding (img) uit de bestand ..\grafisch/alforto.png aan de rechter kant van de pagina en als de afbeelding ontbreekt, toon dan de tekst alforto. Maak de foto 125 puntjes hoog en 180 breed. Dit voorkomt het dubbel opbouwen van een scherm, omdat de browser meteen ruimte voor de afbeelding kan reserveren. Een browser toont namelijk eerst de tekst en daarna afbeeldingen. Een afbeelding kan een afbeeldingsmap krijgen. De lezer kan dan klikken op een deel van de afbeelding en een actie uitvoeren.
Maak de afbeelding in geheugen omvang zo klein mogelijk. Sla de afbeeldingen hiertoe op als png bestand met 16 kleuren of jpg bestand met 50% compressie. Zie de handleiding van uw favoriete bitmap bewerkingsprogramma voor de details. Vrijwel alle afbeeldingen op deze pagina's zijn 4 keer kleiner gemaakt door deze trucs. Het verschil met het origineel is vrijwel niet te zien. De afbeelding komt wel veel sneller op het scherm.

Kolommen en tabellen

U vindt de opbouw van de pagina nog steeds niet goed. U wilt bijvoorbeeld twee kolommen naast elkaar. Dat kan met tabellen.

<table>
  <tr>
    <td>
      Kop kolom een
    </td>
    <td>
      Kop kolom twee
    </td>
  </tr>
  <tr>
    <td>
      Kop kolom een tekst
    </td>
    <td>
      Kop kolom twee tekst
    </td>
  </tr>
</table>
Kop kolom een Kop kolom twee
kolom een tekst kolom twee tekst

Het label <table> geeft aan dat een tabel start. <tr> start een rij en <td> begint een kolom. (Een / beëindigt een label.) Een tabel kan in een tabel staan. In de tabel kunnen teksten, afbeeldingen, vrijwel alle elementen van een html-bladzijde staan. De kop van deze pagina is bijvoorbeeld een tabel met links een kolom die twee rijen omvat, dan een blauwe rij, dan een witte rij en vervolgens een grijze rij. Zie ... voor meer informatie over tabellen.

Meerdere onafhankelijke vlakken op één scherm

Vroeger maken we met zogenaamde frames op het scherm onafhankelijke vlakken. In elk vlak konden we een onafhankelijke pagina laden. Het gebruik van frame ontraden we tegenwoordig. Het is veel beter om een css bestand toe te passen. Deze pagina maakt van deze techniek gebruik.

In het css bestand wijzen we een naam toe aan een vlak op het scherm. Dit vlak geven we een positie. Hiermee kunnen we verschillende vlakken maken die we met de verschillende name kunnen vullen. Een voorbeeld van een css-bestand is

#kolomlinks{position: absolute; left:5px;top:10px;width:200px;}

Hier staat in gewoon Nederlands dat een vlak met de identificatie kolomlinks 5 pixels van de linkerkant moet starten, 200 pixels breed is en bovenaan een marge heeft van 10px. (Hier staat het Alforto logo in.) Door het toevoegen van twee regels met

#kolommidden {margin-left: 200px;  margin-right:200px; }
#kolomrechts {position: absolute; right:10px;top:10px;width:192px;}

kunnen we drie kolommen maken. De linker en rechter kolom hebben een vaste breedte. De breedte van de kolom in het midden in afhankelijk van de breedte van het scherm en kent aan beide kanten een marge van 200px; hier staan de linker en rechter kolom in.

In de html-pagina kunnen we nu de plaats van een tekst bepalen door de indentificatie (id) rond een tekst te plaatsen. Bijvoorbeeld

<div id="kolomlinks">
Dit is een tekst in de linker kolom.
</div>
<div>id="kolommidden">
Dit is een tekst in het midden.
</div>
<div id="kolomrechts">
Dit is een tekst in de rechter kolom.
</div>

Op deze manier zij vele indelingen te maken. Zie bijvoorbeeld The Layout Reservoir .

Navigatie door de pagina's

We kunnen nu mooie pagina's maken met meerdere vlakken, met tabellen en fraaie afbeeldingen. Is deze mooie pagina ook gemakkelijk in gebruik? Laadt de pagina snel genoeg? Begrijpt de lezer meteen de besturingswijze?

We gebruiken al twintig jaar lang computer op grote schaal. Toch is het gemiddelde programma bij het eerste gebruik bijna niet te begrijpen. En de lezer van uw pagina ziet uw pagina waarschijnlijk voor het eerst. Hoe kunnen we een bladzijde eenvoudig in gebruik maken?"

Het grote probleem bij het maken van een programma of webpagina is dat gebruikers de weg kwijt raken. U hebt vijf keer geklikt en zit nu in het onderdeel catalogus, orders voor kleine auto's, maar zoekt naar Dinky Toys. Hoe gaat u snel terug? Ja, juist met de terugknop van de webbrowser. Maar kunt u ook meteen naar een ander onderwerp springen zonder eerst de weg terug af te leggen?

Veel lezers hebben problemen met niveaus, verdiepingen of boomstructuren in programma's of pagina's. Met niveaus bedoelen we hier menuopties die de werking van een pagina veranderen of de navigatie blokkeren. U kunt bijvoorbeeld in de catalogus niet rechtstreeks kiezen voor "Wie werkt hier" terwijl dat wel op het hoofdmenu staat. Beruchte voorbeelden zijn de dos programma's met menu's als: bewerk, auto, stoel, achterbank, kleur. Dit noemen we ook wel de actie-object keuze. Eerste kiezen wat we gaan doen en daarna het onderwerp. Omdat we de actie bewerk hebben gekozen, kunnen we geen gegevens invoeren of verwijderen. Als we in dit voorbeeld een kleur willen verwijderen, moeten we eerst helemaal terug en vervolgens opnieuw alle keuzes maken.

Uit vele onderzoekingen blijkt dat lezers de voorkeur geven aan het object-actie model en een statusloze besturing. Statusloos geeft aan dat elke optie gekozen kan worden uit elke andere mogelijkheid. Dit is erg gemakkelijk in de bediening maar moeilijk te programmeren. In het object-actie model maakt de gebruiker eerst een keuze van het object en daarna pas van de handeling. In object-actie termen is de menukeuze in het auto voorbeeld: auto, achterbank, kleur, wijzig. Verwijderen van een kleur is eenvoudig uit te voeren door bij de laatste menu optie een andere actie te kiezen.

Vele webpagina's kennen daarom een standaard stramien zoals deze bladzijde. De besturing links is altijd te kiezen. Niveaus komen niet voor. Dit lijkt niet spectaculair, maar is wel zeer handig in gebruik. Een ander vaak voorkomende indeling in het verdelen van de pagina in drie delen: links afbeeldingen, rechts afbeeldingen en in het midden de teksten.

Hiernaast is het de vraag of schuifbalken naast en onder de tekst de leesbaarheid van een pagina aantasten. Tot voor kort waren de experts van mening dat alle schuifbalken afbreuk deden aan de leesbaarheid. Door het gebruik van computerprogramma's zijn de lezers echter gewend aan schuifbalken. Schuifbalken aan de rechterkant zijn nu geaccepteerd. Alleen schuifbalken onder de tekst wijzen de experts nu af.
Langere pagina's verkleinen het aantal verwijzingen en laadacties. Deze pagina hadden we bijvoorbeeld kunnen opdelen in elf kleine bladzijden. Dit leidt tot extra verwijzingen waardoor de lezer de weg kan kwijt raken. Bovendien moet de lezer 10 keer wachten op het laden van de nieuwe pagina. We hebben daarom eén pagina gemaakt. Deze pagina komt vrijwel meteen op het scherm. De lezer kan onmiddellijk gaan lezen, terwijl de browser de rest van de pagina laad. Een lezer met een inbelverbinding kan de verbinding verbreken en toch de gehele bladzijde lezen.

Standaarden

Schrijf uw teksten volgens de nieuwste standaard afspraken. Gebruik nooit een codering die alleen voor een bepaald type browser geschikt is. Morgen is de browser oud en werkt uw code niet meer. Zonde van de tijd en moeite. De xhtml is de nieuwste standaard voor webpagina. Html is een onderdeel van Xhtml. Voor html pagina's zijn de volgende regels van belang:

Zoekmachines

Zonder opname in een zoekmachine weten uw lezers niet dat uw pagina bestaat. Als u pagina's in de Nederlandse taal schrijft, zijn de zoekmachines in Nederland en België van belang, tezamen met enkele grote Amerikaanse zoekmachines zoals Google en Yahoo. U kunt uw pagina op elke zoekmachine aanmelden.

Vele providers blokkeren vaak de toegang tot webpagina's voor zoekmachines omdat ze tot een derde van de capaciteit oppeuzelen. Hiervoor bestaan allerlei standaard afspraken. Zie ook The Web Robots Pages. Door uw pagina aan te melden bij een zoekmachine, krijgt u meestal het resultaat van de zoekactie op het scherm. Ziet u: "Toegang verboden" dan is de toegang niet toegestaan. Overleg dan met uw provider om dit probleem op te lossen.

De zoekmachines gebruiken allerlei zoekmethoden. Ze snappen in ieder geval niets van programmeertalen, van plugins en van opmaak. Een zoekmachine ziet het woord mijn niet als u de eerste letter vet maakt met <b>M<\b>ijn .(Het label <b> staat voor vet.) Nog een goede reden om CSS-bestanden te gebruiken.
Sommige zoekmachines lopen alle pagina's op uw website na; andere alleen de hoofdpagina. Zorg dus dat op de hoofdpagina alle termen voorkomen die voor het zoeken belangrijk zijn. Andere zoekmachines maken gebruik van meta-labels. De zijn labels die nader aangeven wat het doel is van de pagina. Deze pagina gebruikt:


<title>Hoe maken we doeltreffend een webpagina?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="nl"/>
<meta id="author" content="Arjen Meijer"/>
<meta id="description" content="Tips en trucs om handig een webpagina te maken"/>
<meta id="keywords" content="webpagina, html"/>

De titel spreekt voor zich. Content-Type geeft aan dat we de utf-8 tekenset gebruiken. In utf-8 staan alle bijzondere tekens. Content-Language is voor spraaksynthesizers. De author ben ik. De description komt op de pagina met zoekresultaten te staan. De keywords zijn sleutelwoorden waarbij sommige zoekmachines indexeren. Te veel woorden maken dat uw pagina een lage score krijgt en dus op pagina twintig verschijnt. Te weinig woorden zorgen dat uw lezers uw pagina niet kunnen vinden. Copieer deze labels in elke pagina en maak ze specifiek.

Veranderende pagina's

Deze kleine introductie in het maken van pagina's lokt meteen nieuwe vragen uit:

Javascript is een programmeer taal om webpagina's te maken. Java is een programmeertaal een programma's te maken. Plugins zijn toevoegingen aan de browser om speciale acties uit te voeren. Zie ook:

Controleer uw pagina

Ten slotte, het is een goede gewoonte om uw pagina te laten controleren. Foutloze pagina's zien er op alle browsers goed uit en laden sneller. U kunt uw pagina laten controleren bij:
Site Valet Developer Tools
Html validatie

Naar begin pagina

Datum laatste wijziging 12 november 2006.