Terug naar beginpagina Homepage-Maken.nl
YourHosting Webhosting   

Les 4

Links Maken

Hyperlinks (=links) maken het World Wide Web tot dat wat het is. Zonder links zouden alle files op het web geïsoleerd zijn en zou je alleen een pagina bezoeken waarvan je het adres wist. Door links zijn een enorme hoeveelheid files op het web aan elkaar gekoppeld en is het mogelijk op je pagina te verwijzen naar (delen van) andere pagina's op je site, maar ook naar pagina's en bestanden van een totaal andere site.

Nu gaan we dus kijken hoe je links maakt met HTML. De link tags in HTML zijn: <A> als begintag, de eindtag is dan </A>.

Achtereenvolgens komt aan bod:

Linken naar bestanden op je eigen site

Er zijn twee soorten links die onder deze categorie vallen:

1. Linken naar bestanden op een andere pagina van je site.
2. Linken naar een bepaald gedeelte op een pagina.

Het is bij deze bestanden niet nodig om bij de links "http:// " en "www." toe te voegen, aangezien de bezoeker zich al op je site bevindt en hij alleen doorgestuurd hoeft te worden naar een ander bestand op dezelfde server.

ad 1.

Een link naar een bestand op een andere pagina van je site maak je als volgt.

Je begint met de A tag en vervolgens voeg je hier het attribuut href aan toe. Href staat voor Hyper Reference en definieert het adres waar men naartoe gebracht wordt nadat op de link is geklikt.

Daarna type je de naam van het bestand/de pagina waar je naar toe wilt linken. Bijvoorbeeld index.html. Nu verwijs je dus naar het bestand index.html. Dit bestand moet dan wel in dezelfde directory staan als het bestand waarin je de link plaatst. Heb je het bestand in een directory die daar "onder" staat (oftewel in een subdirectory) dan krijg je zo'n soort link:

diversen/index.html.

Nu stuur je de bezoeker naar de onderliggende subdirectory: "diversen" en het bestand "index.html" dat daar in staat.

Staat het bestand in een directory "boven" het bestand waarin je de link plaatst dan schrijf je deze link:

../index.html.

Hier wordt verwezen naar het bestand "index.html" in de bovenliggende directory. Met de twee puntjes gaat de browser naar de bovenliggende directory.

Je kunt ook verwijzen naar een bestand in een directory die boven de huidige directory ligt. Dat gaat met:

../etcetera/index.html.

Nu wordt met de twee puntjes eerst weer een directory omhoog gegaan. Vervolgens wordt in de directory "etcetera" die zich daar bevindt, het bestand "index.html" geöpend.

Nog even alles op een rij:

<A href="index.html">Met deze link verwijs je naar het bestand "index.html" in dezelfde directory.</A>

<A href="diversen/index.html">Nu verwijs je naar het bestand "index.html" dat zich in de subdirectory "diversen" bevindt.</A>

<A href="../etcetera/index.html">Ook nu verwijs je weer naar het bestand "index.html", maar nu bevindt het zich in een bovenliggende directory met de naam "etcetera".</A>

Nog één belangrijk ding: de tekst die je tussen de <A..> en </A> tags plaatst, is de link-tekst. Deze wordt standaard onderstreept weergegeven en als erop geklikt wordt, wordt de link geactiveerd.

ad 2.

Soms kan het handig zijn om een bezoeker gelijk naar een bepaald gedeelte op een pagina te verwijzen. Denk aan een lange pagina met veel tekst. Het is dan ideaal om een link naar een specifieke paragraaf te kunnen opnemen.

Hiervoor dient het attribuut name.

Je zet de tag <A name="de naam">De tekst waar je naar toe linkt</A> bij het gedeelte waar je naar toe wilt linken.
Dan gebruik je de tag <A href="#de naam">Hier komt de link-tekst</A> daar waar je de link wilt plaatsen.

Even een voorbeeld:

Als je hier klikt, ga je naar de tekst "Linken naar bestanden op je eigen site" hierboven op deze pagina.

Bij de tekst waar ik naar wil linken heb ik dit geplaatst:

<A name="tekst">Links naar bestanden op je eigen site:</A>

En de link zelf heb ik als volgt gemaakt:

<A href="#tekst">hier</A>

