ONTWERP JE EIGEN MET KOMPOZER

Transcriptie

1 ONTWERP JE EIGEN MET KOMPOZER 2006 Auteur en Copyright Freek Pol. Dit document mag worden gekopieerd en / of verspreid worden zonder toestemming van de auteur mits de bron / auteur wordt vermeld en daarvan op de hoogte wordt gesteld. Commerciële verspreiding is nooit toegestaan. 3 e herziene uitgave April 2009 lingedijk@gmail.com

2 Inhoudsopgave Voorwoord 2 Inleiding 4 Hoofdstuk 1 Voorbereiding 6 Hoofdstuk 2 Eerste pagina 9 Hoofdstuk 3 Een nieuwe pagina 17 Hoofdstuk 4 Hyperlinks 20 Hoofdstuk 5 Controleren HTML-code 24 Hoofdstuk 6 Een fotopagina maken 27 Hoofdstuk 7 Meerdere foto s toevoegen 31 Hoofdstuk 8 Introductiepagina 38 Hoofdstuk 9 Linkpagina 43 Hoofdstuk 10 Publiceren van de website 45 Hoofdstuk 11 Een tweede website 50 Hoofdstuk 12 Ankers 55 Hoofdstuk 13 Werken met lagen 57 Extra Bijlagen Informatie over kleuren 59 Je website laten vinden 60 Bezoekersteller / Gastenboek 61 Fotoalbum maken met JAlbum 62 Cascading Style Sheets 68 Domeinnaam 70 CSS Templates 71 1

3 Voorwoord. Dit cursusboek is in eerste instantie bedoeld voor docenten van SeniorWeb, die aan senioren willen leren, hoe je een website maakt binnen een leercentrum van SeniorWeb Nederland. Bij het schrijven van dit cursusboek is echter ook rekening gehouden met mensen die geen docent zijn en mensen die niet in de gelegenheid zijn om een cursus te volgen en het dus zonder hulp moeten doen. Ook dan kun je zelfstandig met dit boek leren een website te maken, ook al heeft leren in groepsverband (gezellig onder elkaar met ondersteuning) de voorkeur. Je kunt zelf leren HTML te schrijven, maar dat is niet iets dat je even op een zondagmiddag kunt leren, daar is het te complex voor. Het programma dat we in deze cursus gebruiken is de web-editor KompoZer en dat is open source. Open source programma s zijn programma s die gemaakt worden door professionele programmeurs op vrijwillige basis. Zij stellen die programma s gratis ter beschikking (zoals bijvoorbeeld het besturingssysteem Linux), vanuit de filosofie dat het internet en de programma s die je voor je computer en internet nodig hebt, voor iedereen toegankelijk moeten zijn, waar ook ter wereld. Daaruit volgde voor deze cursus automatisch de gedachte om de programma s, die je nodig hebt om een website te bouwen, allemaal open source te laten zijn. Dat wil zeggen: gratis te gebruiken en te verspreiden en desnoods te verbeteren of aan te passen, voor iedereen, waar ook ter wereld. De software is ruim voor handen en van goede kwaliteit, de programma s doen wat ze beloven te doen. Om uitsluitend die reden is hier voor KompoZer gekozen. Het programma wordt nog steeds ontwikkeld, alleen gebeurt dat in een heel langzaam tempo. Het kent lang zoveel mogelijkheden niet als een commercieel programma maar is toch geschikt genoeg om een uitgebreide basis website mee te maken, zonder al te veel toeters en bellen. Het doet wat het moet doen: webpagina s maken met correct HTML gebruik, zodat je zelf geen HTML hoeft te leren. In tegenstelling tot veel andere web-editors is de HTMLcode die het programma schrijft foutloos. KompoZer ondersteunt bijvoorbeeld niet het gebruik van frames (een frame is een soort raamwerk waarin twee, drie of wel vier pagina s geplaatst kunnen worden en die, wanneer je ze in de browser zou bekijken, tegelijkertijd geladen worden. Je ziet één pagina, maar het zijn er dus meer). Een goed voorbeeld van een frames pagina is de website van SeniorWeb West Betuwe. Je zit links het menu (een pagina) en rechts zie je het hoofdscherm (ook een aparte pagina). De beide pagina s zijn gescheiden door een schuifbalk: Het werken met frames in een website is populair: het is vaak prettig navigeren, maar voor blinden en slechtzienden die van spraakgestuurde software gebruik moeten maken is het waardeloos omdat niemand het programma vertelt welke pagina als eerste moet worden voorgelezen. Daarnaast maken alle web-editors veel foute HTML code in frame 2

