Inleiding in het bouwen en onderhouden van een eigen website. Peije van Klooster

Inleiding in het bouwen en onderhouden van een eigen website

Peije van Klooster

2011

Bouw zelf een eenvoudige website 2011

Inhoudsopgave: Inleiding.................................................................................................................................................... 4 1 Wat is internet ....................................................................................................................................... 5 1.1 Een klein beetje geschiedenis van internet .................................................................................... 5 1.2

Evolutie in internet ..................................................................................................................... 6

2 Wat is een website ? ............................................................................................................................. 6 2.1 Soorten sites .................................................................................................................................. 6 2.2 Statische Vs Dynamische sites ...................................................................................................... 7 2.3 Domeinnaam .................................................................................................................................. 7 2.4 .BE? .EU? .COM? .......................................................................................................................... 8 2.5 DNS ................................................................................................................................................ 8 3 Wat heb je allemaal nodig? ................................................................................................................... 9 3.1 Internetverbinding/Internet Service Provider .................................................................................. 9 3.2 Hosting bedrijf .............................................................................................................................. 10 3.3 Een computer met de nodige software. ........................................................................................ 10 4 Hoe is een pagina opgebouwd? ......................................................................................................... 10 4.1 HTML ............................................................................................................................................ 10 4.2 Afbeeldingen apart ....................................................................................................................... 11 4.3 Andere soorten codes .................................................................................................................. 11 4.3.1 CSS ....................................................................................................................................... 11 4.3.2 Javascript............................................................................................................................... 11 4.3.3 PHP, ASP .............................................................................................................................. 11 4.5 Een klein voorbeeld ...................................................................................................................... 11 5. KompoZer: Website pagina’s aanmaken ........................................................................................... 12 5.1 Downloaden en installeren ........................................................................................................... 12 5.2 Kennismaking met het programma .............................................................................................. 17 5.2.1 Wat is wat? ............................................................................................................................ 18 5.2.2 Beginnen aan een pagina ...................................................................................................... 18 5.2.3 Bewaren van een pagina ....................................................................................................... 18 5.2.4 Pagina’s openen .................................................................................................................... 19 5.2.5 Pagina’s in de standaard browser bekijken ........................................................................... 20 5.2.6 Ongedaan maken en Opnieuw uitvoeren .............................................................................. 20 5.3 De pagina opmaken ..................................................................................................................... 20 5.3.1 Achtergrond aanpassen......................................................................................................... 20 Peije van Klooster – Pagina 2

Bouw zelf een eenvoudige website 2011 5.3.2 Uitlijnen .................................................................................................................................. 21 5.3.3 Titel en tussentitels instellen .................................................................................................. 21 5.3.4 Lettertype aanpassen ............................................................................................................ 22 5.3.5 Vet, cursief en onderstrepen .................................................................................................. 22 5.4 Onderdelen invoegen ................................................................................................................... 23 5.4.1 Tekens en symbolen .............................................................................................................. 23 5.4.2 Afbeelding .............................................................................................................................. 24 5.4.3 Koppeling ............................................................................................................................... 25 5.4.4 Tabel ...................................................................................................................................... 26 5.4.5 You tube filmpje invoegen ..................................................................................................... 29 5.4.6 Een ander voorbeeld van code invoegen: Google maps ....................................................... 30 6. Filezilla: bestanden op de server zetten ............................................................................................ 31 6.1 Downloaden en installeren ........................................................................................................... 31 6.2 Kennismaking met het programma .............................................................................................. 36 6.3 gegevens Hosting Provider instellen ............................................................................................ 36 6.4 Bestanden uploaden .................................................................................................................... 37 7 Werkwijze............................................................................................................................................ 38 7.1 Welke pagina’s ............................................................................................................................. 38 7.2 Ontwerp ........................................................................................................................................ 38 7.3 Waar welke linken naar welke pagina’s ....................................................................................... 39 7.4 Structuur in je folders ................................................................................................................... 39 7.5 Eerste pagina aanmaken in KompoZer ........................................................................................ 39 7.6 Andere pagina’s aanmaken .......................................................................................................... 39 7.7 Pagina’s op je webruimte zetten .................................................................................................. 40 7.8 Aanpassingen doen ...................................................................................................................... 40 8 Waar op letten ? .................................................................................................................................. 41 Appendix 1: Verkorte handleiding van Porta/simpleviewer .................................................................... 42 Edit Album .......................................................................................................................................... 42 Options ............................................................................................................................................... 43

Peije van Klooster – Pagina 3


Inleiding In deze cursus gaan we kijken naar wat er nodig is om zelf een eigen pagina op internet neer te zetten. Waar je op kan letten. We gaan programma’s leren gebruiken die je hier bij kunnen helpen. We gaan beginnen met kijken naar het kader. Wat is internet? Welke technische randvoorwaarden zijn er nodig? Daarna kijken we naar de inhoud. Hoe kun je die eenvoudig aanpassen, en op internet zetten. De methoden die we in deze lessen gaan gebruiken maken het mogelijk om thuis aan de slag te gaan. En eventueel ook later ergens een eigen website aan te maken. De pagina’s zullen in het begin heel eenvoudig zijn, maar beetje bij beetje zal dit uitgebreider worden en kun je zelf je website onderverdelen in verschillende pagina’s of hoofdstukken. De uitleg van de programma’s in de cursus en de handleiding is niet bedoeld als allesomvattend. De belangrijkste dingen zullen aan bod komen, maar zeker niet alles. Afhankelijk van vragen tijdens de contactmomenten kunnen zaken wel getoond worden tijdens de lessen, maar niet in de handleiding staan, en omgekeerd. Bedankt voor het begrip hiervoor.



1 Wat is internet Internet is een groot netwerk van allerlei computers en netwerken. Die op een gemeenschappelijke manier informatie met elkaar delen. Een computernetwerk is vaak een aantal dat binnen een gebouw of binnen een organisatie informatie met elkaar uitwisselen of apparaten kunnen gebruiken, zoals een printer. Door verschillende netwerken aan elkaar te koppelen ontstaat er een veel groter netwerk. Het woord internet is dan ook afkomstig van internetworking. De manier waarop de netwerken en computers met elkaar praten het protocol. Internet gebruikt het TCP/IP protocol. Dit bepaald ook dat de weg die berichten volgen van de een computer naar een andere niet van te voren vast staat. Internet zelf is dus niet meer dan een gigantisch netwerk. Wat internet nuttig maakt zijn de toepassingen die je kunt gebruiken, zoals: E-mail en informatie opzoeken.

1.1 Een klein beetje geschiedenis van internet Internet is ontstaan vanuit een Amerikaans militair netwerk in de jaren 60. Dus midden in de koude oorlog tussen de Sovjet-Unie en Amerika. De angst was dat als een belangrijk knooppunt van het netwerk geraakt zou worden, dat dan het leger geen berichten meer kon uitwisselen. Om dit te voorkomen werd een netwerk gemaakt dat flexibel kon bepalen hoe de berichten worden verdeeld, en als de een bericht niet, of niet volledig ontvangen zou worden, dat dit opnieuw verzonden kon worden. Dus als een belangrijk punt voor het netwerk werd uitgeschakeld zou niet het hele netwerk uitvallen. Dit netwerk werd het ARPAnet genoemd (Naar een afdeling van het Amerikaanse leger). Deze manier van computers met elkaar verbinden werd in de jaren 70 en 80 overgenomen door universiteiten en onderzoeksinstellingen zoals het CERN in Zwitserland. Op die manier ontstond een netwerk waarop wetenschappers makkelijk informatie konden uitwisselen. In het begin ging dit alleen om tekst berichten. In 1991 werd bepaald hoe op een eenvoudige manier afbeeldingen in tekst konden worden opgenomen en pagina’s visueel aan elkaar worden gelinkt. Een van de uitvinders hiervan is de Belg Robert Cailliau (°1947, Tongeren).



1.2 Evolutie in internet Na 1991 is het allemaal redelijk snel gegaan. Meer universiteiten, bedrijven en overheden besloten om op deze manier van informatie delen over te stappen. Al in 1994 maakte Pizzahut het mogelijk om online pizza’s te bestellen. Ook andere winkels besloten internet te gaan om artikelen te verkopen. Een van de grootste is Amazon.com, de grootste online boekenwinkel. De eerste winkels waren niet veel meer dan een elektronisch postorder bedrijf. In plaats van door de pagina’s in het boekwerk te bladeren, kun je nu door de pagina’s op het scherm bladeren. Ook de eerste sites waren statisch. Dat wil zeggen dat informatie wel opgevraagd kan worden, maar zoeken in de pagina’s, laat staan aanvullingen, of aanpassingen aanbrengen, is bijna onmogelijk. Beetje bij beetje wordt alles dynamischer. Er ontstaan meer en meer communicatie over en weer met de gebruikers. Langzaam komen meer en meer gebruikers online. Meer en meer gebruikers hebben een internet verbinding. In het begin merk je dat de interesses van de gebruikers vooral technisch zijn. Computer en software firma’s zijn de % met een internet Aantal Jaar gebruikers Bevolking verbinding 2000

2.000.000

10.250.995

19.5 %

2004

3.769.123

10.355.844

36.4 %

2006

5.100.000

10.516.112

48.5 %

2009

7.292.300

10.414.336

70,0 %

2011

8.113.200

10.431.477

77,8 %

