Mijn-eigen-website.nl

Een link maken: de html-codes verklaard

Met voorbeeldcodes voor tekstlinks, afbeeldingslinks en links naar speciale bestanden.

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.

link maken

Links maken: de basis

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.

Afbeelding als link

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>

Linken naar andere bestanden

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 pfd-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.

Om dat probleem te verhelpen, kun je gebruikmaken van de Google Documenten Lezer. Je uploadt het document dat je beschikbaar wilt stellen naar de server van je webhost, zet de url van dat document ervan in het daarvoor bestemde vak, geeft eventueel nog een tekst voor de link op en klikt op de knop met de tekst 'Link genereren'.

Heb je dat gedaan, dan krijg je onder andere een link die je in je html- of php-pagina kunt plakken. Klikken je bezoekers daarop, dan kunnen ze je document bekijken met behulp van de Google Documenten Lezer, zonder dat ze het benodigde programma daarvoor op hun eigen computer hebben staan.

Hier zie je een voorbeeld van een PowerPoint-presentatie die je bekijkt met behulp van de Google Documenten Lezer. (In die presentatie wordt uitgelegd hoe je je document in je eigen webpagina 'opneemt' in plaats van een link ernaartoe plaatst.)

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid