Als je je eerste webpagina’s hebt gemaakt, wil je ze natuurlijk ook aan elkaar linken. Maar hoe maak je een link?
Een link is niet meer dan een koppeling van de ene plaats naar de andere. Die linkbestemming kan een andere webpagina zijn, maar ook een ander bestand, zoals een pdf- of excel-bestand, of een plaatje, video of audio-bestand. En de plaats waarvandaan je linkt kan ook meerdere dingen zijn: een stukje tekst bijvoorbeeld, een button, een plaatje, of een compleet onderdeel van je webpagina (zoals de balk bovenaan, met daarin je logo en bedrijfsnaam). Op deze pagina leg ik uit hoe je een tekstlink maakt, hoe je een link maakt van een plaatje, en hoe je naar een speciaal bestand linkt.
Datgene waarvan je een link wilt maken, zet je tussen twee link-tags, de openingstag (<a>) en de sluittag (</a>). Dat wat er tussen deze twee tags staat, wordt daardoor een link. Zet je er een stukje tekst tussen, dan wordt het een tekstlink, zet je er de html-code voor een foto tussen, dan wordt die foto een link waar je op kunt klikken.
In de openingstag van de link zet je neer wat de linkbestemming is, dus waar je bezoeker naartoe geleid moet worden als hij op de link klikt. Dat doe je met de code: href="". Tussen de dubbele aanhalingstekens zet je de linkbestemming neer. Dus wil je van je homepage linken naar een pagina die contact.php heet, dan komt de openingstag van de link er zo uit te zien: <a href="contact.php">
In de openingstag van de link kun je ook nog neerzetten of de linkbestemming in een nieuw browservenster geopend moet worden, of dat het huidige venster gebruikt mag worden. In dat laatste geval ‘verdwijnt’ dus de huidige pagina, en wordt in plaats daarvan de pagina van de linkbestemming vertoond als je op de link klikt. Vind je dat prima, dan hoef je verder niets te doen, maar wil je dat er een nieuw browservenster geopend moet worden, dan moet je in de openingstag ook nog de volgende code neerzetten: target="_blank"
Als je dit alles combineert, dan kan de code voor een tekstlink er dus zo uitzien:
<a href="contact.php" target="_blank">contact</a>
Met deze code heb je een tekstlink gemaakt van het woord ‘contact’, als iemand op deze tekstlink klikt, wordt hij doorgestuurd naar een pagina die contact.php heet, en om die pagina te kunnen laten zien wordt een nieuw browservenster geopend.
Vind je het nogal een gedoe om steeds met html-codes te werken voor links en andere zaken? Dan raad ik aan om gebruik te maken van een online webbuilder. Hiermee wordt het beheer van je website een fluitje van een cent.
In plaats van een stukje tekst, kun je ook een plaatje gebruiken als link. Dan heb je de volgende code nodig (zorg er dan wel voor dat je de afbeelding ook uploadt naar je server; anders is er straks alleen een rood kruisje te zien):
<a href="overmij.php"><img src="mijnfoto.jpg"></a>
In dit voorbeeld is er een link gemaakt van een foto (<img src="mijnfoto.jpg">). Als iemand op die foto klikt, wordt hij doorgestuurd naar een pagina die overmij.php heet. Omdat er in de openingstag van de link alleen de linkbestemming staat, wordt die pagina niet in een nieuw browservenster geopend, maar komt de pagina in plaats van de huidige pagina.
Als je van een stukje tekst een link maakt, wordt deze vanzelf blauw, en komt er een streep onder te staan. Zoiets gebeurt ook met afbeeldingen: er komt een blauwe rand omheen te staan. Dat is niet erg mooi, dus als je die blauwe rand wilt weghalen, dan moet je aan de html-code voor de afbeelding nog een stijl toevoegen, namelijk: border: none;
De voorbeeldcode wordt dan:
<a href="overmij.php"><img src="mijnfoto.jpg" style="border: none;"></a>
Behalve naar andere webpagina’s kun je naar veel meer dingen linken: bijvoorbeeld naar een Word- of pdf-bestand, een Excel-spreadsheet of PowerPoint-presentatie. De link naar mijn e-book (Over HTML en Hyperlinks) ziet er bijvoorbeeld zo uit:
<a href="ebooks/html-en-hyperlinks.pdf">Over HTML en hyperlinks</a>
Uit de linkbestemming zie je dat dit pdf-bestand in een aparte map (ebooks) staat. Zouden ze op zo’n link klikken met hun linkermuisknop, dan wordt het pdf-bestand in hun browser geopend (want de meeste browsers kunnen pdf-bestanden gewoon weergeven). Klikken ze er met hun rechtermuisknop op, dan moeten ze kiezen voor ‘Doel opslaan als’ (Internet Explorer), ‘Koppeling opslaan als’ (Firefox) of ‘Download gekoppeld bestand als’ (Safari) om het bestand te downloaden naar hun eigen computer.
Wees trouwens wel voorzichtig met het linken naar bestanden. Een pdf-bestand zullen de meeste van je bezoekers wel kunnen openen en lezen, maar link je naar een PowerPoint-presentatie (.ppt), dan is dat nog maar de vraag. Hebben ze het programma waarmee zo’n bestand moet worden geopend niet op hun computer staan, dan kunnen ze er verder niet veel mee.
« Ga terug