4 pagina s. Om die reden hebben de KompoZer ontwikkelaars er van afgezien om het maken van websites opgebouwd uit frames te ondersteunen. Daarnaast kent KompoZer geen invoegtoepassingen om bijvoorbeeld een flash filmpje in te voegen. Een Flash website is een dynamische website die geheel is opgebouwd uit zogenaamde flash (film) bestanden. Als je in een later stadium een website wilt maken met allerlei flash bestanden, lichtkranten, zul je er een andere editor bij nodig hebben. Dat KompoZer dit allemaal niet ondersteunt, heeft allemaal te maken met correct HTML gebruik. Bovendien: wat heeft een blinde / slechtziende aan een schitterend heen en weer bewegende flitsende tekstbalk of aan een filmpje? KompoZer is uitgesproken sober, maar het voldoet voor iedereen, jong en oud. Dit lesboek had ook kunnen heten: websites bouwen voor jong en oud. Leren is tenslotte niet iets dat alleen senioren aangaat. In dit boek leer je stap voor stap een website bouwen, tot en met het publiceren van je website op het internet. Als je redelijk goed bekend bent met de computer, het internet en het gebruik van een tekstverwerker en alle handelingen die daar bij horen gemakkelijk kunt uitvoeren, zul je het bouwen van een website zonder al te veel problemen snel onder de knie krijgen. Dit cursusboek wordt door twee groepen mensen gebruikt. Een groep mensen die de cursus van het internet hebben gehaald en de cursus zelfstandig doen en een groep mensen die een cursus volgen in een lokaal met een docent voor de klas. Dat heeft voor verwarring gezorgd. De cursus is nu zo opgezet dat de uitleg voor beide groepen duidelijk zou moeten zijn en dat het niet zou mogen uitmaken tot welke groep je behoort. In deze uitgave heb ik zoveel mogelijk geprobeerd verwarring hierover te voorkomen. Kom je toch onduidelijkheden tegen, snap je bepaalde dingen niet of kom je een fout tegen, laat mij dit alsjeblieft weten. Een handleiding / cursus boek schrijven is en blijft mensenwerk: lingedijk@gmail.com Je kunt als dat je voorkeur heeft, ook een dubbelzijdig in kleur geprinte en ingebonden versie bestellen. De kosten hiervoor bedragen 15,00 euro, inclusief verzendkosten. Aanvragen via . 3