eerste jaren in verhouding ook veel meer vertegenwoordigd. Beetje bij beetje komen er meer onderwerpen, waardoor er ook weer meer gebruikers komen. In de laatste paar jaren is het aantal internet gebruikers ook enorm gestegen. Niet alleen in België, maar wereldwijd is het gebruik enorm gestegen. En tegenwoordig kun je bijna geen onderwerp bedenken of er bestaat wel een informatiepagina over.

2 Wat is een website ? Een website is een verzameling van pagina’s die bij elkaar horen. Bijvoorbeeld de website van een krant is een verzameling van pagina’s die duidelijk bij elkaar horen. Dus ook als je zelf een website maakt is dit een verzameling pagina’s die bij elkaar, namelijk alles wat jij wilt vertellen of laten zien.

2.1 Soorten sites Een site kan over van alles en nog iets gaan. Een bepaald ras van honden of katten, maar ook over de sportvereniging, een dorp, wijk of gebouw. Bijna van alles soorten onderwerpen zijn er voorbeelden te vinden. Veel sites kun je onderverdelen in: • • • •

Commerciële sites; Vooral bedoeld om reclame te maken voor producten Persoonlijke sites; eigen ervaringen zijn het belangrijkste Club/VZW sites; Voorstellen van activiteiten, foto’s,... ...

Waar je een site over begint kun je dus volledig zelf bepalen.



2.2 Statische Vs Dynamische sites De inhoud van een site kan op verschillende manieren worden onderhouden. Tegenwoordig zijn veel pagina’s dynamisch. Dat betekend dat de inhoud van een pagina afhankelijk is van verschillende dingen. Bijvoorbeeld het uur van de dag, andere pagina’s die je al hebt gekeken, of eigen voorkeuren. Een dynamische pagina is veel moeilijker om op te zetten, maar als dit goed gebeurd zijn aanpassing veel eenvoudiger. Een aanpassing in logo, oid, kan in een keer op alle pagina’s worden doorgevoerd. Daarom dat de meeste professionele sites tegenwoordig dynamisch zijn. Dit is vooral belangrijk als je heel veel pagina’s op je website hebt Op een statische pagina bepaal jij wat de kijker ziet. De tekst, foto’s en kleuren veranderen. Deze pagina’s zijn veel eenvoudiger op te zetten. Tot een bepaalde grootte van website is dit veel eenvoudiger op te maken en te onderhouden. Maar als je iets wilt aanpassen, moet je er goed om denken om alle pagina’s zelf aan te passen.

2.3 Domeinnaam Een website vind je op een bepaald adres. Dit is de tekst die je boven in beeld intypt. Het kan gaan om: http://www.nieuwsblad.be De “http” vooraan zegt je dat het een site is die je in een browser kan bekijken. En www.nieuwsblad.be is dan het adres. Dit adres bestaat uit verschillende delen WWW Het gaat her om een pagina op het World Wide Web. Wat de meesten “Internet” noemen. Dit gedeelte hoef je niet altijd in te geven, maar het veiligste is om dit wel te doen als het is opgegeven.

Nieuwsblad De domeinnaam: Nieuwsblad. Hierdoor is een bedrijf, vereniging, familie,... makkelijk te herkennen. Domeinen worden beheerd door DNS.BE. Deze organisatie is voor alle .be adressen verantwoordelijk voor de afhandeling.

BE De BE aan het einde is het “Top Level Domain”. Dit is de hoofdgroep waar de domeinen ondervallen. Een adres als cocacola.be kan een heel andere website zijn dan cocacola.nl Vaak is dit een landcode, maar dat hoeft niet. (Zie verderop...)

Maar een adres kan ook zijn http://users.telenet.be/steentje/ Ook dit is een pagina die je in een browser opent. Het adres begint ook met HTTP. Maar daarna volgen er een aantal andere delen: Users Telenet Be Steentje Dit is een subdomein. Het Het domein Het Top level Folder voor gebruiker. Iedere gedeelte is een ander zoals domain zoals gebruiker krijgt een apart onderdeel van het hierboven... hierboven... gedeelte om de bestanden neer hoofddomein, maar dit gedeelte te zetten. Dit is voor een kan jezelf bepalen. internetbedrijf vaak de voordeligste manier om mensen een eigen site te laten maken. Bij het eerste adres gaat het echt om een andere server. Een andere computer die in verbinding staat met internet om de pagina’s te laten zien. De andere mogelijkheid is apart gedeelte voor iedere gebruiker op eenzelfde server. Peije van Klooster – Pagina 7


2.4 .BE? .EU? .COM? De domeinen, internetsites die je op verschillende plaatsen ziet eindigen vaak op .be. Dit geeft aan dat het om een Belgisch adres gaat. De laatste codes zijn in te delen in verschillende groepen: • •

Landencodes Overige codes

De landen codes worden vaak beheerd door een nationale organisatie. In België DNS.BE. Soms zitten hier nog extra voorwaarde aan. Bijvoorbeeld alleen bedrijven kunnen een landcode krijgen. (Dit was tot enkele jaren terug in Nederland en België ook) Alleen bedrijven met een zetel in het land of alleen inwoners van het land. De overige codes zijn bijvoorbeeld: • • •

.com van oorsprong alleen bedrijven .gov alleen beschikbaar voor Amerikaanse overheden .org oorspronkelijk alleen voor non-profit bedrijven

In België zul je vooral .be .eu en .com tegenkomen. Dat een adres eindigt op .be wil niet zeggen dat de bestanden van een bepaalde site ook echt in België staan. Veel bedrijven die in België zaken doen hebben een .be adres maar de servers staan heel ergens anders. Tegenwoordig wordt dit vooral gebruikt om een bepaalde uitstraling te geven aan een organisatie: • • •

.be voor een lokale Belgische uitstraling .eu voor een Europese uitstraling .com voor een internationale uitstraling

Zelf kun je niet rechtstreeks bij DNS.BE een domein registreren. Je zult dit altijd via een ander bedrijf moeten doen. In Hoofdstuk 3 staat daar iets meer over. Maar voor het opzetten van je eigen site heb je dit vaak niet nodig. Veel internet toegang verleners geven een beperkte ruimte om een eenvoudige site aan te maken. De site die je na deze cursus kan maken kun je waarschijnlijk daar ook neer zetten.

2.5 DNS Iedere computer die met internet is verbonden heeft een eigen uniek adres. Het IP-adres. Door dit unieke adres weet de server welke pagina’s jij op je scherm wilt zien. Een dergelijk adres bestaat eigenlijk niet uit woorden, zoals hierboven, maar uit nummers. Bijvoorbeeld het adres van http://www.standaard.be/ is http://212.113.82.187/ Als je die getallen, in plaats van de naam, in je browser intypt, kom je op de site van De Standaard. Die nummers worden in een grote tabel opgezocht. Alle adressen die je intypt die niet die nummers zijn, worden “vertaald” naar deze nummers om op die manier de juiste gegevens te laten zien.



3 Wat heb je allemaal nodig? Voor het laten zien van een website heb je een plek nodig waar de bestanden staan die altijd te bereiken is. Je eigen computer staat niet altijd aan. Stel dat je dan je pagina vanaf je eigen computer wilt laten zien, dan kan deze alleen bekeken worden als je eigen computer aan staat. Dit is een van de redenen dat je een andere locatie nodig hebt. De andere reden is, is dat jouw computer iedere keer een ander adres krijgt als je aanlogt. Die tabel om van de naam naar de code te gaan moet dan iedere keer aangepast worden. Dit gebeurt natuurlijk niet. Daarom kun je veel beter je bestanden neer zetten bij een (Hosting) provider. Je hebt een verbinding nodig naar Internet. Je internet Service provider (Zie paragraaf 3.1). Hiermee kun je zelf internet gebruiken, en je eigen pagina’s aanpassen. Internet ligt er al (Zie eerste hoofdstukken...). Dus daar hoef je zelf niet meer voor te zorgen... Een hosting bedrijf dat de pagina’s voor jou op een server zet en laat zien wanneer deze worden opgevraagd (Zie paragraaf 3.2) Een computer met de nodige software om pagina’s te kunnen maken EN om de pagina’s op de juiste server te zetten. Vanaf hoofdstuk 4 gaan we hier verder naar kijken.

3.1 Internetverbinding/Internet Service Provider Een internet Service provider is het bedrijf dat zorgt dat jij verbinding kan maken met internet, waar je een email adres hebt, en soms kun je ook een kleine site neerzetten bij een Internet Service Provider. Dit bedrijf zorgt voor alle verbindingen en computers die nodig zijn om te zorgen dat jouw email bij jou terecht komt, dat je de pagina’s ziet die je wilt zien etc. De grootste aanbieders in België zijn op dit moment Belgacom en Telenet. Beide geven hun klanten toegang tot internet. Belgacom via een telefoonverbinding, en Telenet via een kabelverbinding. In België zijn nog enkele andere aanbieders, maar de meesten zullen (indirect) toch gebruik maken van deze 2 grote aanbieders. In het begin van Internet was er nog een verschil tussen een bedrijf dat alleen toegang verleende aan internet, en verder niets, en bedrijven die andere diensten leverden, zoals email. Tegenwoordige bieden vrijwel alle aanbieders een totaal pakket aan.



