Bouw je eigen website

De eerste pagina

Hoofdstuk 2

Voordat we verder gaan: sluit alle schermen.

aanwijzerOpen de map Cursus Kompozer 2009 en open vervolgens de map Programma’s. Installeer de browser Firefox (dubbelklik op het Firefox Setup 3.0.7. exe pictogram). Maak van Firefox je standaard browser. Bij de eerste keer starten van Firefox wordt gevraagd of je Firefox als standaard browser wil, kies voor Ja.
Installeer het programma PhotoFiltre (lees het lees-mij-eerst tekstbestand!)

aanwijzerStart het programma KompoZer via het pictogram op het bureaublad of via snelstarten onderin de taakbalk.

OriŽnteer je maar eens op alle knoppen. Als je met je muis een knop aanwijst, verschijnt er een onderschrift (alternatieve tekst). Hiermee wordt aangegeven wat de functie van deze knop is. Neem hier even de tijd voor.
werkbalken
De werkbalk lijkt erg veel op de werkbalk van een tekstverwerkingsprogramma, maar ook op de werkbalk van je browser, waarmee je diverse taken kunt uitvoeren. Met de derde knop van links opslaan, kun je de pagina’s opslaan op je eigen computer. De pagina’s worden opgeslagen als een html pagina.

aanwijzerOok al is de pagina die je voor je hebt nog helemaal leeg, klik op: opslaan Er verschijnt nu een scherm waarin je de titel van de huidige pagina moet opgeven.

aanwijzerType: Welkom op de website van..je eigen naam.
Dit is de naam die in het titelvenster te lezen is als je de pagina weer opent.

Er verschijnt nu weer een scherm met opslaan als, waar je de locatie en de bestandsnaam moet kiezen om de pagina op te slaan. Dit moet natuurlijk de map mijn homepage zijn.

aanwijzerSelecteer deze map, klik op openen en haal nu de bestandsnaam van: welkom op de website van... helemaal weg en verander dit door index.
opslaan als

Ter verduidelijking.

De eerste pagina van een website wordt altijd en in alle omstandigheden de index.html genoemd. Als je meerdere webpagina’s hebt, dan weet je nu dat de openingspagina van je website de index.html pagina is. Dit is namelijk de belangrijkste pagina. Als iemand met een zoekmachine naar een website zoekt of in de browser een internet adres intypt, gaat de browser altijd op zoek op de server naar de index.html om die als eerste te laten zien. Hoe je de overige pagina’s noemt is niet belangrijk, maar zonder index wordt je website niet gevonden en is die dus onvindbaar.