5 Inleiding. Een website of homepage op het internet bestaat uit één of meerdere pagina s. Om deze webpagina s te maken heb je een programma nodig om zogenaamde HTML pagina s te maken. Het is niet veel meer dan een veredelde tekstverwerker. Het verschil met een gewone tekstverwerker zoals Word of WordPerfect is dat een HTML editor alle tekst die je schrijft automatisch omzet naar HTML en alle andere dingen die je invoegt ook automatisch omzet naar HTML code. Dit wordt ook wel een what you see is what you get editor genoemd. Alles wat je schrijft en invoegt wordt precies zo in HTML door de browser weergegeven. Andere bekende editors zijn Microsoft FrontPage 2003 en Adobe Dreamweaver. Dit zijn de moeilijkste en duurste programma s, respectievelijk 300 en 500 euro. FrontPage is in 2007 geheel vernieuwd en heet nu Microsoft Expression Web (nog niet naar het Nederlands vertaald) en Dreamweaver is sinds 2007 ook in het Nederlands beschikbaar. Welke editor je ook neemt, er zijn er nog veel meer, ze hebben allemaal hetzelfde nadeel: ze maken veel fouten in de te schrijven HTML code. Nu kun je je afvragen of dat allemaal wel zo erg is, tenslotte schrijven ook maar weinig Nederlanders foutloos Nederlands. Hier ligt dat toch iets anders. De meeste mensen gebruiken de browser Internet Explorer, gevolgd door de browser Firefox en Opera of Safari. Al die browsers handelen HTML anders af. Internet Explorer vindt de meest grote fouten nog toelaatbaar en laat alles zien zoals het moet. Firefox is veel strenger en laat maar weinig fouten toe. Dit zal als resultaat hebben dat een webpagina met wat fouten er in, in Internet Explorer er heel anders uit kan zien dan in Firefox of een andere strenge browser. Om die reden willen we foutloos HTML zodat we gelijk weten: wordt mijn website goed in Firefox weergegeven, dan wordt mijn website in zijn algemeenheid ook goed in andere browsers weergegeven, en daar is het om te doen. Het gaat er dus niet om welke browser beter is, maar dat goede HTML in alle browsers ook goed wordt weergegeven. Om die reden is het aan te raden om je eigen werk in Firefox te bekijken en niet in Internet Explorer. Firefox geniet onder website bouwers een duidelijke voorkeur en Internet Explorer wordt nauwelijks gebruikt! HTML HTML is de afkorting voor: Hyper Text Markup Language (vooral niet onthouden). Het is een taal die aan de browser vertelt hoe alles op de internetpagina moet worden weergegeven. HTML is dus geen programmeertaal, het legt alleen de opmaak en de structuur van de pagina vast. HTML is eigenlijk al verouderd en de opvolger van HTML is XHTML (Extensible Hyper Text Markup Language) en dat kom je ook al vaker tegen, maar nog steeds worden de meeste pagina s in HTML gemaakt. Op de lange duur zal XHTML het gewonen HTML helemaal gaan vervangen, maar zover is het nog lang niet. Computers zijn op zichzelf nogal domme dingen, ze begrijpen niet waar op een pagina een kop en titel moeten staan en welke afbeelding er op een bepaalde positie geplaatst moet worden. Voor al die specifieke onderdelen en de te bepalen posities moeten dus codes worden geschreven, zodat de browser weet hoe hij alles moet weergeven. Die geschreven code heet HTML. 4

6 Omdat KompoZer foutloos HTML schrijft, gaan we in deze cursus geen aandacht besteden aan HTML, of een poging doen het je te leren. Daarvoor is het een te complexe taal. Webpagina s kun je dus gewoon op je eigen PC maken met een programma en later op het internet zetten. Dit heet uploaden. Dit doe je in de regel met een FTP programma (File Transport Protocol), waarover later meer. Je stuurt alle bestanden dan met een FTP programma naar een server die jouw pagina s zichtbaar maakt op het internet, bijvoorbeeld naar de ruimte die je hebt gekregen van je eigen provider om een eigen website neer te zetten. Niet alle providers ondersteunen het FTP gebruik. Je moet dus voordat we zover zijn uitzoeken hoe je bij je provider bestanden kunt uploaden. Kreeg je enkele jaren geleden nog webruimte van je provider om een homepage neer te zetten, de laatste tijd tref je dat nog maar bij weinig providers aan. Wil je nu serieus een website gaan maken, publiceren en vervolgens onderhouden dan is de beste keuze om een eigen domein te kopen. Je koopt voor een paar tientjes per jaar bij een host provider een eigen domein waar je je website kunt laten plaatsen. Meer hierover in de bijlage. Een webpagina met alleen maar kale tekst is niet echt uitnodigend, daarom werken we ook met opgemaakte tekst en met afbeeldingen. Lang niet alle afbeeldingen zijn daar echter geschikt voor, óf omdat de afmeting van de afbeelding veel te groot is, óf omdat de bestandsgrootte veel te hoog is. Een afbeelding met een bestandsgrootte van 50 KB laat zich nu eenmaal sneller bekijken in een browser dan een afbeelding van 300 KB. In een webpagina moeten daarom bestanden zo klein mogelijk zijn. Weliswaar heeft 70% van de Nederlanders een breedband internet verbinding, maar 30% met het nog gewoon doen met een telefoon internet verbinding. Voor deze laatste mensen geldt: een webpagina met 10 foto s van bijvoorbeeld 1 MB, daar loopt een PC op vast, of de bezoeker loopt weg omdat het laden van de afbeeldingen veel te langzaam gaat. Dat willen we nu juist voorkomen. Niet alleen de grootte van de foto is van belang, maar vooral het bestandsformaat. We hebben dus een foto bewerkingsprogramma nodig voor aanpassingen. In deze cursus maken we gebruik van het foto bewerkingsprogramma PhotoFiltre (Nederlandstalig). Overal in deze handleiding, zult je iets moeten doen. Wanneer je een opdracht moet doen of iets moet uitvoeren staat er een symbool voor: blauw handje. 5

