1 Maak uw eigen website

Transcriptie

1 uitgebreide cursus 1 Maak uw eigen website Het is gemakkelijker dan ooit om een eigen website op internet te beginnen. Er is zoveel keus dat u niet meer met ingewikkelde code aan de slag hoeft te gaan. Maar het is wel zo handig als u in ieder geval de basisprincipes kent! In deze 5-delige cursus gaan we stapsgewijs een eigen website maken. ingewikkelder vormen aannemen, zoals een webwinkel of een vergelijkingssite. Websites rond een onderwerp. Dit kan een bepaald hondenras, een nieuwsportaal over wielrennen of een vergelijkingssite voor hypotheken zijn. Een voorbeeld van een persoonlijke website Voorbeeld van een website die kennis wil uitdragen Als u op internet rondkijkt, ontdekt u een eindeloze variatie in websites. In feite kunnen we ze allemaal onderbrengen in drie verschillende groepen: Persoonlijke websites, waarin u informatie over uzelf vertelt of verslag doet van uw vakantie, de verbouwing van uw huis of de belevenissen van uw huisdier. Zakelijke websites, die soms niet meer zijn dan een digitaal uithangbord. Ze kunnen ook Ideeën voor websites Misschien hebt u al een onderwerp in gedachten voor uw website. Zo niet, loop dan eens uw interesses af en bedenk hoe u daarmee iets leuks kunt doen. Iets wat nog niet eerder op internet is gedaan, of iets wat beter is dan het huidige aanbod. Vraag vrienden en kennissen welke informatie ze tevergeefs op internet zoeken. Een andere manier om onderwerpen te verzamelen zijn de lijsten van zoekmachines. Een bekend voorbeeld is de Google Zeitgeist. Hierin vindt u de populairste zoekopdrachten van de afgelopen maand in de VS, Nederland en diverse andere landen. Maar let op: dit is een momentopname en bovendien is het verstandig om een onderwerp te kiezen waar u langere tijd lol in houdt. Creatief met websites Misschien denkt u bij een website meteen aan een verzameling webpagina s met relatief statische tekst en plaatjes. Maar er is veel meer mogelijk. Wat dacht u van een weblog, een digitaal dagboek waarbij de berichten op datum zijn gesorteerd? U kunt een persoonlijke weblog maken over uw belevenissen, maar we zien steeds vaker weblogs met een zakelijke insteek verschijnen. Zo bloggen bij Microsoft de medewerkers er fanatiek op los ( Het leuke van een weblog is dat u uw eigen mening kwijt kunt en dat het interactief is: bezoekers kunnen een reactie achterlaten en meepraten. Hebt u weinig tijd of niet zoveel te vertellen, dan begint u gewoon simpel met een fotoblog (moblog.nl) of u gaat microbloggen (twitter.com). Wilt u een website maken waarin u het één en ander wilt uitleggen, dan is een wiki misschien een beter idee. Een wiki is een website waarin u veel informatie op een gestructureerde manier kwijt kunt. Stel dat u al jarenlang rondloopt met het idee om een boek te schrijven over uw favoriete vakantieland, motorrijden of bonsai kweken. U hebt al heel wat informatie verzameld, maar het is er eigenlijk nooit van gekomen om het af te maken. Een wiki is dan het aangewezen medium:

2 Gewone website, weblog of wiki? de informatie hoeft niet af te zijn, u kunt precies aangeven welke onderdelen nog ontbreken en u kunt eventueel anderen vragen om ze aan te vullen. Wat hebt u nodig? Welke hulpmiddelen u nodig hebt bij het maken van uw website is helemaal afhankelijk van de keuze die u maakt. Verderop in dit magazine vertellen we u meer over SiteBuilder, alsmede de software die u in de Applicatie Kluis terug kunt vinden, maar er zijn ook andere mogelijkheden: Eenvoudige website Nu u een website laat hosten bij Hosting2GO staat u voor een oerwoud aan mogelijkheden. Misschien hebt u voldoende aan SiteBuilder, maar zoals we hiervoor al zeiden, zijn er meer mogelijkheden. U kunt een webeditor als Dreamweaver of simpelweg Windows Kladblok gebruiken om webpagina s te maken. Deze site kunt u dan met een ftp-programma op het internet publiceren; ftp het is niet meer dan een transportmiddel om uw webpagina s naar de webruimte op internet te verplaatsen. Het nadeel van deze aanpak is dat u snel het overzicht kwijtraakt als uw website groeit. Om tijd te besparen kunt u een websitesjabloon (template) gebruiken dat u met uw eigen webinhoud (content) kunt vullen, maar in de praktijk blijft het vaak een heidens karwei om zo n website te onderhouden. Zelfgemaakte dynamische website Bij een dynamische website bevindt alle inhoud zich in een database. Als de bezoeker op een knop of link klikt, wordt een pagina uit de database opgehaald en in de browser van de bezoeker getoond. Hiervoor wordt meestal gebruikgemaakt van de combinatie PHP en MySQL: MySQL is de database waarin u de bestanden opslaat en PHP is de taal waarmee u alle commando s geeft, Kies een gewone website als u: Informatie wilt publiceren die niet vaak wijzigt. Eenmalig veel tijd aan uw website wilt besteden en daarna niet zoveel. Iets ingewikkelds wilt maken, bijvoorbeeld een webwinkel, vergelijkingssite of nieuwsportaal. Kies een weblog als u: Dagelijks iets nieuws te melden hebt. Uw mening kwijt wilt of uw hart wilt luchten. Wilt schrijven over iets dat tijdgebonden is (opgroeien van kind of huisdier, wereldreis, voorbereidingen voor marathon). Anderen wilt laten reageren. Kies een wiki als u: Uitleg wilt geven of een onderwerp diepgaand wilt bespreken. Al veel materiaal hebt verzameld, dat nog niet compleet is. Anderen wilt laten meeschrijven om uw materiaal compleet te maken. bijvoorbeeld om webpagina s op te halen. U kunt zelf een website met database ontwerpen en bouwen. Gemakkelijker is het om gebruik te maken van een kant-en-klaar contentmanagementsysteem (cms). Contentmanagementsysteem U bent niet de eerste die een website met database probeert te bouwen. Duizenden mensen gingen u al voor, die allemaal tegen dezelfde problemen Tips voor een succesvolle website. 1. Maak het niet te bont. Gebruik niet meer dan drie lettertypes door elkaar en wees spaarzaam met kleuren. 2. Kijk wat de concurrentie doet. Maak dan iets, wat anderen nog niet hebben. 3. Eenvoud voor alles. Zorg dat uw website er aantrekkelijk uitziet, maar maak er geen orgie van plaatjes en effecten van. Hoe overzichtelijker, hoe beter. 4. Laat uw website aan een ander lezen. Kies een proefpersoon die verstand heeft van websites en die niet bang is om kritiek te geven. 5. Verwijs naar andere websites door. Uw website kan niet elk onderwerp bestrijken. Link door naar anderen en laat anderen naar u linken; dat doet uw rangorde in Google ook goed. Veelgezochte zoekwoorden in Google. Twitter

3 uitgebreide cursus Fysieke tekstopmaakelementen De volgende elementen worden gerekend tot de fysieke tekstopmaakelementen: B, L, S, STRIKE, TT, U, BIG, SMALL, SUB en SUP. U gebruikt ze, als u de weergave van de tekst wilt vastleggen. Dit is <B>vet</B> Dit is vet Dit is <I>cursief</I> Dit is cursief Dit is <S>doorgestreept</S> Dit is doorgestreept Ook dit is <STRIKE>doorgestreept</STRIKE> Ook dit is doorgestreept Deze tekst heeft een <TT>vaste letterafstand</tt> Deze tekst heeft een vaste letterafstand Dit is <U>onderstreept</U> Dit is onderstreept Dit is <BIG>groot</BIG> Dit is groot Dit is <SMALL>klein</SMALL> Dit is klein Dit is <SUB>subscript</SUB> Dit is subscript Dit is <SUP>superscript</SUP> Dit is superscript Tot de fysieke tekstopmaakelementen kan ook het door Netscape Navigator geïntroduceerde BLINK-element worden gerekend, waarmee tekst knipperend wordt weergegeven. Omdat het element geen deel uitmaakt van HTML 4.0 en knipperende tekst bovendien door veel gebruikers als hinderlijk wordt ervaren, adviseren we u om dit element niet te gebruiken. De verschillende elementen kunnen ook gecombineerd worden. Dit is <B><I>vet en cursief</i></b> levert op Dit is vet en cursief. Tot slot: met <BR> gaat u naar de volgende regel. aanliepen. De kennis die daarmee is vergaard, is terug te vinden in contentmanagementsystemen. Dit zijn kant-en-klare systemen die u op uw webruimte installeert. Ze zorgen ervoor dat u via een simpel dashboard uw website kunt beheren, zodat u niet de weg kwijtraakt in de grote hoeveelheid bestanden. De meeste contentmanagementsystemen, zoals Joomla (voor websites) en WordPress (voor weblogs), bestaan in feite uit een gestructureerde verzameling php-pagina s die u naar uw webruimte kopieert. Daarna kunt u via een webformulier nieuwe pagina s aanmaken, de opmaak wijzigen en dergelijke. Het grote voordeel van kant-enklare cms en is dat er allerlei plug-ins verkrijgbaar zijn waarmee u nieuwe functies kunt toevoegen, zonder dat u iets hoeft te programmeren: denk aan tellers, een fotobibliotheek, een poll of een kant-en-klaarcontactformulier. Html Html (HyperText Markup Language) is dé basis van het web: alle webpagina s maken er gebruik van. De taal bestaat uit verschillende labels (tags) die de browser vertellen hoe bepaalde elementen op een webpagina eruit komen te zien. Wilt u een stukje tekst vetgedrukt maken, dan zet u er de labels <B> en </B> omheen. De letter B staat voor Bold, het Engelse woord voor vetgedrukt. Html bevat twee soorten labels: begin- en eindlabels. Als u aangeeft dat iets vetgedrukt moet zijn, moet u natuurlijk ook kunnen aangeven wanneer het vetgedrukte gedeelte weer eindigt. De meeste html-labels betaan in twee varianten, als beginen eindlabel, maar niet allemaal. Het label <BR> voor een nieuwe regel is een veelgebruikte uitzondering. We zeiden al: alle webpagina s maken gebruik van html. Elke webpagina is als volgt opgebouwd: <HTML> <HEAD> <TITLE>De titel van mijn webpagina</title> </HEAD> <BODY> De inhoud van mijn webpagina. </BODY> </HTML> Om overzicht te houden op de structuur maken webontwikkelaars gebruik van inspringing. Een veelgemaakte fout is namelijk dat mensen vergeten een html-label af te sluiten. Lay-out en webstandaarden Html kent geen methoden om plaatjes en tekst te positioneren. Om te zorgen dat een website een mooie indeling krijgt, werden ooit frames gebruikt. Hierbij wordt een website opgedeeld in een aantal gebieden. De frames zelf verwijzen weer naar htmlbestanden, zodat u in feite een lappendeken van losse webpagina s te zien krijgt. Het navigatiemenu stopt u in een apart frame (meestal aan de linkerkant). Dat heeft als voordeel dat het navigatiemenu er op elke webpagina er hetzelfde uitziet. Elke webpagina heeft dezelfde indeling en u kunt de elementen tot op de pixel nauwkeurig positioneren. Tegenwoordig zijn frames hopeloos verouderd. Vijf jaar geleden stapten webontwikkelaars over op tabellen. Het handige daarvan is dat de afmetingen van onderdelen op de website zich automatisch kunnen aanpassen: u kunt bijvoorbeeld instellen dat het navigatiemenu altijd 20% van de totale breedte in beslag moet nemen. Het grootste bezwaar tegen tabellen is dat het html-label <table> eigenlijk niet is bedoeld voor lay-out, maar omdat er vroeger geen alternatief was, werd er toch intensief gebruik van gemaakt. Dat alternatief is er nu wel: tegenwoordig raadt de W3C, de organisatie die internetstandaarden bepaalt, aan om zogenoemde cascading stylesheets (CSS) te gebruiken. Daarbij splitst u de inhoud van de webpagina helemaal van de opmaak. De inhoud van de webpagina bevindt zich in een html-bestand (of in een database) en de opmaak wordt helemaal los daarvan geregeld in CSS. Het voordeel van CSS is dat het makkelijker aanpasbaar, flexibeler en toegankelijker is dan de oude aanpak. Wilt u de kleur of lettergrootte van alle kopteksten op uw website wijzigen, dan hoeft u dat maar op één plaats aan te passen. Verderop in dit magazine zullen we nog vaker terugkomen op CSS en het gebruik ervan. U kunt bijvoorbeeld verschillende stylesheets voor verschillende apparaten en toepassingen maken; bijvoorbeeld een Mac-thema voor bezoekers die uw website met de browser Safari bezoeken en een eenvoudig thema voor bezoekers met een mobiel apparaat zoals een smartphone. Ook op het gebied van html hebben de ontwikkelingen niet stilgestaan. De meeste webontwikkelaars zijn overgestapt van html naar xhtml (extensible HyperText Markup Language). Deze taal verschilt inhoudelijk niet zoveel van HTML 4.01, maar is wel strikter geformuleerd en er is minder rekenkracht nodig om de code te verwerken waardoor het beter geschikt is voor apparaten met minder rekenkracht zoals smartphones. Een van de wijzigingen is dat alle labels gesloten moeten worden: een <p> voor een nieuwe paragraaf is niet voldoende; u moet de paragraaf ook afsluiten met een </p>. Bij gewone html is dat niet vereist, bij xhtml wel.

4 2 De vormgeving maakt het verschil U wilt een eigen website of weblog maken, maar u wilt het vanaf het begin goed aanpakken. In deel 2 van deze reeks artikelen maakt u daarom kennis met kleur, lettertypes, toegankelijkheid, websites waar u materiaal kunt vinden en u leert hoe u een eenvoudige weblog opzet. Als voorbeeld maken we een website over lekker eten. IIn het vorige hoofdstuk hebben we de basiskennis behandeld, zodat u weet wat html is, welke keuzemogelijkheden er zijn en welke gereedschappen u nodig hebt. Nu is het tijd om uw website of weblog daadwerkelijk te gaan inrichten. Daarvoor zijn twee methoden: voor een kleine, statische website gaat u aan de slag met html en voor een website waarvan de inhoud regelmatig wijzigt roepen we de hulp in van WordPress. Beide methoden zijn ook voor beginners goed te doen en geven meteen resultaat. Het verschil is dat u bij de html-aanpak elke webpagina als een los html-bestand in uw webruimte zet (wat nogal snel onoverzichtelijk kan worden), terwijl u bij WordPress gebruikmaakt van een contentmanagementsysteem (cms). Alle webpagina s worden daarbij bewaard in een database, zodat u ze gemakkelijker kunt beheren. Eenvoudige website maken Wat is het doel van uw website en wie is de beoogde bezoeker? Wilt u nieuws, foto s en video delen, of een sociale website, met interactie? Uw keuze heeft gevolgen voor het ontwerp en ook voor de software die u gebruikt. Tot voor kort was Microsoft Frontpage een populair pakket om eenvoudige websites te maken. Frontpage is inmiddels vervangen door het prijzige Expression Web, maar gelukkig zijn er genoeg alternatieven. U kunt een site maken met SiteBuilder, maar we willen u ook de alternatieven laten zien. Wij kiezen in deze cursus voor open-sourcesoftware die u niet lastigvalt met reclame en registratiecodes. Onze keuze is Nvu, een gebruiksvriendelijk alternatief voor pakketten zoals Adobe s Dreamweaver. Nvu Met Nvu is het maken van een website net zo makkelijk als het typen van een tekstdocument en het toevoegen van wat plaatjes om de boel op te vrolijken. Nvu werkt volgens het WYSIWYGprincipe: wat u op uw eigen scherm ziet, is wat de bezoeker van uw website ook te zien krijgt. Mocht u uitgroeien tot een gevorderde gebruiker dan zit u met Nvu nog steeds goed; het programma ondersteunt heel wat geavanceerde functies. Het is niet toevallig dat Nvu lijkt op populaire webeditors als Dreamweaver, Frontpage en GoLive. De makers hebben goed gekeken welke onderdelen voor beginnende gebruikers belangrijk zijn. U kunt de software vinden op De installatie van Nvu Het openingsvenster van Nvu

5 uitgebreide cursus Een knipperende aanwijzer wacht tot u inspiratie hebt voor een spannend websiteontwerp Op het web vindt u allerlei bruikbare sjablonen voor websites is het van belang dat u een template kiest die op Cascading Style Sheets (css) is gebaseerd. We kiezen een sjabloon dat de gewenste indeling en uitstraling heeft. Het kleurschema maakt niet zoveel uit, want de kleuren kunt u gemakkelijk vervangen. De meeste templates mag u gewoon gratis gebruiken, mits u een koppeling naar de ontwerper laat staan. Pak het zip-bestand met het sjabloon uit en sla het lokaal op, zodat u het straks gemakkelijk terugvindt. Zo n sjabloon bestaat uit een html-bestand, een css-bestand en een map met afbeeldingen Nvu is Nederlandstalig, gratis en wordt ontwikkeld door Mozilla, de makers van Firefox. Het ziet er meteen vertrouwd uit, met de menubalk, knoppenbalk en werkbalken die u ook uit andere Windowsprogramma s kent. Een knipperende aanwijzer wacht totdat u iets begint te tikken. In het menu Invoegen vindt u alle elementen die u in een webpagina kunt invoegen en Bij het aanbrengen van koppelingen maakt u de met de tekengereedschappen url relatie in de werkbalken kunt u blokken en tekstvakken in verschillende grootte en kleuren aanbrengen. In de knoppenbalk staan knoppen voor het invoegen van afbeeldingen, koppelingen, tabellen en formulieren. Maar waar moet u beginnen? Heel eenvoudig: u verzint niet zelf iets, maar maakt gebruik van een van de honderden sjablonen (templates) die op internet te vinden zijn. Zoek in Google maar eens naar free css templates. Wilt u verderop in de cursus niet vastlopen, dan Starten met Nvu Het gebruik van Nvu is in feite heel eenvoudig: klik op de knop Openen, blader vervolgens naar het html-bestand met de naam index.html (dit is de homepage) en kies Openen. De webpagina verschijnt in Nvu en u kunt hem vrij aanpassen. Tik een andere tekst, vervang afbeeldingen of probeer de kleur van achtergrond en van letters te wijzigen. Het werkt eigenlijk net als in een gewone tekstverwerker. Onderin het venster van Nvu ziet u vier tabbladen. Normaal gesproken werkt u in het tabblad Normaal, maar u kunt er ook voor kiezen alleen de broncode of het eindresultaat van uw webpagina te bekijken. U kunt meerdere pagina s op basis van ditzelfde sjabloon aanmaken. Open index.html opnieuw, breng wijzigingen aan en sla het op onder een andere naam. Belangrijk: zorg altijd dat er een index.html aanwezig blijft. U kunt tussen pagina s koppelingen aanbrengen door een tekst of plaatje te selecteren waarna u op Koppeling klikt en de gewenste paginanaam intikt. Zorg dat u paginaverwijzingen relatief maakt: u zet een vink in het vakje voor URL is relatief ten opzichte van paginalocatie. Dat voorkomt dat de koppeling straks verwijst naar een bestand in de map C:\Users\ Uwnaam\Documents\Website\Test\ dat voor anderen niet toegankelijk is. Afbeeldingen bewaart u altijd in de map images of een submap daarvan. Opslaan en publiceren Bent u tevreden met de wijzigingen die u hebt aangebracht, dan slaat u uw html-bestanden op en opent u uw ftp-programma (zie kader Ftp en

6 Handig: Nvu beschikt over een ingebouwde ftp-functie ING en ABN Amro; twee banken met verschillende kleuremoties met FileZilla ). Maar wacht, Nvu bevat zelf al een ingebouwde ftp-functie waarmee u uw website kunt publiceren. Klik op de knop Publiceren in de werkbalk en er verschijnt een venster waar u het ftp-adres, uw gebruikersnaam en wachtwoord kunt invullen. Lukt het hier niet, dan kunt u altijd nog met FileZilla alle bestanden en mappen uploaden. U uploadt niet de bovenliggende mappen, maar alleen de inhoud van de map waarin index.html staat en eventuele submappen daarvan. U kopieert deze bestanden en mappen naar de zogenaamde root. Dit is het laagste niveau in uw webruimte. Bij Hosting2GO is dat de map /httpdocs. Kleur en kleurgebruik Een juist kleurgebruik op uw website is belangrijk. U snapt ook wel: zwarte letters op een donkere achtergrond zijn nauwelijks leesbaar, maar goed kleurgebruik gaat verder. U kunt met kleuren ook een bepaalde emotie bij uw bezoekers opwekken. Bedrijven gebruiken dit bij het aanprijzen van producten of diensten. En realiseert u zich dat één op de twaalf mensen kleurenblind is en dus rood en groen niet kan onderscheiden! Allemaal zaken om rekening mee te houden bij het ontwerpen van uw eigen website. Surf eens naar uw vijf meest favoriete websites en noteer de voornaamste kleuren. Vergelijk vervolgens de websites van de ING ( en ABN Amro ( Met kleur proberen ze bij u een bepaalde emotie op te wekken. Zo staat de kleur oranje (ING) voor zakelijk, maar ook voor beschermend. De kleur groen (ABN Amro) draagt groei en kalmte uit. Bepaal voor uw eigen website welke informatie u wilt geven en welke emotionele kleur daar het beste bij past. Onthoud verder dat u niet vast zit aan groen, blauw of rood. Binnen die kleuren zijn nog tal van schakeringen mogelijk, zoals dieprood, oceaanblauw of morgengroen. Zoek bijvoorbeeld op het web of in uw fotocollectie een foto waar de door uw gewenste kleur op voorkomt en probeer met het kleurpipetgereedschap de rgb-kleur (zie verderop) te ontdekken. Op basis van die rgb-kleur kunt u dan weer de aanvullende kleuren vinden die deze kleur het beste complementeren. Een goede website hiervoor is Complementaire kleuren gebruikt u om meer nadruk op knoppen, titels of andere elementen te leggen. Ftp en met FileZilla Met het File Transfer Protocol (ftp) transporteert u bestanden van en naar de webruimte die u bij uw abonnement op Hosting2GO heeft gekregen. Een voorbeeld van een ftp-programma is FileZilla, dat u gratis downloadt van (filezilla-project.org). Na de installatie logt u in met uw hostnaam (bijvoorbeeld ftp.eetblog.nl), uw gebruikersnaam en wachtwoord. Het poortnummer is 21, de standaardwaarde. Bladeren door uw webruimte werkt net als het bladeren door uw eigen harde schijf met Windows Verkenner. FileZilla geeft links de lokale bestanden en mappen weer, en rechts de bestanden op de externe site. U kunt bestanden in beide richtingen slepen. Ook kunt u mappen aanmaken, hernoemen en verwijderen. Een alternatief voor FileZilla is Core FTP LE, te vinden op coreftp.com. Lees hier meer over op pagina 52. U kunt FileZilla gratis downloaden Boven in het FileZilla-venster kunt u inloggen op uw webruimte Zo moet u kleuren dus NIET toepassen

7 uitgebreide cursus Kleurcombinaties Voor tekst- en achtergrondkleur is een hoog contrast (zwart op wit, wit op blauw, zwart op geel) aan te raden vanwege de betere leesbaarheid. Voor achtergrond en grafische elementen op de pagina (knoppen, tabellen, et cetera) is een hoog contrast echter niet altijd een goed idee. Probeer de volgende zaken te vermijden: laag contrast tussen tekst en achtergrond, zoals grijze tekst op een witte achtergrond; niet-vetgedrukte letters in felle kleur op een donkere achtergrond; meng rood niet met groen (sommige mensen zijn Deze 216 kleuren worden ook op oudere kleurenblind en kunnen systemen precies zo weergegeven deze kleuren niet van elkaar onderscheiden); gebruik liever niet teveel primaire kleuren tegelijk. Kies in dat geval voor gedempte kleuren of pasteltinten. Kleuren op het web Oorspronkelijk konden we slechts 216 kleuren op het web tonen. Dit had te maken met de beperkte kleurweergave van grafische kaarten en monitoren. Die 216 kleuren werden op de pc en de mac hetzelfde getoond en werden daarom websafe kleuren genoemd. Hiernaast links ziet u een afbeelding van deze kleuren. Het zal u opvallen dat webkleuren worden opgebouwd uit hexadecimale codes van drie paren. Het eerste hexadecimale getal stelt de kleur rood voor, het tweede groen en het laatste paar is blauw. Hoe hoger het hexadecimale getal, hoe maximaler de kleur. De kleurcode #FF0000 staat dus voor rood: maak de kleur rood (FF) maximaal, meng geen groen (00) en meng geen blauw (00). Tegenwoordig zijn er miljoenen kleurcombinaties mogelijk en u kunt dus wat meer nuances aanbrengen op uw webpagina. Een makkelijke website voor het achterhalen van de kleurwaarden van html-kleuren is html-colorcodes.info. Goed gebruik van lettertypen Bij de keuze van een lettertype voor uw webteksten en andere pagina-elementen moet u rekening houden met een aantal factoren. Uw letterkeuze bepaalt de uitstraling van uw website (zakelijk en formeel versus vriendelijk en speels). Daarnaast zijn sommige lettertypes beter leesbaar (op het scherm) dan andere. En u moet weten of het lettertype ook aanwezig is in de fontbibliotheek van de bezoeker. Houdt u zich daarom aan de volgende drie vuistregels bij de keuze voor een bepaald lettertype: Passend bij de uitstraling van uw website; Goed leesbaar vanaf een computerscherm; Beschikbaar in de gebruikelijke browsers in verscheidene besturingssystemen. We onderscheiden twee verschillende lettertypes: serif en sans-serif. Serif-fonts hebben een pootje onderaan de letters en zijn vooral geschikt voor langere teksten. Een voorbeeld is Times New Roman. Bij Sans-serif-letters ontbreekt het pootje; dit lettertype heeft een modernere uitstraling, bijvoorbeeld Arial. Hieronder de meest populaire lettertypes, hun leesbaarheid en de beschikbaarheid: Arial (of het gelijkwaardige font Helvetica) Arial is op vrijwel elk besturingssysteem beschikbaar en een van de bekendste sansserif-lettertypen. Het was tot aan Windows Vista zelfs het standaardlettertype voor dialoogvensters en schermteksten in Windows. De leesbaarheid van Arial, met name bij grotere lappen tekst, is niet goed. Vooral als de letters klein worden afgebeeld, lijdt de leesbaarheid daaronder. Times New Roman Deze letter gebruikt u vooral als de grootte minimaal 12 punts is en u veel tekst moet schrijven, bijvoorbeeld voor een uitleg of een handleiding. Times New Roman heeft een zakelijke uitstraling. Verdana Dit is min of meer de verbeterde opvolger van Arial. Verdana staat door zijn brede letters bekend om zijn zeer goede leesbaarheid. Verdana heeft een moderne uitstraling en is geliefd bij zowel webmasters als websitebezoekers. Georgia Waar Verdana de sans-serif-opvolger is van Arial, is Georgia de serif-variant van Times New Roman. Georgia herkent u dus aan de pootjes onderaan de letters, maar ook aan de modernere uitstraling. Georgia is inmiddels op de meeste besturingssystemen standaard beschikbaar. Andere lettertypen die probleemloos gebruikt kunnen worden zijn Trebuchet, Comic Sans en Courier New.

8 3 lay-out en opmaak In het eerste deel van deze cursus hebben we de basiskennis uitgelegd en hebben we met behulp van een template een fraaie website gemaakt. In deel 2 keken we naar het kleurgebruik en lettertypes. Nu is het tijd om de juiste lay-out te kiezen: kiest u voor twee, drie of meer kolommen? Geen HTML-kennis nodig Met een moderne webeditor zoals Nvu kunt u een complete website ontwerpen, zonder ook maar iets van HTML te weten, zoals u in de vorige artikelen hebt gezien. Maar als zo n template niet helemaal aan uw wensen voldoet, is het wel zo handig als u kleine wijzigingen kunt aanbrengen. Gelukkig is het gemakkelijk om wat basiskennis van HTML op te doen, zonder ingewikkelde code te leren. Eerder legden we al uit dat HTML zich langzamerhand ontwikkelt naar XHTML, een opvolger die aan strengere regels moet voldoen en daardoor gemakkelijker in te lezen is door de browser. In deel 1 van deze cursus hebben we u al eenvoudige voorbeelden laten zien. Dat breiden we nu uit naar iets ingewikkelder voorbeelden. Hebt u al eerder met HTML gewerkt, dan is het belangrijk te realiseren dat oude HTML-labels eigenlijk niet meer zijn toegestaan: in plaats van <b></b> voor vetgedrukte tekst gebruikt u nu <strong></strong> en voor cursieve tekst gebruikt u geen <i></i> meer, maar <em></em>. CSS Ook CSS is al ter sprake gekomen. De grootste beperking van HTML is dat het nooit bedoeld was om er documenten mee op te maken. Het aantal HTML-labels om opmaak in te stellen is beperkt en daar komt bij dat verschillende browsers de opmaaklabels verschillend interpreteren. Stel bijvoorbeeld dat u een kop maakt met het label <h2>, dan weet u niet hoe die er in de praktijk uit zal zien, tenzij u dit nauwkeurig definieert. In een document met veel koppen kan het een enorme klus zijn om steeds opnieuw de juiste kleur, grootte en lettertype van de kop te definiëren. Het kan er ook voor zorgen dat de bezoeker van uw webpagina enorm lang moet wachten tot alle code is geladen. En als u achteraf besluit dat de kopteksten toch nog iets groter moeten zijn, moet u alle labels op de pagina langslopen en stuk voor stuk aanpassen. Met CSS hoeft u de opmaak van een kop <h2> maar op één plaats te bepalen. Overal op uw website waar u een kop wilt tonen, zet u simpelweg de code <h2> en </h2> rondom de koptekst. Als uw website groeit naar honderden pagina s (of meer!), hoeft u maar op één plaats de kleur of de lettergrootte aan te passen. Met een kleine wijziging kunt u uw website direct een nieuw gezicht geven. Bijzonder handig. Zoekmachines CSS is ook bruikbaar om de paginaopmaak te definiëren. Dat levert fraaie mogelijkheden op, zoals uitklapbare menu s, maar er is nog een betere reden om CSS te gebruiken: zoekmachines. Zoekmachines zien webpagina s niet op dezelfde manier als mensen. Het oog van een menselijke bezoeker valt meteen op een mooie afbeelding of op De Developer Toolbar voor Firefox leert u het een knipperende tekst midden effect van CSS-instellingen zien. op de pagina. Een zoekmachine leest webpagina s echter in de volgorde waarin u de inhoud hebt gedefinieerd; dat begint meestal linksboven bij het navigatiemenu om pas veel later bij de hoofdtekst te belanden. Met CSS kunt u de hoofdinhoud eerder in het bestand plaatsen, waardoor deze eerder door de zoekmachine wordt gelezen. Een goede manier om het effect van CSS te zien, is om te spelen met de Web Developer Toolbar voor Firefox, of met de Internet Explorer Developer Toolbar. U kunt hiermee informatie over de CSS-formattering van een webpagina bekijken, de CSS-instellingen wijzigen en vervolgens kijken wat er gebeurt. Externe stylesheet Er zijn drie manieren om de opmaak van uw website te definiëren met CSS: Externe stylesheet (.css-bestand); Interne stylesheet; Inline stijlen. Alle drie manieren zijn prima, als u ze maar op de juiste wijze weet te gebruiken. Een externe stylesheet is ideaal wanneer u de gekozen stijl wilt toepassen op verschillende pagina s. Bij een externe stylesheet legt u de opmaak vast in een apart bestand met de bestandsextensie.css, bijvoorbeeld style.css. Elke pagina van uw website moet in de header een verwijzing bevatten naar de stylesheet, en wel op de volgende manier: <head> <link rel= stylesheet type= text/css href= style.css /> </head>

9 UITGEBREIDE CURSUS De voorbeeldwebsite gebruikt een extern cssbestand. De voettekst van deze voorbeeldwebsite is in een div-blok met de naam footer gedefinieerd. Het voert te ver om uit te leggen hoe u zelf een stylesheet maakt. Webontwikkelaars beginnen ook zelden met een leeg document; ze gebruiken een sjabloon en passen daarin onderdelen aan. Bij het website-template dat u eerder hebt gebruikt om uw eigen website te maken, is ook een CSS-bestand meegeleverd. Bekijk het eens en probeer eens iets te wijzigen bijvoorbeeld de lettergrootte of de kleur van de tekst. Zorg dat u een reservekopie van uw originele CSS-bestand achter de hand houdt, zodat u altijd terug kunt. U kunt een externe stylesheet in elke teksteditor maken en bewerken. Een heel eenvoudige externe stylesheet zou er bijvoorbeeld zo uit kunnen zien: body { background-color: beige; } p { color: blue; } h2 { color: chocolate; } Deze stylesheet geeft aan dat de achtergrondkleur van de pagina beige wordt, met blauwe tekst en chocoladebruine kopteksten. Deze drie regels code slaat u op als eenvoudig tekstbestand onder de naam style. css, waarna u er vanuit uw HTML-bestand naar verwijst. Dat is alles. U kunt uw CSS-bestand later zo ingewikkeld maken als u zelf wilt. Interne stylesheet Een tweede manier om uw opmaak met CSS te definiëren is een interne stylesheet. Deze is handig wanneer één pagina van uw website een afwijkende opmaak moet krijgen. Bij een interne stylesheet definieert u alle opmaak eenmalig, in de header van uw HTML-bestand. Dat doet u als volgt: <head> <style type= text/css > body {color: black; background-color: grey;} p {color: blue; margin-left: 15px} </style> </head> In dit geval hebt u gekozen voor een witte achtergrondkleur. Elke alinea (aangegeven met de p) krijgt de tekstkleur blauw. Natuurlijk kunt u nog veel meer definiëren, bijvoorbeeld het lettertype en de lettergrootte, onderstreping, cursief en dergelijke. Inline stijlen Wilt u een bepaalde opmaak die maar eenmalig, op één plaats in uw website voorkomt? Kies voor een inline stijl! Eigenlijk is hierbij niet zoveel verschil met opmaak die vroeger rechtstreeks in HTML werd aangebracht. Maar zoals u weet: HTML mag niet meer van de webpolitie. <p style= color: white; background-color: blue ; margin-left: 15px > Hier staat uw tekst. </p> Nog een waarschuwing tot slot: het luistert nogal nauw met het gebruik van spaties en aanhalingsteken. Gebruik de CSS-code daarom precies zo, als u ze in voorbeelden ziet staan. Anders kan het later een lastige klus worden om fouten terug te zoeken. Op de website Sitemasters.be vindt u onder Tutorials > CSS uitleg hoe u bepaalde opmaak toepast. Verschillende browsers Een website ziet er in de ene browser anders uit dan in een andere browser. Helaas worden HTML en CSS niet altijd op dezelfde manier geïnterpreteerd door verschillende browsers. Neem bijvoorbeeld de manier waarop Internet Explorer kaders weergeeft die met CSS waren gemaakt. De kaders kregen andere afmetingen