Het grote witte vlak dat je nu onder de werkbalken in KompoZer ziet is in feite je internetpagina. Hierin kun je dus teksten, plaatjes enzovoort gaan plaatsen. Tekst invoegen, gaat op dezelfde manier als in Word. Dit geldt ook voor het veranderen van je lettertype (GROOT, klein, cursief, vet, kleur, uitlijning enzovoort. Om een ander lettertype te selecteren ga je via het tabblad Opmaak / Lettertype naar het lettertype dat je voorkeur heeft, maar let hierbij wel op. Niet iedere PC heeft dezelfde lettertypen. Het lettertype dat je wilt gebruiken kan bij een andere gebruiker afwezig zijn. Gebruik dus een veelvoorkomend en standaard lettertype, zoals: Arial, Arial Black, Courier New, Tahoma, Comic-Sans, Georgia, Impact, Times New Roman, Trebuchet en Verdana. Je kunt bijvoorbeeld het lettertype Agnes wel heel mooi vinden, maar als de PC van je bezoeker dit lettertype niet heeft krijgt hij gewoon een standaard lettertype te zien en zo gaat het beoogde effect dus verloren.

aanwijzerType in je lege pagina: Welkom op de website van..je eigen naam

De tekstgrootte staat standaard ingesteld op variabele breedte, dat wil zeggen dat de 11 bezoeker van je website het lettertype en de grootte te zien krijgt, zoals dat op zijn / haar computer is ingesteld. Deze knop vindt je in de werkbalk onder tekst.
teksteigenschappen
Je kunt met deze knop de tekstgrootte instellen, maar ook een alinea instellen of terug naar de standaard tekst. KOP1 heeft de grootste letter, KOP6 de kleinste. Zodra je aangeeft dat kop 1 weergegeven moet worden zal dat ook op de computer van de bezoeker worden weergegeven. Zet de cursor maar ergens in de eerste regel en geef deze kop 1 mee.

De opmaak

aanwijzerMet de knop opmaak in de werkbalk kunnen we de pagina opmaken. Klik daar op het item: paginakleuren en achtergrond. Er verschijnt nu een venster, zet het bolletje voor: Aangepaste kleuren gebruiken.
paginakleuren en achtergrond
Nu is het mogelijk om voor alle onderdelen in het scherm andere kleuren te gebruiken, dan de standaard kleuren. Wil je achtergrondkleur, dan klik je op de knop naast de tekst achtergrond. Er verschijnt dan een kleurenkiezer waar mee je kleuren kunt wijzigen.

aanwijzerWijzig normale tekst in rood.
Wijzig de achtergrondkleur in lichtblauw.
klik op OK

aanwijzerKlik nu in de werkbalk op Opslaan en vervolgens op de knop Bekijken. De browser wordt gestart en laat de pagina nu zien. Vergeten om een pagina op te slaan? Dat is niet erg, je wordt er automatisch op gewezen als je een pagina niet hebt bewaard als je op de knop Bekijken klikt.

aanwijzerAls je nog niet eerder met de browser Firefox hebt gewerkt en je start de browser, dan zal er een scherm verschijnen dat toestemming vraagt om een invoegtoepassing te laten starten om het http-protocol te laten uitvoeren. Geef hiervoor toestemming en laat de computer dit onthouden.

Ga terug naar KompoZer.

Het invoegen van bestanden

aanwijzerGeef allereerst twee maal een Enter aan het einde van de eerste regel.

aanwijzerKlik in de menubalk op: invoegen Kies in het menu dat verschijnt: Afbeelding Klik op het gele mapje (Nvu gebruikers klikken op de knop: Bestand kiezen).
afbeeldingseigenschappen 1

afbeeldingseigenschappen 2

Nu verschijnt de map: mijn documenten

aanwijzerOpen in de map mijn documenten: de map mijn homepage en vervolgens de map: Afbeeldingen.

aanwijzerSelecteer de afbeelding: bosjebloemen.jpg Klik vervolgens op Openen In het scherm dat verschijnt staat een bolletje voor alternatieve tekst: vul hier altijd concreet in waar het hier om gaat, in dit geval vul je in: foto van een bosje bloemen. Klik op OK en vervolgens in de werkbalk op: Opslaan.

aanwijzerBekijk nu de pagina in je browser en vervolgens weer sluiten.

Alternatieve tekst

Alternatieve tekst is vooral en met name belangrijk voor blinden en slechtzienden die 14 met gesproken tekstsoftware moeten werken. Wanneer er geen alternatieve tekst wordt gebruikt, zal een blinde / slechtziende veel moeite hebben om te navigeren op een website. Vooral omdat de spraakgestuurde software die zij gebruiken de alternatieve tekst kan voorlezen. Stel je hebt een pagina gemaakt met een flink aantal foto’s zonder alternatieve tekst te hebben gebruikt. Er wordt niks voorgelezen en de foto’s worden niet herkend, dus blijft het stil. Deze bezoeker zal geen idee hebben wat er op de website te zien zal zijn. De oorspronkelijke doelstelling van het internet was (en dat is het nog steeds): gratis en vrije informatie toegang voor iedereen, waar ook ter wereld. Als je daar het belang van inziet zul je niet gauw vergeten alternatieve tekst te gebruiken.

Invoegen van een afbeelding

Een afbeelding in een pagina wordt altijd daar ingevoegd, waar de cursor staat. Staat de cursor in het midden van de pagina dan wordt een afbeelding dus gecentreerd ingevoegd. Je kunt dus al van te voren bepalen waar een afbeelding wordt ingevoegd. De afbeeldinglocatie (dit is de map waar de afbeelding is opgeslagen; de map Afbeeldingen) mag in de webpagina nooit een verwijzing hebben naar een andere map of locatie, dus niet naar je C-schijf en ook niet naar Mijn documenten.
afbeeldingeigenshappen 3
Je ziet in de regel van de afbeeldinglocatie een hele lange verwijzing. Als je deze pagina samen met de afbeelding nu op het internet zou zetten en je zou de pagina op het internet bekijken, dan krijg je een pagina te zien met daarin een rood kruisje (Internet Explorer) of een gebroken puzzel stukje (Firefox). Hoe kan dat? De pagina en de afbeelding staan op het internet en de browser vraagt de afbeelding op. Deze gaat nu zoeken naar: file://C:/ Documents and Settings/ enzovoort Maar op de server staat helemaal geen file://C:/Documents and Settings/ enzovoort Er staat straks op de server wel een map Afbeeldingen met daarin de afbeelding: bosje 15 bloemen.
En zo moet de verwijzing ook zijn en dat noemen we relatief.
In de verwijzing in de schermafbeelding hierboven is de verwijzing nog absoluut.

Als je de pagina nu opslaat en weer opent, moet je een vinkje plaatsen voor: √ URL is relatief ten opzichte van paginalocatie en dan zie je alleen staan: Afbeeldingen/bosjebloemen.jpg en dat is correct.
afbeeldingeigenschappen 4
Even opletten: Dit is een schermafbeelding van het programma Nvu. Waar je hier de knop Bestand kiezen... ziet staan is dat in Kompozer een opengeklapt geel mapje. Je HTML pagina’s komen later op een server te staan samen met een map Afbeeldingen. Er is dan geen verbinding meer met jouw computer. Wordt er in de html pagina toch een verwijzing naar jouw computer gedaan, wat onmogelijk is, dan zal het gevolg zijn: een rood kruisje omdat de afbeelding niet gevonden kan worden. Kortom: alle afbeeldingen en pagina’s die je gebruikt, verwijzen direct naar de locatie waar ze zijn opgeslagen en zijn daarom altijd relatief.
Als een afbeelding op een internetpagina verwijst naar een map: Afbeeldingen, dan moet die map ook daadwerkelijk op het internet staan. Als voorbeeld, om goed te zien waarom dat nu zo vaak verkeerd gaat (klassieke beginnersfout) kun je dat hier bekijken:

http://www.kompozer.nl/roodkruis/

Als alle pagina’s die in dit cursusboek beschreven worden zijn gemaakt, dan komt uiteindelijk de eerste pagina van de website (index) er als volgt uit te zien:
voorbeeldwebsite
Heb je straks alle pagina’s gemaakt en je kijkt dan in de map Mijn Documenten > Mijn Homepage, dan zou dat er zo moeten komen uit te zien: een map met afbeeldingen en daaronder de gemaakte pagina’s.
voorbeeldmap
Zoals je ziet in de schermafbeelding zie je de pagina’s niet zo staan, volgens de volgorde waarin je ze gemaakt hebt, maar op alfabetische volgorde, Windows doet dat automatisch.

kompozerlogo

schelpen

Ontwerp je eigen website met
Kompozer