7 Hoofdstuk 1 Voorbereiding. 1. Mensen die een cursus volgen in een seniorweb leercentrum zullen de bestanden die nodig zijn voor deze cursus allereerst van het internet moeten downloaden. Voor de mensen die deze bestanden al hebben, ga door naar 2. Start de browser en typ in de adresbalk: Klik vervolgens op de Download Kompozer pagina en download Kompozer. Kies voor het bestand opslaan Afhankelijk van de plaats waar je gedownloade bestanden opslaat: verplaats het Zip bestand naar Mijn documenten, klik het aan (éénmaal!), doe rechter muisklik en kies voor: Winzip > Extract to here. De map wordt nu uitgepakt. Er bevindt zich nu in de map Mijn documenten een map Cursus Kompozer Maak in de map Mijn documenten nog een map aan en noem deze MIJN HOMEPAGE. Open (dubbelklik) de map Cursus Kompozer Selecteer de map Afbeeldingen, klik op het tabblad Bewerken en klik met de linker muisknop op kopiëren. Open nu de map MIJN HOMEPAGE, klik op het tabblad bewerken en klik nu met de linker muisknop op Plakken. Open de map Programma s (in de map Cursus KompoZer), open de map Kompo- Zer klik op het pictogram kompozer.exe Doe rechter muisklik en kies voor kopiëren naar > Bureaublad (snelkoppeling). 7. Alle bestanden die nodig zijn voor de basis website die we gaan maken staan nu op de goede plaats. 6

8 Het programma KompoZer is een zogenaamd portable (draagbaar) programma. Dit wil zeggen dat het programma geen installatie bestand kent en dus niet geïnstalleerd hoeft te worden op de computer. Het is direct oproepbaar. Als je KompoZer voor de eerste keer opstart, zie je dat alles in het Engels staat (krijg je een waarschuwing vanwege een niet ondertekende digitale handtekening, deze waarschuwing negeren en gewoon doorgaan). In de map van KompoZer zit echter een taalbestand om het programma om te zetten in de Nederlandse taal. Open KompoZer, ga naar het tabblad Tools, klik op het item Extensions, klik op Install, navigeer naar de map KompoZer, klik het bestaan aan: kpz-langpack-nlnl.xpi Klik op openen en na een paar seconden klik je op install Als je Kompozer nu afsluiten en opnieuw start is het programma in het Nederlands. Het komt voor dat ondanks een succesvolle installatie van het taalbestand Kompozer zich met geen mogelijkheid in het Nederlands laat instellen. Is dat het geval? Ga dan weer terug naar de website en download en installeer Nvu. Na installatie vindt je direct een snelkoppeling in je taakbalk. Als je alles goed hebt gedaan. Zijn er in de map Mijn documenten twee mappen bijgekomen: De map Cursus Kompozer en de map MIJN HOMEPAGE. De opmaak. Voordat we daadwerkelijk gaan beginnen met het bouwen van een website heb je waarschijnlijk al een idee wat voor website dit moet worden? Je hebt al diverse websites bekeken, waarvan je de ene prachtig vond en de andere weer lelijk. Maak voor jezelf een lijstje met antwoord op de volgende vragen: * Voor wie maak ik deze website (doelgroep)? * Wat voor bezoekers bekijken mijn website? * Welke informatie ga ik gebruiken voor mijn website? * Hoe moet het uiterlijk worden, zakelijk, sober of juist vrolijk? Deze informatie zal grotendeels bepalen, hoe je website er uiteindelijk uit komt te zien voor wat betreft opmaak, tekst, kleurgebruik, afbeeldingen en de wijze van navigeren. Een website moet er aantrekkelijk uitzien, zodat je er niet alleen zelf plezier aan beleeft, maar waar ook je bezoekers met plezier naar zullen kijken. Beperk je tot de informatie die bij het onderwerp past. Wees consequent in je opmaak en gebruik voor alle pagina s dezelfde achtergrondkleur of achtergrondafbeelding. Gebruik ook altijd hetzelfde lettertype en dezelfde lettergrootte. 7

