Terug naar beginpagina Homepage-Maken.nl
Versio 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

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


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

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

[Naar boven]  [Home]