De eerste pagina
Hoofdstuk 2
Voordat we verder gaan: sluit alle schermen.
Open 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!)
Start 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.
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.
Ook 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.
Type: 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.
Selecteer deze map, klik op openen en haal nu de bestandsnaam van: welkom
op de website van... helemaal weg en verander dit door index.
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.
Type 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.
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
Met 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.
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.
Wijzig normale tekst in rood.
Wijzig de achtergrondkleur in lichtblauw.
klik op OK
Klik 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.
Als 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
Geef allereerst twee maal een Enter aan het einde van de eerste regel.
Klik 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).
Nu verschijnt de map: mijn documenten
Open in de map mijn documenten: de map mijn homepage en vervolgens de
map: Afbeeldingen.
Selecteer 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.
Bekijk 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.
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.
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:
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.
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.
