10 WEBPAGINA S PUBLICEREN De belangrijkste punten van hoofdstuk 10 Om een website toegankelijk te maken op het world wide web moeten we hem uploaden naar de computer van onze provider. Voor het versturen van bestanden via internet is het file transfer protocol (ftp) bedacht. Er zijn gratis ftp-programma s beschikbaar voor zowel Windows- als Macintosh-computers. Om een websites succesvol te kunnen publiceren is een aantal gegevens nodig: gebruikersnaam, wachtwoord, uploadadres, pad naar webdirectory en de naam van de default-pagina. Favison.ico is een bestandje dat een plaatje van 16x16 pixels bevat dat bij sommige webbrowser getoond wordt samen met de titel van de website.
Wat leert u in dit hoofdstuk? Gedetailleerd krijgt u te zien hoe u uw bestanden kunt uploaden met een ftp-programma. Er zijn verschillende gratis programma s verkrijgbaar om deze taal uit te voeren. U kent ze waarschijnlijk wel, die kleine symbooltjes als kenmerk voor een site. In dit hoofdstuk leest u hoe u zo n zogeheten favicon maakt.
HTML EN CSS de basis Over zowel html als css valt nog veel meer te vertellen dan wat er in de eerste negen hoofdstukken is gedaan. Maar met de kennis van die hoofdstukken bent u al in staat om een complete website in elkaar te zetten. Om het mogelijk te maken dat anderen die website via het world wide web kunnen bekijken, moeten de bestanden vanaf uw eigen computer worden overgebracht naar de computer van de provider waar uw website wordt geplaatst. In veel boeken over websites maken wordt dit proces heel globaal of helemaal niet behandeld, hoewel in de praktijk blijkt dat het publiceren van de website veel valkuilen kan bevatten. Dit hoofdstuk laat zien hoe u de bestanden bij de provider krijgt. Het overbrengen van bestanden van uw eigen computer naar een andere computer wordt uploaden genoemd. En als u het uploaden onder de knie hebt, dan kunt u meteen een favicon uploaden. 10.1 Benodigde gegevens Hoe krijgt iemand die aan het surfen is op het wereldwijde web een webpagina op zijn computerscherm? De computer van die persoon richt een verzoek aan een webserver voor een bepaalde pagina. Een webserver is een computer (of een programma op een computer) die belast is met het leveren ( serveren ) van webpagina s. De webserver kijkt of hij aan het verzoek kan voldoen en zo ja, dan stuurt hij de html-pagina en de bijbehorende bestanden naar de aanvrager. De webserver moet 24 uur per dag en zeven dagen per week beschikbaar zijn en bovendien om kunnen gaan met verscheidene verzoeken tegelijk. Daarom is uw eigen computer meestal niet geschikt als webserver. Websites worden daarom gewoonlijk ondergebracht bij een hostingprovider die als gastheer fungeert voor webpagina s. Als u een internetabonnement afsluit bij een internetprovider, dan krijgt u er in de meeste gevallen een aantal megabytes aan schijfruimte bij waar u een website kunt plaatsen. Bedrijven zullen meestal een eigen domeinnaam gebruiken en daarbij de benodigde ruimte aanschaffen. WAT IS EEN DOMEINNAAM? Het gedeelte van een internetadres dat meteen achter www staat is de domeinnaam. Als u een gewoon abonnement hebt bij een internetprovider dan zal in de domeinnaam van uw website de naam van uw provider te zien zijn, bijvoorbeeld: http://home.wanadoo.nl/andree. hollander/. Bij een eigen domeinnaam is niet meer zichtbaar bij welke provider de website is ondergebracht, bijvoorbeeld http://www.accredon.nl/. Helaas zijn er nogal wat verschillen tussen de providers en er is dus niet eenduidig te demonstreren hoe u te werk moet gaan. Zoals afbeelding 10.1 laat zien, kunnen er zelfs binnen één provider al verschillende gegevens nodig zijn, afhankelijk van het afgesloten abonnement en het gebruikte besturingssysteem. Voordat u uw website kunt 4
10 Webpagina s publiceren publiceren zodat iedereen hem kan bezoeken, moet u een aantal gegevens verzamelen. In het algemeen zijn de volgende gegevens nodig: gebruikersnaam en wachtwoord; het uploadadres van de webserver; het pad naar de webdirectory op de server; de URL van uw homepage; de naam van de default-pagina. We zullen deze onderdelen nader bekijken. Afbeelding 10.1 Deel van de helpdesk-website van provider Xs4all. 10.1.1 Gebruikersnaam en wachtwoord Bij het afsluiten van een abonnement krijgt u van uw provider een gebruikersnaam (Engels: user name) en een wachtwoord (Engels: password). Vaak mag u beide zelf kiezen, soms onder bepaalde voorwaarden. Hebt u een eigen domeinnaam, dan is die domeinnaam vaak uw gebruikersnaam, bijvoorbeeld accredon.nl. Bij de meeste internetabonnementen krijgt u de beschikking over een of meer e- mailboxen. Hier begint de verwarring. Want de gebruikersnaam en het bijbehorende wachtwoord van de e-mail hoeven niet hetzelfde te zijn als die van het abonnement. Als er slechts één e-mailadres bij het abonnement hoort, dan kunnen ze gelijk zijn. 5
HTML EN CSS de basis Maar het is logisch dat verschillende e-mailadressen, bijvoorbeeld voor alle leden van een gezin, een verschillende gebruikersnaam hebben met daarbij een eigen wachtwoord. Als dit niet het geval zou zijn, dan zou alle e-mail bij elkaar in één e-mailpostbus terechtkomen en dan is er geen sprake van verschillende e-mailboxen. 10.1.2 Uploadadres van de webserver Bij elke activiteit die er via internet plaatsvindt zijn er afspraken gemaakt over de technische details, zodat alle computers weten hoe ze met een stroom bitjes moeten omgaan. Zo n stelsel van afspraken heet een protocol. Voor het ophalen van mail bestaat het post office protocol (pop), voor het versturen van e-mail het simple mail transfer protocol (smtp) en voor het ophalen van webpagina kent u vast wel de letters http. Met die letters begint een webadres. Ze staan voor hypertext transfer protocol. Al die afkortingen eindigen met de p van protocol. Voor het versturen van bestanden heeft men het file transfer protocol (ftp) bedacht. Daarmee kan men zowel bestanden downloaden (naar uw eigen computer toe) als uploaden (van uw eigen computer vandaan). In het Nederlandse taalgebruik hanteert men het werkwoord ftp-en als men via het file transfer protocol aan het werk gaat. Ftp-en is in beperkte mate mogelijk via een browser en sommige besturingsystemen, zoals Windows XP, beschikken over een ingebouwde ftp-mogelijkheid. Maar het gebruiksvriendelijkst is het waarschijnlijk om een specifiek ftp-programma te gebruiken. Er zijn diverse ftp-programma s beschikbaar, sommige gratis. We zullen in dit hoofdstuk een voorbeeld laten zien van een programma voor Windows en een programma voor de Macintosh. FTP VIA DE BROWSER In plaats van met een ftp-programma kunt u ook bestanden via uw browser, Internet Explorer, Firefox, Safari of Netscape Communicator, naar de webserver kopiëren. De ftp-optie van een browser is echter vrij beperkt. Het wissen en hernoemen van bestanden is niet goed mogelijk. Daarom kunt u beter een apart ftp-programma gebruiken. Om via een browser een ftp-verbinding te maken tikt u in het adresvak ftp://gebruikersnaam @uploadadres en drukt u op de Return-toets. Als het adres correct is wordt u om uw wachtwoord gevraagd en verschijnt een directory in beeld. U kunt files uploaden door bestanden op het browservenster te slepen. Om bestanden te kunnen uploaden, moet u het ftp-programma vertellen waar de bestanden naar toe moeten. Dat is het uploadadres, ook wel webserveradres of kortweg server genoemd. Welk adres u moet gebruiken is verschillend per provider. Tabel 10.1 toont een paar voorbeelden. 6
10 Webpagina s publiceren 10.1.3 Pad naar de webdirectory op de server Afhankelijk van het computersysteem dat een provider hanteert, is het soms noodzakelijk om behalve het uploadadres ook de juiste directory aan te geven. Voorbeelden van zulke directories zijn www, WWW, httpdocs en public_html. De kans is behoorlijk groot dat de computers van uw provider draaien onder Unix. Een van de kernmerken van dit besturingssysteem is dat het bij bestandsnamen onderscheid maakt tussen hoofdletters en kleine letters. De map WWW is dan dus niet dezelfde als de map www. Als de provider als pad voorschrijft dat u WWW dient te gebruiken, dan zult u een foutmelding krijgen als u www gebruikt. 10.1.4 URL van uw homepage Het webadres, de URL, van de website is niet nodig om het ftp-proces uit te voeren, maar als u aan anderen uw website bekend wilt maken, dan moet u weten wat het juiste webadres is. Welke URL moeten anderen of uzelf intikken om de gepubliceerde webpagina s op het scherm te krijgen? Bij een eigen domeinnaam is dat hoogstwaarschijnlijk de domeinnaam met daaraan voorafgaand www.. Bij een goede provider levert alleen de domeinnaam (dus zonder www. ervoor) hetzelfde resultaat op, maar dat is niet altijd het geval. Tabel 10.1 Voorbeelden van gegevens bij verschillende providers Provider Uploadadres Pad Default-pagina Planet home.planet.nl index.html Telenet users.telenet.be index.html Tiscali home.tiscali.nl index.html Vuurwerk ftp.vuurwerk.nl www index.html Wanadoo home.wanadoo.nl index.html Xs4all ftp.xs4all.nl WWW index.html Bij een gewoon abonnement is het adres van de website meestal het uploadadres zonder www ervoor, gevolgd door een schuine streep en daarachter de gebruikersnaam. Bijvoorbeeld: http://home.wanadoo.nl/andree.hollander/. Bij sommige providers staat er een tilde (~) voor de gebruikersnaam, bijvoorbeeld: http://www.xs4all.nl/~sorelart/. Ook hier zijn er weer te veel verschillen mogelijk om een eenvoudig recept te geven. 10.1.5 Naam van de default-pagina Een volledig webadres, zoals http://www.luitjens.net/genealogie/d0014/g0000044.html bestaat uit het protocol (http://), de domeinnaam (www.luitjens.net), de mappenstructuur (een map Genealogie met daarin een map d0014 en uiteindelijk de naam van het 7
HTML EN CSS de basis html-document, in dit voorbeeld g0000044.html. Als het laatste onderdeel, de naam van het html-document, wordt weggelaten, vult de webserver een standaardnaam in, ook wel de default-pagina genoemd. Meestal is die standaardnaam index.html, maar ook hier verschillen de regels weer per provider. Soms is de naam home.html of start.html en sommige providers hebben hun computer zodanig afgesteld dat al die namen bruikbaar zijn. Het idee van de default-pagina is dat u een minder lang webadres hoeft op te geven. Dat ziet u ook meestal in advertenties: Bezoek onze website www.woonweb.nl staat heel wat beter dan het volledige adres http://www.woonweb.nl/index.html. De webbrowser voegt zelf het protocol toe aan de voorkant en de naam van de default-pagina aan het eind. Oefening 10.1 Uw gegevens opsporen Achterhaal de gegevens voor uw eigen situatie. Raadpleeg allereerst de formulieren die u van uw provider hebt ontvangen bij het afsluiten van uw abonnement. Als u er niet achter kunt komen welke gegevens u moet gebruiken, kijk dan op de helppagina s op de internetsite van uw provider. Die zijn helaas soms ingericht als een doolhof, zijn sterk verouderd of lijken opgesteld door dyslectische medewerkers van de helpdesk, dus enig doorzettingsvermogen is daarbij gewenst. Komt u er niet uit, dan hebt u een goede gelegenheid om de kwaliteit van de helpdesk van uw provider te testen. Stuur eerst een e-mail voordat u gaat bellen, want dit soort vragen zijn niet urgent. WAT TE DOEN VOOR HET UPLOADEN? Voordat u uw website gaat uploaden is het verstandig alle pagina s nog eens kritisch te bekijken en een laatste controle uit te voeren. Ziet alles er goed uit? Zijn alle taal- en spelfouten eruit? Werken alle links? 10.2 Uploaden met Ftp Commander Er zijn verschillende ftp-programma s verkrijgbaar, commercieel, shareware en sommige gratis. Een hele lijst met gratis programma s is te vinden op www.thefreecountry. com/webmaster/freeftpclients.shtml. Als voorbeeld van een ftp-programma voor Windows gebruiken we Ftp Commander. FTP COMMANDER PRO De eenvoudige versie Ftp Commander is gratis, maar er is ook een versie die bedoeld is voor professionals, Ftp Commander Pro. Die versie heeft meer mogelijkheden, maar kost 30 dollar. 8
10 Webpagina s publiceren Afbeelding 10.2 Twee panelen van het programma Ftp Commander. Dit zijn de stappen om het programma te gebruiken: 1 Download het programma vanaf de webpagina www.internet-soft.com/ftpcomm.htm. 2 Start het installatieprogramma en installeer het programma op een plaats naar keuze. 3 Start het geïnstalleerde programma. Op het scherm verschijnt een venster met twee panelen (zie afbeelding 10.2). Rechts het paneel Remote FTP Servers, dat een lijst met ftp-servers bevat. Links een paneel Local Computer, dat de bestanden en mappen van uw eigen computer bevat. 4 Klik op de knop New Server boven het rechterpaneel. Er verschijnt een venster met een aantal invulvakjes. Vul daarin de vakjes FTP Server, User ID en Password in. Geef bij Name de server een herkenbare naam (zie afbeelding 10.3). Die naam mag u zelf kiezen. Het is de naam waaronder de server in de lijst met servers komt te staan. 5 Klik op Save. De nieuw gemaakte servernaam komt in de lijst te staan op zijn alfabetische plaats. 6 Selecteer de naam van de server door er eenmaal op te klikken. Klik daarna op de knop Connect boven de panelen. 9
HTML EN CSS de basis 7 Het programma legt een ftp-verbinding met de server en toont de bestanden en mappen die op de server staan. 8 In het linkerpaneel navigeert u naar de map op uw harde schijf waar de bestanden of mappen staan die u wilt overbrengen. 9 Selecteer een bestand of map en klik op de juiste pijl tussen de panelen om het transport te starten (zie afbeelding 10.4). Herhaal dat totdat alle mappen en bestanden zijn overgebracht. 10 Klik op de knop Disconnect boven de panelen om de verbinding te verbreken. Afbeelding 10.3 Gegevens invullen van een nieuwe ftp-server. PROBLEMEN MET DE VERBINDING Lukt het niet om verbinding te krijgen met de ftp-server, controleer dan eerst goed of alle gegevens correct zijn ingevuld. Vul het wachtwoord met extra aandacht opnieuw in, zodat u zeker weet dat daar geen fout mee is gemaakt. Lukt het nog steeds niet, dan kunt u andere opties van het programma proberen. Vink bijvoorbeeld de optie Use / as initial directory on ftp server aan en probeer opnieuw verbinding te leggen. Als u weet met welk besturingssysteem uw provider werkt, kunt u de optie FTP Server Response Type instellen (zie afbeelding 10.5). Als u het niet weet kunt u de verschillende opties uitproberen. 10
10 Webpagina s publiceren Afbeelding 10.4 Links de website op de harde schijf van de eigen computer, rechts de website op de server van de provider. Afbeelding 10.5 Venstermenu FTP Server Response Type. OOK IN HET NEDERLANDS Het programma Ftp Commander kan worden omgezet naar het Nederlands. Kies uit het menu About de opdracht Language en uit het zijmenu daarvan dutch. 10.3 Uploaden met CyberDuck Ook voor de Macintosh zijn verschillende gratis ftp-programma s beschikbaar. Wij gebruiken als voorbeeld het gratis programma CyberDuck. 11
HTML EN CSS de basis Dit zijn de stappen om het programma te gebruiken: 1 Ga naar de Zwitserse webpagina www.cyberduck.ch. Scroll helemaal naar onderaan de pagina en download het dmg-bestand (klik op Ga door als het besturingsysteem vraagt of u zeker weet dat u een programma wilt downloaden, zie afbeelding 10.6). Het dmg-bestand wordt automatisch gemount alsof het een disk was. Afbeelding 10.6 Waarschuwing bij het downloaden van een programma. 2 Maak een nieuwe map (bijvoorbeeld met de naam CyberDuck) op de plaats waar u het programma wilt opslaan (een goede keuze is de map Hulpprogramma s). 3 Sleep de inhoud van het gemounte disk-bestand (7 voorwerpen bij versie 2.4.6) naar de nieuwe map, zie afbeelding 10.7. Afbeelding 10.7 Sleep de voorwerpen van de gemounte disk naar een map op de harde schijf 4 Verwijder de gemounte disk door in het Finder-venster te klikken op het verwijder-symbool achter de naam van het gemounte disk-bestand. Het dmg-bestand hebt u niet meer nodig. U kunt het in de prullenmand gooien. 5 Start het programma Cyberduck.app. Op een computer met Nederlandse als eerste taal verschijnt het programma in het Nederlands. Op het scherm verschijnt een leeg venster dat na het leggen van een verbinding de bestanden op de ftp-server gaat bevatten (zie afbeelding 10.8). 12
10 Webpagina s publiceren Afbeelding 10.8 Hoofdvenster van het programma Cyberduck voordat er een verbinding is gemaakt. 6 Klik op de knop Nieuwe verbinding in de knoppenbalk. Er verschijnt een venster met talrijke invulvakjes. Vul daarin de vakjes Server, Gebruikersnaam en Wachtwoord in. Als u weet dat u een padnaam dient te gebruiken, vul dan de juiste naam in bij Pad (zie afbeelding 10.9). Bij abonnementen zonder eigen domeinnaam blijft het vak Pad meestal leeg. 7 Klik op Verbind. Het programma legt een ftp-verbinding met de server en toont de bestanden en mappen die op de server staan (zie afbeelding 10.10). 8 De makkelijkste manier om bestanden te uploaden is door middel van slepen. Sleep bestanden of mappen vanuit een Finder-venster naar het geopende venster van Cyberduck. 9 Klik op de knop Verbinding verbreken boven de panelen als u gereed bent. 10 Om makkelijk opnieuw verbinding te kunnen leggen, kiest u uit het menu Bladwijzer de optie Nieuwe bladwijzer. De gegevens die u zojuist hebt ingevuld blijven dan bewaard als bladwijzer in het zijpaneel (klik op de knop Bladwijzers om het paneel te tonen of te verbergen). Afbeelding 10.9 Gegevens invullen van een nieuwe ftpserver. 13
HTML EN CSS de basis Afbeelding 10.10 De website op de server van de provider. 10.4 Problemen na uploaden Na het uploaden van uw website moet u hem met uw browser kunnen bekijken via het world wide web. Tik in het adresvak van uw webbrowser het webadres in van uw site en hopelijk krijgt u de beginpagina van uw website in beeld. Doorloop daarna alle pagina s en controleer ze op juiste weergave. Let er met name op of alle afbeeldingen verschijnen en alle links werken. KIJK OP EEN ANDERE COMPUTER Professionals doen veel moeite om hun websites te testen op verschillende apparatuur, verschillende besturingssystemen en verschillende webbrowsers, maar het is onmogelijk om alle variaties te bekijken. Als u in de gelegenheid bent om uw website te bekijken op de computer van iemand anders, grijp die gelegenheid dan met beide handen aan. Kijk hoe de pagina s op het beeldscherm van een ander verschijnen en let op dingen die afwijken, zoals de grootte van het venster of de kleuren. 14
10 Webpagina s publiceren Er zijn twee fouten die het meest opduiken bij mensen die hun website hebben geupload: In plaats van een afbeelding verschijnt er een X of een vraagteken. Een opgevraagde pagina bestaat volgens de server niet. 10.4.1 Afbeeldingen zijn niet zichtbaar Verschijnt er in de browser geen enkele afbeelding, ook niet bij andere, bekende websites? Dan is misschien de weergave van afbeeldingen uitgezet bij de eigenschappen of voorkeuren van de browser. SCR IN PLAATS VAN SRC Een veelgemaakte fout bij het intikken van html is dat men het source-attribuut noteert als scr in plaats van als src. De browser toont de afbeelding dan niet, omdat hij geen geldig source-attribuut aantreft. Deze verschrijving kan er echter bij u niet de oorzaak van zijn dat een afbeelding na het uploaden niet verschijnt. Want u hebt de pagina uiteraard eerst vanaf uw harde schijf getest en bovendien ter controle aangeboden aan de validator. De fout zou daardoor al in een eerder stadium zijn ontdekt. Zijn er op webpagina s van andere websites wel afbeeldingen te zien, maar niet op uw eigen pagina s, dan heeft dat waarschijnlijk een van de volgende oorzaken: U hebt wel de html-pagina s geüpload, maar niet de bestanden van de afbeeldingen. U hebt de bestanden naar een verkeerde map geüpload; bedenk dat de mappenstructuur op de harde schijf van de provider exact overeen moet komen met de mappenstructuur op uw eigen harde schijf; dat is het principe waarop de relatieve paden zijn gebaseerd. De naam van het bestand en de naam in de html-pagina wijken af; gaat het op uw eigen computer goed, maar niet bij de provider, dan gebruikt de provider waarschijnlijk een computersysteem dat onderscheid maakt tussen hoofdletters en kleine letters (vandaar dat in hoofdstuk 1 werd geadviseerd voor bestandsnamen alleen kleine letters te gebruiken). Hoe lost u de problemen op? Controleer met het ftp-programma of de bestanden op de juiste plaats staan. Pas de html-pagina s aan zodat de naam van de bestanden exact overeenkomt met het src-attribuut (eventueel kopiëren en plakken, als u gemakkelijk tikfouten maakt). 15
HTML EN CSS de basis 10.4.2 Pagina bestaat niet Wanneer de browser een webpagina opvraagt, dan zoekt hij uit aan welke server dat verzoek gericht moet worden. De betrokken webserver antwoordt met de gevraagde pagina of met een foutmelding. De meest voorkomende foutmelding is 404 File not found. De gevraagde webpagina bestaat niet of niet meer. De server toont de foutmelding op een speciale webpagina die voor elke server anders kan zijn. Een kenmerkend voorbeeld staat in afbeelding 10.11. Afbeelding 10.11 Een voorbeeld van een 404-melding. Verschijnt de 404-error na het intikken van een webadres in de adresbalk van de browser, controleer dan als eerste of alles juist is getikt. Lettertje vergeten, lettertje te veel, komma in plaats van punt, slash te veel of te weinig, nul in plaats van de letter o, dat soort fouten. Weet u zeker dat er geen tikfout zit in het webadres of krijgt u de 404-error na het klikken op een hyperlink binnen uw website, dan heeft dat mogelijk een van deze oorzaken: U bent vergeten bepaalde pagina s of een complete directory te uploaden of het uploaden is mislukt. U hebt pagina s geüpload naar een verkeerde map (net als de afbeelding zijn hyperlinks meestal gebaseerd op relatieve paden; de mappenstructuur bij de provider moet identiek zijn aan die op uw eigen computer). De naam in het href-attribuut wijkt af van de werkelijke naam, met name in het gebruik van hoofdletters en kleine letters (vandaar het advies in hoofdstuk 1 om bestandnamen met kleine letters te schrijven, zonder spaties). EXTERNE LINKS REGELMATIG CONTROLEREN Hebt u absolute links gebruikt naar websites van anderen, dan moet u die regelmatig controleren. U hebt niet in de hand wat er met die andere website gebeurt. Hij kan door de beheerder anders worden opgezet, waardoor pagina s een andere naam krijgen of zelfs helemaal worden opgeheven. 16
10 Webpagina s publiceren Oefening 10.3 Uw eigen pagina s publiceren Probeer om een of meer van uw eigen pagina s te plaatsen op de computer van uw provider. De eerste keer is het lastigst. Als u het vaker doet, gaat het u vanzelf gemakkelijker af. Doe het ook als u vindt dat uw website nog niet gereed is voor publicatie. U kunt uw pagina s op elk moment weer verwijderen met hetzelfde ftp-programma. 10.5 Favicon Als u websites toevoegt aan de favorieten in Internet Explorer of de bladwijzers in Safari, wordt er vaak een symbooltje bij geplaatst in het menu. Sommige browsers tonen het symbooltje aan het begin van het adres in de adresbalk. In moderne browsers die met tabbladen werken (ook de nieuwe Internet Explorer versie 7) verschijnen die symbooltjes in de tab (zie afbeelding 10.12). Zo n symbooltje heet een favicon (de afkorting van favourite icon). Als u uw website met succes gepubliceerd hebt, dan kunt u dat op professionele wijze afronden door te zorgen voor een toepasselijk favicon. Afbeelding 10.12 Kleine symbooltjes als kenmerk voor een site (favicon) hier te zien in de tabs van webbrowser Netscape. 10.5.1 Favicon maken Een favicon is een piepkleine afbeelding van 16 bij 16 pixels. De bijbehorende bestandextensie is.ico. De naam is meestal favicon.ico. U kunt ze maken met een grafisch programma. Daar zijn diverse sharewareprogrammaatjes voor in omloop. Voor het programma Photoshop is een gratis plug-in te downloaden om een afbeelding in het ico-format te kunnen opslaan. Het valt bij zo n kleine afbeelding niet mee om iets herkenbaars te produceren, maar als u kijkt naar bestaande voorbeelden dan zult u zien dat er binnen de beperking toch veel variatie mogelijk is. Hebt u geen zin om zelf een favicon te construeren, dan kunt u er ook online een maken. Zie de website www.chami.com/html-kit/services/favicon/ (zie afbeelding 10.13). Daar kunt een bestaande afbeelding om laten zetten naar een favicon, die u dan vervolgens kunt downloaden. Het resultaat is uiteraard afhankelijk van de bronafbeelding. Die kan het beste zo simpel mogelijk zijn en niet te groot. 10.5.2 Favicon zichtbaar maken Als u een eigen domeinnaam hebt, dan is het in gebruik nemen van een favicon zeer eenvoudig. Het is voldoende om het ico-bestandje te uploaden naar de server en het 17
HTML EN CSS de basis Afbeelding 10.13 Website waar u een afbeelding kunt laten omvormen tot favicon. te plaatsen op het basisniveau van de site, waar ook de beginpagina index.html zich bevindt. Verder hoeft u niet te doen. Plaats het bestand los, dus niet in een map bij andere afbeeldingen, anders werkt het niet. Hebt u geen eigen domeinnaam of wilt u het bestand op een andere plaats opslaan, dan kan dat ook, maar dan dient u in elke webpagina een verwijzing op te nemen naar het favicon-bestand. In het head-gedeelte van elke html-pagina neemt u een link op. Dat kan met een relatief pad, bijvoorbeeld: C <link rel= shortcut icon href=../images/favicon.ico /> U kunt ook een absoluut pad gebruiken, bijvoorbeeld: C <link rel= shortcut icon href= http://home-3.tiscali.nl/~rschippe/favicon.ico /> Oefening 10.4 Eigen favicon installeren Ontwerp zelf een favicon. Hebt u geen inspiratie om een kunstwerkje te creëren, kies dan gewoon een vierkant van 16 bij 16 pixels in de kleur die de overheersende kleur is op uw website. Maak het favicon zichtbaar op de manier zoals in deze paragraaf is beschreven. 18