Linken naar bestanden elders op het web

Linken naar een bestand op een totaal andere website is vrij eenvoudig.
Je gebruikt natuurlijk weer de tags <A> en </A>.
Nu moet je wel "http://" en "www." toevoegen aan het link-adres, want nu verwijs je naar een bestand op een andere server.

Een voorbeeld:

<A href="http://www.hetadres.nl/index.html">De link-tekst hier!</A>

Met deze link verwijs je dus naar het bestand "index.html" wat een onderdeel is van "http://www.hetadres.nl/".

Het attribuut "target"

Nu nog iets over het attribuut target.
Dit attribuut wordt vooral gebruikt in pagina's met frames (waarover later meer), maar kan ook gebruikt worden in normale pagina's.

Het attribuut target kan vier verschillende waarden hebben:

_blank
Zorgt ervoor dat de link in een nieuw browserscherm geladen wordt.
_self
Link wordt in hetzelfde browserscherm geladen.
_parent
Laadt de link in de bron van het document.
_top
Laadt de link in het gehele scherm. Alleen van belang bij frames.

Zo zien de tags er dus uit als je het "target" attribuut gebruikt met één van de vier bijbehorende waarden:

<A href="http://www.voorbeeld.nl/" target="_blank">Zo wordt de link in een nieuw browserscherm geladen</A>

<A href="http://www.voorbeeld.nl/" target="_self">Zo wordt de link in hetzelfde browserscherm geladen</A>

<A href="http://www.voorbeeld.nl/" target="_parent">Zo wordt de link in de bron van het document geladen</A>

<A href="http://www.voorbeeld.nl/" target="_top">Zo wordt de link in het hele scherm geladen (alleen voor frames-pagina's)</A>

Afbeeldingen als links gebruiken

Je kunt ook afbeeldingen als link gebruiken. Deze heten dan clickable images.
Het maken van de link-tag verschilt niet veel van wat je hierboven geleerd hebt. Alleen gebruik je nu in plaats van de onderstreepte link-tekst, het adres van de afbeelding.

Afbeeldingen komen pas in een volgende les aan de orde. Meer over het gebruik van afbeeldingen kun je dus hier lezen.
Toch is het handig om nu alvast aan te geven hoe je een afbeelding als link kunt gebruiken.

Voor nu volsta ik dus met het weergeven van de tag:

<A href="http://www.voorbeeld.nl/"><IMG src="afbeelding.gif"></A>

Op de plaats waar nu "afbeelding.gif" staat, vul je het adres in van de afbeelding in die je gebruikt voor je link. Meestal is dit een .gif of .jpg (.jpeg) bestand.

E-mail Link

Deze links worden ook wel mailto links genoemd. Deze link verschijnt als elke andere link, maar wanneer er op geklikt wordt, kan de bezoeker een e-mail aan je sturen.

Een mailto link maak je als volgt:

<A href="mailto:jouw@emailnaam.nl">Stuur me een e-mail!</A>

De tekst: "Stuur me een e-mail!" wordt weergegeven als de link-tekst.

De mailto link heeft nog wat meer mogelijkheden. Zo kun je een onderwerp toevoegen en een tekst voor de e-mail. Dit bespreken we uitgebreid in het artikel Mailto link in HTML.

Einde Les Vier

De belangrijkste dingen over links op je pagina zijn nu wel behandeld.
Nu kun je links naar pagina's op je eigen site maken, links naar andere websites, en e-mail links.
Dus nu kan jouw site ook echt een draad worden in het World Wide Web.

Maar er is nog veel meer te leren in de volgende lessen. :)

Homepage-Maken Tip

Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Argeweb. Deze host heeft een goede reputatie en de reacties van klanten zijn over het algemeen heel positief. Verder bieden ze een 'niet goed geld terug'-garantie van 30 dagen.

Argeweb Hosting biedt uitgebreide support door middel van uitgebreide FAQ's en documentatie, een online helpdesk en is ook telefonisch bereikbaar voor vragen.

Het Standaard hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:

Al met al is dit een prima pakket voor nog geen €8 per maand. Er zijn natuurlijk ook nog andere pakketten beschikbaar, mocht je een uitgebreider hostingpakket zoeken.

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2017 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]