3.2 Hosting bedrijf Een hosting bedrijf is gespecialiseerd in het aanbieden van ruimte om een eigen website te maken. Dit kan hetzelfde bedrijf zijn als het bedrijf dat je toegang verleent tot internet, maar dit hoeft helemaal niet. De ruimte die je bij Telenet en Belgacom krijgt is vaak beperkt. Dit is voldoende om een kleinere site te laten zien. Wil je meer, meer foto’s, meer animaties, meer mogelijkheden, dan kun je beter naar een apart hosting bedrijf kijken. Een ander verschil is dat deze bedrijven vaak extra mogelijkheden geven om echt alles te kunnen dat je graag zou willen. Bijvoorbeeld om een eenvoudig gastenboek, formulier etc toe te voegen aan de site. Ook als je een eigen domeinnaam wilt, kun je dit via een hostingbedrijf regelen. Zij regelen alles zodat je site via een eigen domeinnaam te bekijken is.

3.3 Een computer met de nodige software. Tot slot heb je een computer nodig waarmee je de pagina’s kan aanmaken EN op de juiste server zetten. Zoals we hebben gezien is je eigen computer neit altijd verbonden met internet. Ook heb je verschillende programma’s nodig om de pagina’s aan te maken en op de juiste plaats te zetten. In Hoodstuk 5 bespreken we een programma om de pagina’s aan te maken. En in hoofdstuk 6 om de gegevens door te sturen naar de webpagina.

4 Hoe is een pagina opgebouwd? Iedere pagina die je op internet leest bestaat uit tekst en codes. De tekst kun je gewoon lezen, maar de codes worden door browser gelezen en omgezet naar kleuren, lettertypes e.d. Ook worden deze codes gebruikt om afbeeldingen op de pagina te plaatsen, linken door te geven etc.

4.1 HTML De meeste van deze codes zijn HTML codes, Hyper Text Markup Language, opmaakcodes. Deze codes hoef je niet allemaal uit je hoofd te leren. Gelukkig zijn er programma’s die je daarbij kunnen helpen. Wel is het handig om er iets van te kennen. Je herkent dan sneller waarom sommige dingen op die manier gebeuren. Of je kan bij anderen kijken hoe zij de site hebben gemaakt. Alle codes staan altijd tussen een < en een > Op die manier weet de browser dat er een opdracht is. Bijvoorbeeld • • •

laat de tekst vet (Bold) zien. laat de tekst schuin (Italic) zien.
geeft een enter aan (Break)

Het begin van de opdracht staat tussen de codes Bijvoorbeeld om een tekst vet te laten zien: Normale teksttekst die vet getoond wordt De code wordt afgesloten door een code met een /



4.2 Afbeeldingen apart Bij het opmaken van een email, of word document ben je gewoon dat de foto’s en de tekst door elkaar te zien is. In de codes zie je alleen een verwijzing naar de afbeelding, maar de echte afbeelding zie je pas als je de tekst en codes gaat laten toepassen.

4.3 Andere soorten codes Behalve HTML zijn er ook andere codes. Ik noem dit alleen even dat als je ooit verder gaat, dat je weet dat er meer is. In deze cursus gaan we daar niet te ver op in, maar ik benoem even andere mogelijkheden zodat je de termen herkend als je op internet, of in boeken verder gaat zoeken naar andere manieren. 4.3.1 CSS CSS, of Cascading Style Sheets bepaald in een keer voor de hele pagina de opmaak. Hoe complexer je de opmaak wilt doen, hoe makkelijker het is om dat met CSS te onderhouden. 4.3.2 Javascript Javascript is een programmeer taal waarmee je kleine elementen kan aanmaken in een pagina. Bijvoorbeeld menu’s die automatisch open en dicht gaan zijn met javascript gemaakt 4.3.3 PHP, ASP De soorten codes die hierboven staan zijn codes die aan de browserkant de opmaak en inhoud van de pagina bepalen. PHP en ASP zijn de soorten codes die juist op de server gaat bepalen wat jij wel en niet te zien krijgt. PHP of ASP is alleen nodig als je veel interactieve pagina’s op je website wilt laten zien. PHP is de gratis variant. PHP is een Open source taal, terwijl ASP geld kost.

4.5 Een klein voorbeeld Voordat we aan de slag gaan laat ik jullie een heel klein voorbeeld hiervan zien: Code
Titel van de pagina
inhoud van een pagina met heel veel bla bla bla bla

Op het scherm



5. KompoZer: Website pagina’s aanmaken Zoals je eerder zag bestaat HTML uit codes om de pagina’s op te maken en op de juiste manier te laten zien in een browser. Gelukkig zijn er verschillende programma’s die ons kunnen helpen om een pagina aan te maken zonder alle codes te hoeven kennen. Een van die programma’s heet “KompoZer”. Dit is een open source programma. Dat betekend dat iedereen de broncode van het programma kan inzien en wordt aangemoedigd om verbeteringen toe te voegen. Voor gebruikers betekend “open source” vooral dat het gratis te gebruiken is.

5.1 Downloaden en installeren Het programma is gratis te downloaden voor iedereen die het wil gebruiken. Je kunt het downloaden vanaf: http://KompoZer.net/download.php Als je naar deze pagina gaat wordt je uitgenodigd om de Engelstalige versie te downloaden.

Als je een klein beetje naar beneden gaat, zul je zien dat er ook een Nederlandstalige versie beschikbaar is.



Je kiest hier voor de Nederlandstalige versie bij “Installer”. Je komt op een volgend scherm met vooral heel veel reclame. Het is een gratis dienst die wordt aangeboden, en deze wordt betaald met reclame….


Bouw zelf een eenvoudige website 2011 Afhankelijk van je beveiligingsinstellingen kan het downloaden van het programma gelijk beginnen, of moet je zelf op “direct link” klikken. Er verschijnt een scherm zoals hiernaast: Je kiest nu voor “uitvoeren” of “run”. Na het downloaden wordt het programma gelijk uitgevoerd. In de nieuwe versie van Internet explorer verschijnt niet het venster zoals hierboven staat, maar verschijnt er onder in beeld een waarschuwing:

Het scherm zier er anders uit, maar je herkent de zelfde onderdelen. Ook hier klik je dan op uitvoeren. Als het programma is gedownload kan het dat je een extra waarschuwing zoals hiernaast krijgt. Dit is om te voorkomen dat software zich zomaar automatisch op je computer gaat installeren. In dit geval is het de bedoeling om software te installeren en kiezen we op “Run” of “Uitvoeren”. Heb je een programma als “Norton” op je computer staan, dan kan het zijn dat ook dit programma vraagt om te bevestigen dat je echt het programma wilt installeren. Ook hier bevestig je dit. Je komt nu in het installatieprogramma van KompoZer. De meeste van deze installatie programma’s werken op een vergelijkbare manier. De eerste stap is een welkomstscherm: Je klikt hier op “volgende”.



De volgende stap is vaak het akkoord gaan met de licentie overeenkomst. Dit zijn de voorwaarden waar je aan zal voldoen in het gebruik van het programma. Je kiest hier voor “Ik accepteer de licentieovereenkomst”. Doe je dit niet, dan kun je niet op “volgende” klikken.

Het programma wordt op de standaard locatie op jouw computer geïnstalleerd. Deze locatie wordt opgegeven, en hoef je zelf niet in te vullen. Het beste is om dit altijd op de standaard locatie te laten staan. Als je later een recentere versie wilt gaan gebruiken, of dit programma niet meer wilt gebruiken en van de computer afhalen, dan gaat dat vaak het beste als je deze locatie niet hebt aangepast. Ook nu klik je weer op volgende.

Om het programma later terug te vinden wordt er een folder aangemaakt in het menu start. Dit is het menu onder de knop linksonder in beeld. Ook hier laat je het beste de standaard locatie staan, en klik je ook hier op “Volgende”.



Eventueel kun je een snelkoppeling op het bureaublad en een snelkoppeling bij de werkbalk aanmaken. Op het bureaublad kan makkelijk zijn om het programma snel terug te vinden. De 2de adviseer ik niet te doen. Dit zijn die icoontjes naast het menu “Start”. Als je iedere keer daar een koppeling aan toevoegt, kan dit heel vol komen te staan, en heel onoverzichtelijk gaan worden. Zelf ga ik naar het menu start om het programma op te starten, en maak ik dus geen van beide aan.

Tot slot komt er nog een overzicht met een samenvatting waarvoor is gekozen. Als je hier iets raars ziet kun je met “Vorige” terug om een aanpassing te doen. Ben je akkoord met het voorstel, dan klik je hier op installeren. Nu gaat het programma echt geïnstalleerd worden.

Het programma wordt nu geïnstalleerd, en de balk zal gevuld worden. Boven in beeld zie je heel snel alles voorbij flitsen van de verschillende onderdelen.


Bouw zelf een eenvoudige website 2011 Als de balk helemaal gevuld is, verschijnt het scherm hiernaast. Standaard staat het vinkje bij “Start KompoZer” aan. Als je nu op voltooien klikt, start het programma gelijk op.

5.2 Kennismaking met het programma De eerste indruk van het programma is die van een rare tekstverwerker. Je hebt een aantal knoppen en onderdelen, zoals opslaan en openen, die je ook in een tekstverwerker tegenkomt. Maar ook veel dingen die je niet kent van een tekstverwerker. Je kunt dit programma op verschillende manieren gebruiken, maar het makkelijkste is als WYSIWYG editor. Dit betekend “What You See Is What You Get”. Of je kan slepen en afbeeldingen toevoegen, en het eind resultaat zal dit worden. Je hebt niet gelijk de codes nodig. Om dit programma zo te gebruiken kies je onderaan voor “Ontwerp”. Bij “Bron” krijg je de codes te zien (zoals genoemd in Hoofdstuk 4) en met splits kun je beide tegelijkertijd zien. Voorlopig laten we dit op “Ontwerp” staan.


