WEBPAGINA`S PUBLICEREN

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.
DB_HTMLenCSS_10.indd 2
10/4/05 14:59:17
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.
DB_HTMLenCSS_10.indd 3
10/4/05 14:59:19
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
DB_HTMLenCSS_10.indd 4
10/4/05 14:59:19
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 emailboxen. 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
DB_HTMLenCSS_10.indd 5
10/4/05 14:59:19
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
DB_HTMLenCSS_10.indd 6
10/4/05 14:59:20
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
Vuurwerk
ftp.vuurwerk.nl
Wanadoo
home.wanadoo.nl
Xs4all
ftp.xs4all.nl
index.html
www
index.html
index.html
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
DB_HTMLenCSS_10.indd 7
10/4/05 14:59:20
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
DB_HTMLenCSS_10.indd 8
10/4/05 14:59:20
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
DB_HTMLenCSS_10.indd 9
10/4/05 14:59:21
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
DB_HTMLenCSS_10.indd 10
10/4/05 14:59:21
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
DB_HTMLenCSS_10.indd 11
10/4/05 14:59:22
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
DB_HTMLenCSS_10.indd 12
10/4/05 14:59:22
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
DB_HTMLenCSS_10.indd 13
10/4/05 14:59:23
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
DB_HTMLenCSS_10.indd 14
10/4/05 14:59:23
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
DB_HTMLenCSS_10.indd 15
10/4/05 14:59:24
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
DB_HTMLenCSS_10.indd 16
10/4/05 14:59:24
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
DB_HTMLenCSS_10.indd 17
10/4/05 14:59:24
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
DB_HTMLenCSS_10.indd 18
10/4/05 14:59:25