9 De meest gebruikte lettergrootte is 12 punten, gebruik geen kleiner. Het bovenstaande zullen we in deze cursus in onze eerste oefening nu juist niet doen. We gebruiken alles door elkaar, zodat duidelijk wordt dat een consequent ontwerp het meeste kijkplezier geeft. Iedere keer als Kompozer wordt opgestart, krijg je een scherm voor je met tips. Haal onderin het scherm het vinkje weg, zodat dit een volgende keer niet meer gebeurt en klik ook in de linkerkolom, de site manager weg (kruisje rechtsboven in de kolom) aangezien we deze niet gebruiken. 8

10 Hoofdstuk 2 De eerste pagina. 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 exe pictogram). Maak van Firefox je standaard browser. Bij de eerste keer starten van Firefox wordt gevraagd of je Firefox als tandaard 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. 9

11 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 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. 10

12 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 cursus maar ergens in de eerste regel en geef deze kop 1 mee. Je kunt met deze knop ook 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 11

13 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 in Nvu op de knop: bestand kiezen en in Kompozer op het gele mapje 12

14 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 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 gebruik. 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. 13

15 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 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. Waarom je dat vinkje niet direct kunt plaatsen bij het invoegen van een afbeelding is mij ook niet duidelijk. 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 14

16 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 kiezen zien waarom dat nu zo vaak verkeerd gaat (klassieke beginnersfout) kun je dat hier bekijken: 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. 15

17 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. 16

18 Hoofdstuk 3 Een nieuwe pagina maken Klik in de werkbalk op de knop Nieuw, de eerste linker knop onder de werkbalk. Er verschijnt nu een lege pagina zonder titel. Je eerste pagina was klaar. Als je KompoZer nog open hebt staan, heb je in tabbladen, twee pagina s voor je. De index pagina met de titel welkom op de website van en een pagina met: geen titel. Je kunt ze willekeurig aanklikken. Als je nu de lege pagina voor je hebt, dan klik je op: opslaan. In het scherm dat nu verschijnt vul je in: pagina2 en dan op OK. In het venster opslaan als dat nu verschijnt is de naam: pagina2 al ingevuld en klik je op: opslaan. Een afbeelding als achtergrond In de eerste pagina die je gemaakt hebt, heb je een achtergrondkleur gekozen (lichtblauw). Het is niet alleen mogelijk om met een achtergrondkleur te werken, je kunt ook een afbeelding gebruiken als achtergrond. In de map oefenbestanden die op de CD staan heb ik er al een heleboel voor je geplaatst. Heb je daar nog niet genoeg aan dan kun je door te zoeken met Google op: backgrounds, tientallen websites vinden met honderden achtergronden die je vrijelijk kunt opslaan en gebruiken. Kies niet voor opdringerige achtergronden of al te felle kleuren: dat doet pijn aan de ogen en het leidt af van wat je te vertellen hebt. Maak vooral gebruik van neutrale afbeeldingen. We gaan nu een achtergrondafbeelding gebruiken. Klik in de werkbalk op: Opmaak en kies vervolgens onderin het menu voor: paginakleuren en achtergrond. Klik in het scherm dat verschijnt op: bestand kiezen of op het gele mapje, navigeer naar de map: mijn homepage, maak deze open, open de map: Afbeeldingen en selecteer: Achtergrond3.jpg en klik vervolgens op: openen. Kies in ditzelfde scherm voor: Aangepaste kleuren gebruiken. Kies voor de 4 bovenste tekstopties voor de kleur: wit en voor de onderste (achtergrond) de kleur blauw en klik nu op OK. Waarom een achtergrondkleur opgeven als we gebruik maken van een achtergrond afbeelding? Sommige mensen houden niet van afbeeldingen en hebben de weergave voor het tonen van afbeeldingen in hun browser uitgezet. Die mensen krijgen dan een achtergrondkleur te zien in plaats van een afbeelding. 17