Bouw zelf een eenvoudige website 2011 5.2.1 Wat is wat? Voordat we echt aan de slag gaan, benoem ik kort even de verschillende onderdelen van KompoZer: Titelbalk Menu Gereedschappen Opmaakgereedschappen Opmaakgereedschappen 2 Pagina Tabs Linialen Pagina gebied Onderdelen en website beheren Opmaakmodus kiezen Statusbalk 5.2.2 Beginnen aan een pagina Je kunt nu gelijk beginnen aan een nieuwe pagina. Net zoals in een tekstverwerker begin je hier met een lege pagina die je kunt vullen zoals je zelf graag wilt. Bij de opmaak gereedschappen kun je kiezen in het eerste menuutje voor Kop en een nummer. Dit bepaald hoe groot de titel van de pagina wordt. Als je nu begint te typen zul je ook zien dat de tekst gelijk groot wordt weergeven. Verder op gaan we de opmaak mogelijkheden bekijken. 5.2.3 Bewaren van een pagina Als we straks een pagina klaar hebben, moet deze bij een hostingbedrijf op de server gezet worden. Je moet de pagina bewaren. De makkelijkste manier is om de pagina’s in een aparte map bij elkaar te bewaren. Op die manier behoud je het overzicht van de onderdelen van je internetpagina. Om een pagina te bewaren klik je boven in beeld bij de gereedschappen op . Als je daarop hebt geklikt, krijgt je de een scherm met de vraag wat de naam is van de pagina. Dit is nog niet de naam van het bestand, maar wel de titel van de pagina die boven in beeld in de titel balk komt te staan. Ook de bezoekers van jouw site zien deze titel. Je kunt hier dus het beste een nuttige titel ingeven. “Beginpagina” of “Start” zijn geen titels waar bezoekers van je pagina veel aan hebben. Als je hier invult: “Turnvereniging Flexibele Springers”, zullen de bezoekers van de site gelijk zien dat de pagina’s over een turnvereniging gaan met de naam “Flexibele Springers”


Bouw zelf een eenvoudige website 2011 Nadat je de titel hebt gegeven kom je in het scherm terecht om de pagina echt te bewaren. Je krijgt het “standaard” scherm te zien om bestanden te bewaren. Je kiest hier de folder waar je het bestand wilt bewaren. De bestandsnaam die wordt voorgesteld is de titel van de pagina die je hebt gekozen. Dit lijkt heel gemakkelijk, en je bent dan ook geneigd om gelijk op “Save” of “Bewaren” te klikken. Helaas…. De eerste pagina die de bezoekers van je website te zien krijgen is ALTIJD index.html De openingspagina van je site bewaar je dus ook ALTIJD met de naam index.html De volgende pagina’s van je website kun je wel een andere naam geven. Gebruik NOOIT speciale tekens in je naam van de pagina’s. Ook spatie kun je beter voorkomen. Niet iedere browser gaat door goed mee om. Dus gewoon het alfabet en cijfers gebruiken. In plaats van een spatie kun je ook een streepje “-“ gebruiken. Bijvoorbeeld “agenda-voorjaar.html” is een bestandsnaam die goed werkt. De volgende keer dat je een pagina bewaard hoef je alleen maar op niet meer ingevuld te worden.

te klikken en de rest hoeft

5.2.4 Pagina’s openen Als je een andere keer verder wilt werken aan de pagina kun je deze opnieuw openen met . Dit opent het standaard scherm om bestanden te openen. Je kunt nu naar de juiste folder gaan en het bestand kiezen dat je wilt gebruiken. In KompoZer is het mogelijk om meerdere bestanden tegelijkertijd te openen. Als je dit doet, dan krijg je boven in beeld meerdere tabs te zien:

De naam die je in de tab ziet, is niet de bestandsnaam, maar de titel die je de pagina hebt gegeven.


Bouw zelf een eenvoudige website 2011 5.2.5 Pagina’s in de standaard browser bekijken Als je een pagina hebt bewaard kun je deze openen in je standaard browser. Dit is het programma dat je meestal gebruikt om internetpagina’s te bekijken: Dat wordt gebruikt om een link uit een email of programma op internet te openen. Hoewel het tabblad “Ontwerp” je een weer goed idee geeft hoe de pagina eruit gaat zien, kunnen kleine details toch net even ander worden in een echte browser. De codes worden een klein beetje anders geïnterpreteerd door een browser dan door KompoZer. Helaas betekent dit ook dat iemand anders in een andere browser de pagina soms weer net even anders te zien krijgt. Gelukkig zijn de verschillen niet zo heel erg groot. Om de pagina in de standaard browser te bekijken klik je op . De pagina wordt geopend in je standaard browser, en je kan nu controleren of alles werkt zoals jij wilt. 5.2.6 Ongedaan maken en Opnieuw uitvoeren Tijdens het opstellen van een pagina, kan het gebeuren dat je een foutje maakt. Met de knop Ongedaan maken kun je de laatste paar handelingen terugzetten. Opnieuw doen is weer terug enkele acties heruitvoeren. Op die manier kun je iets nieuws uitproberen en met “Ongedaan maken” een stap terug gaan. Wil je dan toch wel het nieuwe in je pagina’s laten zien, kun je dit terug halen met “Opnieuw uitvoeren”. Deze handelingen worden niet bewaard bij het opslaan van een pagina. Als je het programma afsluit en de pagina opnieuw opent, kun je dit niet gebruiken.

5.3 De pagina opmaken Waarschijnlijk wil je niet een grote hoeveelheid tekst op je pagina laten zien. Maar gebruik je liever verschillende groottes van tekst en extra onderdelen. Ook de kleur kun je zelf bepalen. 5.3.1 Achtergrond aanpassen De achtergrond kan een kleur zijn, of een foto. Bij een foto let er alleen op dat dit heel veel aandacht vraagt. Ook kan de tekst moeilijker leesbaar zijn met een foto op de achtergrond. We beginnen met het aanpassen van de achtergrond kleur. In de 2de balk met opmaakgereedschappen staat er • • •

. Dit dient voor:

De tekst kleur (In dit voorbeeld zwart) De achtergrondkleur (in dit voorbeeld wit) Een markeerkleur (In dit voor beeld wit)

De tekstkleur is de kleur die je de tekst wilt geven. De achtergrond kleur is de kleur van de pagina. Zeg maar of je op een wit vel papier aan het werken bent, of een gekleurd vel papier. Een markeer kleur is om een stukje tekst extra nadruk te geven. Als je een van deze drie aanpast, zorg dan voor voldoende contrast. Sommige kleurcombinaties zijn erg moeilijk te lezen. Zeker het verschil tussen achtergrond- /markeerkleur en de tekst moet altijd groot genoeg zijn.


Bouw zelf een eenvoudige website 2011 5.3.2 Uitlijnen De tekst van een pagina kun je op verschillende manieren uitlijnen. Links uitlijnen Bij links uitlijnen staat de tekst tegen de linkerkantlijn aan. Aan de rechterkant heb je grotere gaten.

Gecentreerd Gecentreerd uitlenen zet alles in het midden van een pagina. Aan de linker- en rechterkant zie je nu geen rechte lijn meer.

Rechtsuitlijnen Rechts uitlijnen is het tegenovergestelde van links uitlijnen. Nu heb je rechts een rechte lijn en links verschillende gaten.

Uitgevuld Bij uitgevuld zijn de lijnen links en rechts even groot en worden de gaten tussen de worden in groter gemaakt.

Om tekst uit te lijnen doe je hetzelfde als in een tekstverwerker. OF je klikt op het icoontje van het uitlijnen en begint dan te typen. OF je selecteert de tekst en dan klik je op het icoontje van het uitlijnen dat je wilt gebruiken. 5.3.3 Titel en tussentitels instellen Om de pagina beter leesbaar te maken voor iedereen kun je gebruik maken van verschillende groottes voor titels en tussentitels. Om dit op een snelle manier te doen kun je gebruik maken van het menu linksboven in beeld: Je kunt in dit dropdown-menu kiezen uit verschillende standaard mogelijkheden. De belangrijkste zijn “Tekst” en “Kop 1” tot met “Kop 6” Dit geeft het volgende resultaat: Tekst is voor de gewone tekst die je intypt Kop 1 tot en met Kop 6 voor de verschillende titels en tussen titels die je op de pagina wilt gebruiken. Je tekst indelen in verschillende hoofd en sub delen werkt heel goed bij langere teksten, maar overdrijf ook weer niet. Als je een te lange tekst op 1 pagina zet gaat bijna niemand die meer lezen. Als je dit in aparte delen op verschillende losse pagina’s zet, is de kans veel groter dat dit gelezen wordt.


