De 'andere' kant van een webpagina
Door B. J. H. H. van DaalenIedere pagina op de website heeft een zichtbaar (de website) en een onzichtbaar deel (de broncode). Met een internetbrowser, bijvoorbeeld Netscape of Explorer, ziet iedereen die zich op het world wide web begeeft een prachtig opgemaakte pagina. Deze is opgebouwd uit verschillende elementen: tekst, tekstknoppen, (bewegende) afbeeldingen, hyperlinks en zo nodig video- en audiolinks. Elk element heeft z'n eigen html-code, die voor een bezoeker aan een webadres niet te zien is.
De sitebouwer heeft verschillende mogelijkheden om een website te maken.
Alles wat je moet kennen om een eenvoudige site op te zetten is html (HyperText
Markup Language). De wat ingewikkelder sites gebruiken naast html
bijvoorbeeld toepassingsprogramma's als Flash, Shockwave en Java.
De html-taal bestaat uit codes die van een tekstbestand een webpagina maken. Die codes kunnen gewoon ingetikt worden, maar een bouwer kan ook gebruikmaken van een html-editor. Er zijn heel eenvoudige editors verkrijgbaar, maar programma's als GoLive, FrontPage en Dreamweaver hebben veel meer mogelijkheden en maken het de bouwers heel makkelijk om in zeer korte tijd een website te publiceren op het internet.
Aan de hand van de homepage van het Nationaal Rijtuigmuseum (www.rijtuigmuseum.nl) wordt de opbouw van de zichtbare en de onzichtbare kant van een homepage uitgelegd.
Klikken
De homepage van het Nationaal Rijtuigmuseum (illustratie 1) bestaat
uit verschillende onderdelen. Boven aan de pagina staat de zogenaamde header
(1). Hierin zijn meestal de titel en het logo van de organisatie of het
bedrijf te zien.
Onder de header heeft de webbouwer de pagina in twee kolommen verdeeld. De eerste kolom bestaat uit een plaatje met daarop enkele trefwoorden (2). De andere kolom (3) bestaat uit tekst en afbeeldingen.
Bij de eerste kolom kun je met de muis klikken op de vermelde woorden, zoals Museumcollectie of Dienstverlening. Deze zogenaamde links verwijzen naar andere pagina's van de website. Het is te vergelijken met de verwijzingen naar pagina's boven aan de voorpagina van de papieren krant. Bij het onderwerp Interessante Links heeft de bouwer van de website links verzameld die verwijzen naar andere webpagina's.
De tweede kolom bevat verschillende onderdelen. Er is tussen de tekst een afbeelding geplaatst (4). Onder het plaatje staan even verder de woorden ”NRMkids site” onderstreept (5). Dit is een zogenaamde hyperlink. Als je met de muis hierop klikt, ga je naar de betrokken pagina, in dit geval naar de webpagina speciaal voor kinderen.
Helemaal onderaan heeft de bezoeker van de website de mogelijkheid een e-mailtje te sturen (6) naar het museum voor meer informatie. De bouwer heeft een mogelijkheid ingebouwd waarbij de bezoeker naar de homepage van de maker kan gaan.
Achterkant
Hoe ziet de 'achterkant' van deze website eruit? Dat is te zien op
afbeelding 2. Tussen de vishaakjes <commando> staan de opdrachten die
de browser moet uitvoeren. Ze eindigen altijd met </commando>. Zo begint
elke pagina met <HTML>(1). Daarna komt er een stuk tekst die belangrijk
is voor zoekmachines, maar niet leesbaar is op de website. Deze gegevens
staan altijd tussen <HEAD>(2) en </HEAD>. In de head staat bij de
META-informatie wie de auteur is (3), met welk programma deze pagina is
gemaakt (4), de classificatie (5), de beschrijving van de site (6) en sleutelwoorden
(7).
De metagegevens zijn van belang om via een zoekmachine de website te kunnen vinden. Zoekmachines struinen 24 uur per dag het world wide web af om de meta-informatie te indexeren. Als iemand zoekt op enkele sleutelwoorden die ook voorkomen in de beschrijvingen van de website, is de kans groot dat deze pagina op het zoekscherm wordt vermeld.
De <TITLE>(8) geeft de beschrijving weer in de balk helemaal boven aan de browser (zie afbeelding 1, helemaal bovenaan). In de volgende regel (9) staan de gegevens over de tekstkleur <BODY TEXT>, de achtergrondkleur <BGCOLOR>, de kleur van links in de tekst <LINK>, de kleur van de bezocht link <VLINK> en de kleur van een nog niet bezochte link <ALINK>. Alle kleuren zijn op internet ingedeeld in een zestal letters en/of cijfers.
De header, boven aan de pagina van www.rijtuigmuseum.nl staat gecentreerd <CENTER>(10). Bij <IMG SRC> staan de gegevens over de afbeelding. In dit geval heet het plaatje ”nrmkop2psd.JPG”.
De html-code daarna (11) vermeldt uit hoeveel kolommen de tabel onder de header bestaat. In dit geval zijn dat er twee. In de navolgende code is de afbeelding met links in de eerste kolom van de homepage vermeld. Het plaatje is klikbaar gemaakt, waardoor met behulp van de muis de desbetreffende pagina's bekeken kunnen worden.
Onder aan deze afbeelding staat nog een klein logootje van een gratis teller (13). Bezoekers kunnen op dit logo klikken, waarna een pagina te zien is met gegevens over het aantal bezoekers van de website van het Nationaal Rijtuigmuseum.
Lettertype
De volgende html-code (14) positioneert de tweede kolom, waarbij even
verder aangegeven wordt welk lettertype nodig is om de tekst te kunnen
lezen (15). In dit geval is bij <FONT FACE> ”Times New Roman, Times”
ingesteld. Dit lettertype zit eigenlijk standaard op elke computer. Is
er op een webpagina een lettertype gebruikt dat niet op de pc is geïnstalleerd,
dan zal bijna altijd het Times-lettertype te zien zijn.
Het commando <FONT SIZE=+1> vermeldt de grootte van de letter. In dit geval is de gehele tekst ingesteld op ”groter dan normaal”.
De volgende bronnen (16, 17, 18 en 19) zijn eigenlijk op dezelfde manier opgezet. Alleen is bij de eerste (16) het plaatje <IMG SRC=intro2.gif> gedefinieerd. Even verder staat aangegeven dat het plaatje links van de kolom gepositioneerd moet worden <ALIGN=LEFT>.
In de broncodes daaropvolgend (20 en 21) staan de gegevens over de afbeelding onder aan de homepage van het Nationaal Rijtuigmuseum, met daarbij de mogelijkheid een e-mailtje te sturen: <A HREF= ”mailto:rijtuigmuseum@tref.nl”>.