19 Als je thuis met verschillende achtergrondafbeeldingen aan de gang gaat uit de map Oefenbestanden, zul je merken dat, als je de verschillende achtergronden bekijkt, sommige niet mooi worden weergegeven in het programma. Dit ligt altijd aan de afbeelding. Achtergrondafbeeldingen hebben meestal maar een kleine afmeting, het programma doet dan niets anders dan die afbeelding voortdurend herhalen, zodat het scherm gevuld wordt. Daarom kunnen foto s beter niet als achtergrondafbeelding gebruikt worden, je krijgt de foto dan meerdere malen naast elkaar te zien. We kunnen dit het beste laten zien door een foto als achtergrond te gebruiken. Klik in de werkbalk op: opmaak en kies in het menu voor: paginakleuren en achtergrond. Klik in het scherm op bestand kiezen. Selecteer in de map Afbeeldingen: bosjebloemen, klik op openen en vervolgens op OK. Je ziet nu dat de foto zich steeds herhaalt en dat is gewoon lelijk! Wijzig de achtergrond weer in Achtergrond3 en klik op OK. Vervolgens op: Opslaan. Klik nu op de knop: Bekijken en je ziet nu de pagina zoals die op het internet wordt weergegeven. Sluit de browser. Je hebt nu een index pagina waarop staat: Welkom op de website van met daaronder een afbeelding van een bosje bloemen, met een lichtblauwe achtergrondkleur. En je hebt nu een pagina met als titel: pagina2 Klik in de werkbalk op: Opmaak en in het menu voor: paginakleuren en achtergrond. Kies in het scherm dat verschijnt op: bestand kiezen of gele mapje, selecteer in de map Afbeeldingen: Achtergrond10.jpg, klik op Openen. Klik vervolgens in het scherm op aangepast kleuren gebruiken en kies bij normale tekstkleur voor wit in plaats van zwart. Klik nu op OK Centreer de cursor in de pagina op de bovenste regel. Kies in de werkbalk bij tekst voor: Kop 2 en schrijf het volgende gedicht over: Let op: bij het geven van een Enter voor een nieuwe regel: Houdt de Shift toets ingedrukt en geef dan pas een Enter. De cursor blijf nu gecentreerd. Laat je de Shift achterwege dan wordt er automatisch uitgelijnd naar links en naar gewone niet opgemaakte tekst. 18

20 De Vicieuze cirkel van het beeld. Als ik blijf kijken zoals ik altijd heb gekeken, blijf ik denken zoals ik altijd heb gedacht. Als ik blijf denken zoals ik altijd heb gedacht, blijf ik geloven zoals ik altijd heb geloofd. Als ik blijf geloven zoals ik altijd heb gedaan, blijft mij overkomen wat mij altijd overkomt. Klik in de werkbalk op: Opslaan. We hebben nu twee pagina s klaar, maar nog niet helemaal, want we kunnen nog niet heen en weer navigeren tussen de twee pagina s. 19