Bouw zelf een eenvoudige website 2011 5.3.4 Lettertype aanpassen Het lettertype bepaald voor een groot gedeelte de sfeer die de pagina krijgt. Maar pas op. De lettertypes die jij op je computer hebt staan, zijn niet noodzakelijk dezelfde als die iemand anders op zijn computer heeft staan. Als jij een lettertype gebruikt dat iemand anders niet heeft, dan zoekt die computer. Het is gelukkig ook mogelijk om een groep van lettertypes op te geven. Bijvoorbeeld deze tekst die je nu aan het lezen bent is getypt in Arial, een lettertype zonder schreef (Horizontale streepjes aan de boven en onderkant van de letters) Dat geeft een heel andere indruk dan een Times New Roman lettertype, met schreef. Je kan instellen dat de browser op ziek gaat naar soort gelijke lettertypes. Dat heeft een Font Family, Lettertype familie. In KompoZer kun je 3 families instellen. Dit doe je via het menu “Opmaak” en dan kies je voor Lettertype. Boven in dit submenu kun je kiezen uit vaste of variabele breedte. Het lettertype van deze tekst heeft een variabele breedte. De letter i neemt minder ruimte in dan de letter m Bij een vast breedte is de i net zo groot als een m. Je ziet hier ook gelijk het effect van die breedte. Daaronder zie je 3 groepen staan: 1. Helvetica, Arial Een strak schreeflooslettertype 2. Times, iets minder strak dan Helvetica, Arial met schreef 3. Courier. Een lettertype dat meer op de letters van een typemachine lijkt. Als je een van deze groepen kiest, gaat de browser opzoek naar eerst het juiste lettertype, en als dat niet op de computerstaat, een lettertype dat er op lijkt. Kies je een heel ander lettertype zoals Comic Sans. Dan moet je maar hopen dan de lezer dat ook op de computer heeft staan. Vrijwel iedereen die Windows heeft, zal ook dit lettertype hebben, maar je bent niet helemaal zeker. Het kan gebeuren dat de tekst er dan toch ineens heel anders uit gaat zien. 5.3.5 Vet, cursief en onderstrepen Tot slot kunnen we de tekst ook VET, Cursief of onderstrepen. Dit kunnen we doen met Net zoals in een tekst verwerker klik je op: • • •

B voor Vet (Bold) I voor Cursief (Italic) U voor onderstrepen (Underlined)

Je kan dit ook combineren, maar pas op dat je niet overdrijft. Als je heel veel verschillende soorten opmaak door elkaar gebruikt wordt het erg ermoeiend om de tekst te lezen.



5.4 Onderdelen invoegen Tot nu toe was de pagina alleen maar tekst. Maar zoals je weet kunnen er veel meer onderdelen in een pagina staan. Afbeeldingen, foto’s, tabellen, filmpjes e.d. We beginnen zo meteen met afwijkende tekens, en daarna kijken we naar linken naar andere pagina’s, afbeeldingen, een tabel en tot slot een filmpje van Youtube. Hoewel niet iets is om in te voegen, bespreek ik ook heel even hoe je een tabel kan gebruiken voor de opmaak van je pagina. 5.4.1 Tekens en symbolen Alle tekens die niet direkt tot het alfabet behoren, of cijfers zijn, kun je beter gebruiken met een aparte code. Die code kun je in deze tabel hieronder terug vinden: Code teken Code teken Code teken Code teken Code teken Code teken 160

176

161

°

192

À

208

Ð

224

à

240

ð ñ

¡

177

±

193

Á

209

Ñ

225

á

241

162

¢

178

²

194

Â

210

Ò

226

â

242

ò

163

£

179

³

195

Ã

211

Ó

227

ã

243

ó

164

¤

180

´

196

Ä

212

Ô

228

ä

244

ô õ

165

¥

181

µ

197

Å

213

Õ

229

å

245

166

¦

182

¶

198

Æ

214

Ö

230

æ

246

ö

167

§

183

·

199

Ç

215

×

231

ç

247

÷

¨

184

¸

200

È

216

Ø

232

è

248

ø ù

168 169

©

185

¹

201

É

217

Ù

233

é

249

170

ª

186

º

202

Ê

218

Ú

234

ê

250

ú

171

«

187

»

203

Ë

219

Û

235

ë

251

û

¬

188

¼

204

Ì

220

Ü

236

ì

252

ü ý

172 173

189

½

205

Í

221

Ý

237

í

253

174

®

190

¾

206

Î

222

Þ

238

î

254

þ

175

¯

191

¿

207

Ï

223

ß

239

ï

255

ÿ

Een andere manier is om een hulpvenster van KompoZer te gebruiken. Dit roep je op via het menu “Invoegen” en dan kies je voor tekens en symbolen. Je krijgt dan een hulpvenster zoals hier rechts. Je kan nu het teken kiezen. Klik je op invoegen, dan wordt het teken ingevoegd in de tekst.


Bouw zelf een eenvoudige website 2011 5.4.2 Afbeelding Alleen tekst op je pagina staat misschien wat saai. Het is wel zo leuk om een paar afbeeldingen in je pagina op te nemen. De afbeeldingen die je op je pagina wilt plaatsen zijn het beste van.GIF (Voor tekeningetjes en logo’s) of JPG (Voor foto’s en geleidelijke overgangen). Andere formaten, zoals PNG worden nog niet volledig door alle browser onder steunt. De foto’s die je wilt gebruiken kun je het beste in een beeldbewerkingprogramma op maat maken en bewerken. En dan als de foto’s helemaal klaar zijn in de pagina tussenvoegen. In de folder met de bestanden van de webpagina is het vaak het meest overzichtelijk om een aparte folder aan te maken voor alle foto’s en/of een folder voor alle logo’s en andere afbeeldingen. Als je later dan iets wilt aanpassen (Bijvoorbeeld omdat het logo van de vereniging is veranderd) dan kun je die snel terug vinden en de verandering eenvoudig doorvoeren. Om een afbeelding in te voegen klik je op . Je krijgt dan het venster zoals hiernaast. Als je op het mapje rechtsboven klikt, kun je een foto gaan opzoeken in de folder met de foto’s voor je pagina. Het vinkje daaronder (“URL is relatief ten opzichte van paginalocatie”) zet je het beste aan. Als je dit noet doet, dan staat er in de verwijzing naar de afbeelding de schijfletter die jij gebruikt. Dit werkt niet voor andere gebruikers. De tekst die je kunt invullen bij “Tooltip” is de tekst die de bezoeker van de pagina te zien krijgt als hij met de muis boven de foto staat. De “Alternatieve tekst is de tekst die verschijnt voordat de tekst is ingeladen. Dit is nu minder van belang nu internet veel sneller is. Maar een aantal jaar terug was dit wel van belang. Ook voor blinden en slechtzienden is dit van belang. De braille lezer die deze mensen vaan gebruiken laten deze tekst zien in braille op de plaats van de afbeelding. Als je een alternatieve tekst gebruikt en een Tooltip tekst inzet, kies dan iets dan ook relevant is. Het nummer van de foto heeft weinig toegevoegde waarde maar bijvoorbeeld “Logo muziekvereniging” geeft duidelijke informatie. Ben je tevreden klik je op “OK”. Wil je nog iets veranderen, dan kun je dubbelklikken op de foto, en ditzelfde venster verschijnt. De andere tabbladen hoef je eigenlijk niet in te vullen. Voor diegene die later verder willen ga ik er hier even snel over. Afmeting Hiermee kun je instellen hoe groot een afbeelding op het scherm te zien is. Staat het bolletje bij “Ware Grootte” dan is dat precies hetzelfde als de afbeelding. Kies je een ander getal, dan wordt de afbeelding vergroot of verkleind. Het is vaak niet heel mooi als de browser dit gaat uitrekenen. Daarom dat ik vind dat het beter is om de afbeeldingen in een keer op de het juiste formaat te maken en dan pas in de pagina op te nemen. Vormgeving Peije van Klooster – Pagina 24

Bouw zelf een eenvoudige website 2011 Op het tabblad “Vormgeving kun je ingeven hoeveel ruimte om de afbeelding vrij met blijven. Dit doe je bij “Links en Rechts” en “Boven en Onder”. Het aantal pixels dat je ingeeft voor rand bepaald hoe dik de rond om de foto heen wordt. Bij het dropdown menu rechtsboven kun je bepalen hoe de tekst rond de foto gaat. Aan de bovenkant De tekst

In het midden

In het staat hier bij “Aan de bovenkant”

midden komt de tekst hier.

Aan de onderkant

Hier staat de tekst bij “Aan de onderkant”

Aan de linkerkant Aan de linkerkant staat de tekst op deze manier langs de afbeelding

Aan de rechterkant Aan de rechterkant staat de tekst op deze manier langs de afbeelding

Koppeling Een afbeelding kan ook gebruikt worden om naar een andere pagina, of een grotere versie van de foto, te gaan. Dit vul je hier in. Meer informatie over koppelingen vind je in de volgende paragraaf. 5.4.3 Koppeling Linken naar andere pagina’s op je eigen site of naar andere pagina’s op internet worden een koppeling genoemd, of link in het Engels. Om op een makkelijke manier een koppeling toe te voegen kies je bij de gereedschappen voor verschijnt.

. Het venster zoals hiernaast

Bij Koppelingstekst vul je de tekst waar de mensen op moeten gaan klikken om naar die pagina te gaan. Bijvoorbeeld de naam van de pagina. Koppelingslocatie gebruik je om de bestandsnaam en/of locatie in te vullen. Als dit naar een pagina op je eigen website is, maak je het beste eerst die pagina aan, en dan pas maak je een link. Is het een pagina op je eigen website, dan zet je een vinkje bij “URL is relatief ten opzicht van paginalocatie”. Dit voorkomt dat er een verwijzing wordt gemaakt naar de schijfletter waar je zelf op aan het werken bent. Maak je een link naar een andere pagina, vergeet dan zeker de “http://” aan het begin niet. Het veiligste is om naar die pagina te surfen en dan in de adresbalk van de browser het adres te kopiëren en hier neer te zetten. Ga je naar een andere locatie dan hoef je geen vinkje bij “URL is relatief ten opzicht van paginalocatie” te zetten. Als je een link wilt om gelijk een email te laten versturen, bijvoorbeeld om contact op te nemen, vul dan bij koppelingslocatie het email adres in, en zet een vinkje bij “Bovenstaande is een e-mailadres”. Wil je dat de pagina in een ander venster wordt geopend dan zet je een vinkje onderaan en kies je voor “in een nieuw venster”.


Bouw zelf een eenvoudige website 2011 5.4.4 Tabel Een tabel kun je gebruiken om op allerlei gegevens overzichtelijk te presenteren. Bijvoorbeeld een tabel met een datum en een omschrijving van een activiteit. Allerlei dingen zijn in een tabel makkelijk te presenteren. 5.4.4.1 Invoegen Om een tabel in te voegen kies je voor: . Je kunt nu bepalen hoe groot de tabel moet worden. Pas op dat je niet te snel klikt. Direct als je hier klikt, wordt de tabel ingevoegd. Bij precies kun je bepalen of er een rand langs de tabel te zien is, en hoe breed die is. Tot slot bij Cel kun je bepalen hoe de tekst in de cellen eruit gaat zien. Klik je op OK, dan krijg je de tabel in je Ontwerp scherm te zien:

Nu kun je de tabel gaan invullen. 5.4.4.2 Tabel aanpassen Om de tabel aan te passen kun je dubbelklikken op de tabel. Je krijgt een uitgebreider scherm te zien om dingen te kunnen veranderen in de tabel. In het tabblad Tabel kun je alles in stellen dat bettrekking heeft op de hele tabel. In het tabblad Cellen kun je verschillende dingen instellen met betrekking tot de losse cellen van de tabel.

Tabblad Tabel Grootte Bij Grootte kun je het aantal rijen en kolommen aanpassen. Ook kun je hier bepalen hoe groot de tabel moet worden. Als je deze op 100% van de breedte zet, dan wordt de tabel altijd zo groot mogelijk weergegeven. Andere getallen kunnen natuurlijk ook, maar dan is de tabel wat kleiner op het scherm. Vul je een getal in beeldpunten in, dan is het afhankelijk van het scherm van de bezoeker of een tabel beeldvullend is, of maar gedeelte in beeld.


Bouw zelf een eenvoudige website 2011 Randen en ruimte Standaard zijn bij een tabel de randen te zien. Als je hier bij “Rand” 0 invult, verdwijnt de zichtbare rand. Maar dze is er nog wel. Om de hele rand weg te halen moet je ook bij het 2de vakje, “Ruimte” een 0 invullen. Dit is vooral van belang als je een rij wilt maken met een andere kleur dan de tabel. Als je hier en getal laat staan, dan zullen er kleine randjes tussen de cellen te zien zijn. “Opvulling is de ruimte tussen de inhoud van de cellen en de rand. Een kleine waarde is wel verstandig. Stel dat met het uitvullen van de tekst net een teken tot aan de rand te zien is, dan kan dit tegen een andere teken geplakt worden. De tekst wordt dan moeilijker te lezen. Tabeluitlijning Hier kun je kiezen hoe de tabel op de pagina komt staan. Links, in het midden of rechts. Het is niet mogelijk om tekst naast de tabel te krijgen. Bijschrift Bijschrift kun je gebruiken om een extra lijn mee te geven van de tabel. Het enige nadeel is, dat deze soms tegen de tekst lijkt te staan. Ook het ingeven is niet altijd even makkelijk. Je moet naar de code gaan en de code opzoeken en daarvoor moet je de tekst typen. Makkelijker is om in de tekst uitleg te geven…. Achtergrondkleur Als je op het kleurvlakje klikt, dan kun je de kleur van de tabel instellen. Dit is de kleur achter de cellen en de rand. De achtergrond kleur van de tabel en van een cel in de tabel hoeft niet dezelfde te zijn. Je kunt dus enkele cellen een andere kleur geven dan andere cellen. 5.4.4.3 Cellen samenvoegen Om de tabel helemaal naar je zin te maken kun je ook in de tabel cellen samenvoegen.

Tabblad Cellen Selectie Hier bepaal je waar jouw wijziging betrekking op heeft. Alleen de Cel, De hele rij, of de kolom Kolom ↓ CEL

Je kan een rij of kolom kiezen voor de titels om data in een andere kleur te zetten dan de rest van de kolom CEL

RIJ→ Met de knoppen volgende en vorige kun je andere cellen, rijen of kolommen selecteren. Je ziet op de achtergrond welke cel, rij of kolom geselecteerd is aan de donkere rand. Grootte Hier kun je de grootte van een cel bepalen. Het beste doe je dit voor een hele rij of kolom tegelijkertijd. Wil je een cel hebben die iets breder is dan de cellen daaronder dan moet je dit doen door cellen samen te voegen. Daar kijken we iets verderop nog naar.


Bouw zelf een eenvoudige website 2011 Inhoudsuitlijning Hier bepaal je waar in de cellen de tekst komt te staan. Zoals in het voorbeeld hieronder. Verticaal Boven

Midden

Onder

Tekst Horizontaal Links

Tekst Tekst Tekst

Gecentreerd

Tekst Tekst Tekst

Rechts

Tekst Tekst

Celstijl Hier bepaal je of een cel een kop is of gewone tekst. Je kan dat op hiet bepalen, of met de opmaak van de tekst (Zoals eerder besproken) Teruglooptekst De kans dat alle tekst zonder problemen in een cel past is niet heel groot. Hier kun je kiezen of woorden mogen worden afgebroken of niet. Je moet alleen erg goed oppassen: Je browser is geen taal expert en breekt worden soms op rare plaatsen af…. Achtergrondkleur Tot slot kun je de achtergrond kleur van de cel aanpassen. Dit gaat op dezelfde manier als voor de pagina of


Bouw zelf een eenvoudige website 2011 5.4.5 You tube filmpje invoegen Hiervoor is er geen knop. Om dit te kunnen doen met je een stukje code invoegen. Die code krijg je van Youtube. We moeten dit in de code gaan aanbrengen. Hiervoor ga je naar de tab “Bron” onderaan in beeld. In de code zoek je de juiste plaats op. De tekst is vaak het duidelijkste. Druk een keer op enter. Enter in de bron is geen enter op het scherm. Het maakt alleen even duidelijk waar je bent. Nu ga je naar het you tube-filmpje.

Onder het filmpje staat de tekst “Share” of “Delen”. Hier klik je op. Er verschijnt een extra gedeelte: Deze link kun je gebruiken als je via facebook, email of e-iets anders rechtstreeks wilt door linken. Maar wil je, zoals in de cursus is gedaan, het filmpje als onderdeel van je website, dan klik je op “embed” of “invoegen”. Er verschijnt weer een nieuw gedeelte. Hier selecteer je de code die in dit gedeelte bovenaan staat. En je kopieert deze met CTRL-C. (of rechtermuisklik en kopieren).


Bouw zelf een eenvoudige website 2011 Nu ga je terug naar KompoZer, en plak je de code in het tabblad “Bron”. Hier plak je de code. Dit kun je doen met CTRL-V. Voordat je plakt kun je een klein truukje gebruiken en de plek markeren met een iets opvallends zoals: “xxxxxxxxxxxxxxxxxxxxxxxxxx”’ in de code herken je dit veel makkelijk en kun je de code van het filmpje plakken. Als je nu terug naar “Ontwerp” gaat zie je een groot rood kader met de tekst “Object”. Hier komt het filmpje terecht. Als je ergens HTML code vind van onder objecten en onderdelen, dan kun je deze op dezelfde manier invoegen in je pagina. 5.4.6 Een ander voorbeeld van code invoegen: Google maps Op verschillende plaatsen op internet kun je dit soort code vinden om onderdelen toe te voegen. Een ander voorbeeld zijn de kaarten van Google. (maps.google.be) Eerst kies je de locatie die je wilt laten zien. Dit doe je door in het zoekvak het adres in te geven. Bijvoorbeeld het adres van een feest, tentoonstelling. Op de kaart wordt de locatie aangegeven met een rood pijltje. Rechtsboven vind je een knop “link” . Als je hier op klikt, kun je kiezen uit: “Link plakken in een email of chatbericht” en “HTML in website plakken”. Om de kaart in een website te plakken kies je deze 2de optie. Ook nu kopieer je deze regel met CTRL-C. Nu ga je terug naar KompoZer, en plak je de code in het tabblad “Bron”. Hier plak je de code. Dit kun je doen met CTRL-V.



6. Filezilla: bestanden op de server zetten Je hebt nu een aantal pagina’s kunnen maken en die aan elkaar linken. De volgende stap is om deze bestanden op de server te zetten bij een hosting provider. Dan pas kan iedereen deze bestanden zien. Dit is een zeer technische stap waarbij je heel goed moet opletten dat je alles juist doet. Hiervoor is het beste om een apart programma te gebruiken. Dit programma werkt met een protocol, soort computer taal, waarmee bestanden veel sneller overgezet kunnen worden. Het beste protocol om bestanden te verplaatsen naar of van een server is FTP, File Transfer Protocol. En om dit te gebruiken heb je dus een FTP-programma nodig. Het programma dat we hier gaan gebruiken is ook weer een Open Source pakket. Dus ook weer gratis voor de gebruikers.

6.1 Downloaden en installeren Net zoals bij KompoZer is de eerste stap om het programma te downloaden en te installeren. Het downloaden doen we vanaf: http://filezilla-project.org/download.php Je komt op het volgende scherm:

Hier kies je de juiste versie voor jou. (Waarschijnlijk de allereerste “FilZilla_3.3.2_Win-setup.exe”) Hier klik je op. Je komt op het scherm zoals hiernaast. Afhankelijk van de beveiligingsinstellingen die je thuis hebt, begint het downloaden, of moet je op “Click here” bovenaan klikken.




Bouw zelf een eenvoudige website 2011 Je krijgt weer een aantal schermen zoals bij het downloaden van KompoZer: Je kiest ook hier weer voor opslaan. Bij Windows Vista en Windows 7 is er een apart plaats (de folder Downloads) bij XP moet je deze zelf kiezen.

Als je dan op “save”/”bewaren” hebt gelkikt, wordt het bestand gedownload, en de balk wordt langzaam gevuld. Als dit klaar is klik je op op “Run”/”IUitvoeren”.

Afhankelijk van de beveiligingsinstellingen thuis kun je ook nu weer een waarschuwing krijgen met de vraan of je zeker weet dat je dit programma wilt opstarten. Je klikt nu op “Run” of “uitvoeren.

Nu kom je in het echte installatie programma. En hier begint dit de licentie overeenkomst. Hier klik je op “I agree”. Daarmee verklaar je jezelf akkoord met de voorwaarden. Ook hierin staat ongeveer dat je dit programma niet onder je eigen naam mag door verkopen.


Bouw zelf een eenvoudige website 2011 Op het volgende scherm kun je kiezen wie het programma mag gebruiken. Dit is eigenlijk alleen van belang als je verschillende gebruikers op dezelfde computer hebt aangemaakt. De eerste optie is iedereen op deze computer. De tweede optie is alleen de gebruiker die nu het programma installeert. Als je hier hebt gekozen, klik je op “volgende”.

In het volgende scherm kun je kiezen welke onderdelen je wilt installeren. Het beste laat je de vinkjes zo staan. Eventueel voeg je het vinkje toe voor een “Desktop Icon”, een snelkoppeling op het bureaublad. En ook nu klik je weer op volgende.

Ook nu krijg je een voorstel voor een locatie op de computer om het programma te installeren, en net zoals bij KompoZer laat je ook hier de standaard locatie staan. Je klikt ook hier weer op volgende.


Bouw zelf een eenvoudige website 2011 Om het programma snel terug te vinden wordt er een map aangemaakt in het menu start. Ook dit laat je op de standaard instellingen staan. Je kunt nu op “install” of “installeren” klikken, en het installeren begint.

De balk wordt gevuld en het programma wordt nu echt geïnstalleerd.

Als het installeren klaar is kom je bij het laatste scherm. Het vinkje om het programma op te starten staat automatisch aan. Als je nu op “Beëindigen”/”Finish” klikt, zal FileZilla gelijk worden opgestart.

Je ziet dat de stappen eigenlijk hetzelfde zijn als bij het andere programma.



6.2 Kennismaking met het programma Nu het programma geïnstalleerd is gaan we eens kijken wat we zien… Titelbalk Menubalk Gereedschappen Snelverbinden FTP-mededelingen Lokale Site (Folders) Externe Site (Folders) Inhoud lokale folders Inhoud externe folders Bestanden in wachtrij/mislukt overdracht/Succesvolle overdrachten Bij Lokale Site zie je de eigen bestanden en mappen staan. Hier moet je straks de folder opzoeken met de bestanden voor je website. Bij Externe Site zie je de folders en bestanden die al bij de hosting provider staan.

6.3 gegevens Hosting Provider instellen Voordat de gegevens naar de juiste provider kunnen gaan, moeten we eerst instellen waar op internet dit is. De snelste manier om dit boven in beeld te doen in de balk “Snel verbinden”. Voor deze cursus krijgt iedereen een klein beetje webruimte om te oefenen. De gegevens die je daar in vult zijn:

•

•

•

•

Host o o

Dit is de locatief die je van de hostingprovider krijgt om de bestanden neer te zetten. Bij deze cursus is dit:  ……………………………………………………………………………… Gebruikersnaam o Dit is je eigen unieke gebruikersnaam om in te loggen bij de hostingprovider. Ook dit krijg je van het bedrijf opgegeven. o Bij deze cursus is dit:  ……………………………………………………………………………… Wachtwoord o Dit hoort bij je gebruikersnaam en mag je NOOIT aan iemand door geven. o Bij deze cursus is dit:  ……………………………………………………………………………… Poort o Soms is het nodig om dit in te vullen. In deze cursus is dit niet nodig. Peije van Klooster – Pagina 36

Bouw zelf een eenvoudige website 2011 Klik je nu op “Snelverbinden”, dan maak je verbinden met de hostingprovider. Rechts in beeld ga je de bestanden en mappen zien die op de andere computer staan. Vul je dit in de bovenste balk, dan moet je deze gegevens iedere keer opnieuw invullen. Veel makkelijker is het om een soort adresboek aan te maken voor de locaties die je vaker gebruikt. Als je de gegevens in de balk hebt in gevuld, en bent verbonden, dan kun je nu kiezen in het menu voor “Bestand” en dan voor “Huidige verbinding naar Sitebeheer kopiëren”. Je hoeft nu alleen nog maar een naam in te geven waaronder jij de locatie snel herkent. Zoals je in dit voorbeeld hiernaast ziet kun je als een soort adresboek verschillende locaties invullen. Om een verbinding te maken nadat je een locatie hebt bewaard, klik je op het driehoekje naast . Je kunt nu kiezen voor alle locaties de je hebt bewaard. Nu kun je daarmee verbinden alleen maar door die te kiezen.

6.4 Bestanden uploaden Nu moeten we de bestanden gaan uploaden naar de hostingprovider. In het linker gedeelte moeten we nu de juiste folder gaan opzoeken om de bestanden te selecteren. Dit is de folder waar ALLE onderdelen (pagina’s, foto’s ,…) in staan. Als dit goed staat kun je aan de rechterkant de juist folder opzoeken. Dit is de folder waar de bestanden terecht komen. Sommige hosting providers gebruiken een folder met de naam public of public_html. Controleer hoe jou provider hier mee omgaat !!

Het uploaden van de bestanden doe je door deze van links naar rechts te slepen.



7 Werkwijze Hierboven staan allerlei technische stappen genoemd. In dit gedeelte ga ik iets verder in op de werkwijze: Welke stappen kun je het beste in welke volgorde doen om het idee in een ontwerp om te zetten en dan op een makkelijke manier op de site te kunnen zetten. In het begin is het zeker goed om eerst alleen de technische stappen te doen en te zien dat de onderdelen werken. Pas aan het einde gaan we van alles 1 geheel maken. De stappen die je doet zijn de volgende:

Bedenken welke pagina's wil je laten zien

Indeling van de pagina's schetsen

Onderdelen verzamelen en gereed zetten

Eerste pagina opmaken

Andere pagina's opmaken

Alles overzetten naar de server

7.1 Welke pagina’s Als eerste gaan we de “hoofdstukken” bedenken van onze pagina’s. Welke informatie wil ik zeker laten zien aan de bezoekers van de pagina’s. Bijvoorbeeld: • • • • •

Welkomstpagina Activiteiten o Overzicht kalender en kleine inhoud Wie zijn wij o Korte omschrijving van de organisatie of persoon Contact o Contact gegevens …

Als je dit eerst netjes doet, heb e later veel minder werk aan het aanpassen van menu’s en andere pagina’s. Je structuur is duidelijk waardoor je later heel veel tijd kan besparen.

7.2 Ontwerp Als je dit hebt gedaan kun je gaan beginnen met een eenvoudig ontwerp op papier te gaan schetsen. Waar komt de titel? Waar ga je het menu neerzetten? Welke afbeeldingen op de pagina’s? Waar ga je welke tekst neerzetten. Al deze zaken kun je het makkelijskte op papier schetsen. De teksten hoef je natuurlijk niet volledig uit te schrijven, maar als je al weet of ergens een korte of een langere tekst komt, dan helpt dat met het bepalen van het ontwerp. Hier bepaal je ook of je kiest voor het ontwerp zoals gebruikt tijdens de cursus (titel boven, menu links en inhoud in het grote vak) of kies je misschien een ander ontwerp…



7.3 Waar welke linken naar welke pagina’s De volgende stap is om vanuit dit basis ontwerp te gaan bepalen waar welke linken naar welke pagina’s komen. Als je dit van te voren doet, kun je daarna makkelijker het basis ontwerp hergebruiken voor andere pagina’s. Ook dit schets je eerst op papier: index.html

1 2 3 4

Titel Inhoud……… ………………… ……………… ……………….

pagina1.html

1 2 3 4

Pagina 1 Inhoud……… ………………… ……………… ……………….

pagina2.html

1 2 3 4

Pagina 2 Inhoud……… ………………… ……………… ……………….

Voor dit voorbeeld gebruik ik hier pagina1.html en pagina2.html, maar in de praktijk kies je voor een andere benaming zoals contact.html, agenda.html

7.4 Structuur in je folders Mijn advies om alles netjes bij elkaar te houden is om bij “Mijn documenten” eerst een folder aan te maken voor de website. Je kunt dan alle onderdelen daar netjes bij elkaar houden. Het gemakkelijkste is om foto’s en afbeeldingen die je gebruikt op je website te kopieren naar een extra folder. Ook als je gebruik maakt van andere programma’s om een album te maken is het verstandig om ook die eerstnetjes bij elkaar te zetten. Als je weet welke onderdelen je in de website gaat gebruiken, en alles staat bij elkaar, gaat het aanmaken van de pagina’s veel sneller en is de kans om onderdelen te vergeten veel kleiner.

7.5 Eerste pagina aanmaken in KompoZer Als alle onderdelen bij elkaar staan, en je ontwerp op papier ongeveer af is, kun je in KompoZer beginnen aan de eerste pagina. Deze bewaar je onder de bestandsnaam “index.html” in de folder “website”. De titel van de pagina is waaraan je de pagina herkend, bijvoorbeeld: “Kermis Lier”. Bij het opstellen van de eerste pagina kun je gebruik maken van alle onderdelen die we eerder hebben gezien (Tabellen, kleuren etc). Ook de linken naar de andere pagina’s maak je vast aan. Ook als de pagina’s nog niet bestaan. Hieronder zul je zien waarom…

7.6 Andere pagina’s aanmaken De openingspagina heeft altijd de bestandsnaam index.html. Hier mag je NOOIT van afwijken. De pagina’s daarna kunnen een andere naam hebben. Bijvoorbeeld “activiteiten.html” of “contact.html”. Als het ontwerp van de andere pagina’s soortgelijk moet worden aan de eerste pagina kun je deze opnieuw openen. Nu kies je voor “Bestand/opslaan als” en onder de naam van de volgende pagina bewaar je deze pagina. Nu hoef je alleen maar de onderdelen aan te passen die anders zijn. De rest is automatisch hetzelfde. Alle linken staan nu gelijk goed op de pagina. Wel kan het verstandig zijn om de titel van de pagina nog even aan te passen. Dit doe je bij “Opmaak/Pagina titel en eigenschappen” (Onderaan in het menu).



7.7 Pagina’s op je webruimte zetten De laatste stap is om de bestanden op de server te zetten zodat iedereen deze kan zien. Dit doe je met het programma Filezilla. Dit is de allerlaatste stap. Ieder onderdeel van je pagina: Alle .html bestanden, alle afbeeldingen etc Het eenvoudigste is om in Fillezilla alle bestanden en mappen in een keer te selecteren. Dit doe je door op de eerste folder te klikken, de SHIFT toets ingedrukt te houden en dan op het laatste bestand te klikken. Alle onderdelen zijn nu in 1 keer geselecteerd. Nu kun je deze naar het rechtervak slepen. Op deze manier heb je op een eenvoudige manier alles geselecteerd en naar je webruimte overgezet.

7.8 Aanpassingen doen Na een aantal weken of maanden zal je aanpassingen willen maken. Ook daarom is het verstandig om de structuur van de site goed te doordenken. Iets dat nu logisch lijkt, kan over een halfjaar ineens niet meer logisch lijken. De aanpassingen doe je in Kompozer. Je opent de pagina’s en maakt de veranderingen. Als je een kleine aanpassing hebt gemaakt, en je twijfelt welke onderdelen je moet overzetten, kun je het beste alles opnieuw doen. Je bent dan zeker dat de versie van de website van je eigen computer ook op de server staat.



8 Waar op letten ? Bij alles wat je op internet doet of plaatst, of dit nu een posting op je eigen site, een weblog, twitter, forum of op facebook is, er een paar zaken die je goed in de gaten moet houden. Zet NOOIT op je site dat je op vakantie gaat. Je weet nooit wie er mee leest, en op bezoek komt als jij er niet bent. Een mogelijkheid om contact op te nemen op je site is heel erg leuk, maar zet niet je adres gegevens zomaar op je site. Alleen als je een winkel, restaurant oid hebt is dit nodig. IN alle andere gevallen kun je dit beter niet doen. Ook weer je weer nooit wie het leest en wat de intenties zijn. Zelfs een combinatie van voor- en achternaam in een plaats kan al voldoende zijn om iemand op te sporen. Bijvoorbeeld via http://www.infobel.be Alles wat je op internet zet, kan in principe jaren lang worden teruggevonden. Ook wanneer u zelf het bericht of foto al weer hebt weggehaald. Dit kan doordat zoekmachines gegevens indexeren en kopiëren. Ook kunnen anderen uw bericht of foto opslaan en opnieuw verspreiden. Let dus goed op wat je ergens neerzet. Zet geen foto’s, o muziek op je site die niet van jou zijn. Alleen als deze echt pubkiek eigendom zijn kan dit. In alle andere gevallen kun je problemen krijgen met de maker van de foto die ineens een grote schadeclaim kan eisen. Als een onbekende je benadert, wees dan extra voorzichtig. Je weet nooit wat de bedoelingen zijn. Helaas zijn er erg veel mensen die internet niet voor de juiste doeleinden gebruiken, en alleen maar proberen zelf rijker te worden ten koste van anderen. Je weet nooit waar zo’n persoon online tegenkomt. Dit kan iemand zijn die doet alsof hij dezelfde interesses heeft in een online forum, facebook of ergens anders. Geef je inlog gegevens NOOIT door aan anderen. De beheerders van de sites kunnen de gegevens terugzetten zodat je opnieuw kan inloggen. Zij hebben dit dus nooit nodig. Anderen kunnen zich als jou gaan voordoen als je niet de gegevens zomaar doorgeeft. Dat kan niet alleen je reputatie/goede naam schaden, maar kan je zelfs geld gaan kosten.



Appendix 1: Verkorte handleiding van Porta/simpleviewer Porta is een kleine toevoeging bij Simpleviewer om heel eenvoudig foto’s in een mooie webgallerij te zetten. Hier is echt niet veel voor nodig. Porta is te downloaden vanaf: http://stegmann.dk/mikkel/porta/download.php De installatie verloopt weer op een vergelijkbare manier als bij e andere programma’s. Ik laat die hier dan ook even achterwege. Na het installeren heb je een extra ikoontje op het bureaublad. Als je hierop dubbelklikt start het programma op. Na het opstarten kies je de folder met de foto’s. Ook hiervoor is het makkelijk als je eerst de foto’s uitkiest, en dan pas omzet naar een album. Start je het programma voor een 2de keer op, dan kiest dit automatisch de laatst gekozen folder, of het laatst aangemaakte album. Op die manier kun je eenvoudig kleine aanpassingen maken.

In de volgende stap kies je de naam van het album. Standaard wordt de naam van de folder overgenomen, maar dit kun je veranderen. Bij het copyright teken verander ik de naal altijd in mijn eigen naam. Het zijn tenslotten mijn foto’s… Met ‘Edit Album’ is het mogelijk om de volgorde te veranderen van de foto’s. Bij ‘Options’ de kleuren en andere gegevens.

Edit Album De volgorde kun je veranderen door de foto’s naar een andere plaats te slepen. Ben je hiermee klaar dan klik je rechtsonderaan op “close” Je komt terug bij het eerste scherm.



Options Zet altijd de eerste 3 vinkjes aan. Het eerste is om te zorgen dat de foto’s automatisch rechtkomen te staan. Een enkele gaat dit fout, en zul je de foto recht moeten zetten in een beeldbewerkings-programma zoals Gimp of Photoshop. Maar meestal werkt dit op de juiste manier. Het 2de vinkje zorgt ervoor dat de foto’s in en uit gaan vloeien. Dit ziet er veel mooier uit. Een nadeel is wel dat de bezoekers van de site een browser moeten hebben die flash ondersteunt. Maar vrijwel iedereen heeft tegenwoordig een dergelijke browser. Het 3de vinkje zorgt ervoor dat je een tekst regel in de foto’s kan plaatsen. Op die manier is het altijd duidelijk dat dit jouw foto’s zijn, en niet die van iemand anders. Naast het 2de en 3de vinkje zie je nog een knop zitten. De knop bij het 2de vinkje (options) is voor de opties voor de kleuren. Je kan hier de achtergrondkleur(Background Color), de tekstkleur (Text Color) en de kleur van het kader (Frame Color) bepalen. Ook kun je hier het aantal rijen (rows) en kolommen (Columns) bepalen van de voorbeelden. Dit zijn de kleine foto’s die je naast de grote foto’s ziet. Met de knop naast het derde vinkje(Edit) bepaal je welke tekst over de foto verschijnt. Bij Text vul je in wat je wilt. Bijvoorbeeld je eigen email adres.Bij Position vul je de plaats in. Het font is om het lettertype te bepalen, en de size voor de grootte. De text wordt in de foto verwerkt zodat het altijd duidelijk is van wie de foto’s zijn. Terug naar de opties: Onderaan kun je bepalen hoe groot de foto’s maximaal worden: 600 tot 800 pixels is voor de meeste websites een goede maat. Als je alles hebt ingesteld klik je onderaan op OK. Je komt terug bij het eerste scherm. Als je hier op “Start” klikt wordt de webgallerij gemaakt en kun je die gebruiken. Peije van Klooster – Pagina 43

Inleiding in het bouwen en onderhouden van een eigen website. Peije van Klooster

Recommend Documents

Titel van de pagina