Artikelen » (x)HTML, XML en CSS » Artikel
Hyperlinks
13-10-2011 12:50
Hyperlinks
De kracht van het WWW, World Wide Web ligt in de koppelingen, de zogeheten hyperlinks.
Met een muisklik springt de bezoeker naar een andere webpagina om vervolgens weer naar een andere pagina te kunnen surfen. Op deze manier zijn miljoenen websites met elkaar verbonden.
In dit artikel ga ik me bezig houden met het aanbrengen van hyperlinks in een html pagina. Tekst kan een hyperlink worden, maar een plaatje kan ook een link vormen. Een bijzondere vorm van een hyperlink is een e-mailadres dat uitnodigt om een email te sturen.
Tekstkoppelingen
Bij het maken van een hyperlink moeten 2 dingen worden vastgelegd.
- Welke tekst of afbeelding worden voor de gebruiker?
- Welk document is de bestemming van de klik?
Deze 2 gegevens leggen we vast via een a-element. <a> en </a>. De a is de afkorting van het engelse woord: Anchor. In het Nederlands betekent dat Anker.
De bestemming van de link word Referentie genoemd. De hyperlinkreferentie leggen we vast met het attribuut met href binnen de begintag van het a-element.
Laat ik maar is een voorbeeld gaan geven.
We beginnen eerst maar is met een stramien
Een stramien is een stukje webpagina waarmee je altijd begint, een vaste opbouw en wat volledig foutloos is. Geheel volgens de w3c webstandaarden dus!
Oke nu gaan we weer verder met het maken van een hyperlink:
Ik wil nu een hyperlink aanmaken met de koppeling naar CriminalsPoint, dat doen we door het volgende stukje code te gebruiken:
Een klein stukje uitleg hoe de hyperlink in zijn werk gaat.
Het element “<a href= ” geeft de eindbestemming aan, naar de website van CriminalsPoint willen we uiteindelijk een hyperlink plaatsen, nietwaar?
Vervolgens zien we staan: “target=”_blank” “, we willen natuurlijk niet dat de bezoeker onze website verlaat dus zorgen we hiermee voor een nieuwe webpagina. Ofwel tabblad in je browser.
Dan komen we aan op het laatste stukje: “>” en “</a>”.
Heel simpel: De tekst die hiertussen staat is de naam waarop je klikt, als je erop klikt gaan we naar de website van CriminalsPoint.
Om het even compleet te maken:
Plaatje als koppeling:
Een hyperlink hoeft niet perse uit tekst te bestaan. Ook een afbeelding kan fungeren als een hyperlink. In plaats van linktekst komt er dan een linkafbeelding te staan in het a-element. Binnen html heeft een afbeelding de vorm van een img-element. Om van een afbeelding een link te maken moeten we een img-element opnemen binnen een a-element.
Allemaal een beetje lastig misschien?
Hier dan een stukje code:
Om van deze afbeelding een link te maken, plaatsen we het img element tussen de begintag en de eindtag van een a-element:
Let op de dubbele punt na mailto.
Bij alle internet toepassingen geldt dat een protocolnaam gevolgd word door een dubbele punt. Denk maar een http. Ook dan volgt meteen een dubbele punt.
Een link met het mailto-protocol zorgt ervoor dat het e-mailprogramma dat als standaard is aangewezen op de computer wordt gestart met het genoemde e-mailadres ingevuld in het geadresseerdenveld.
Bij een mailto-koppeling is het ook mogelijk alvast het onderwerp van het e-mailbericht in te vullen. Schrijf dan na het e-mailadres een vraagteken, de tekst subject= en daarna de onderwerptekst.
Voorbeeld:
Hyperlink naar andere soorten documenten
De meeste hyperlinks verwijzen naar een html-document, maar dat is absoluut geen verplichting!
Je kan ook rechtstreeks linken naar andere bestandstypen, zoals een pdf, .rar of naar een afbeelding.
Een voorbeeld van een hyperlink naar een afbeelding:
Een klik op deze hyperlink brengt ons bij de header van CP, meer niet. De bestemming is namelijk geen webpagina maar een een afbeelding. Als de gebruiker terug wil keren naar de pagina die die ervoor had kan die gewoon de terug knop gebruiken.
Het laten tonen van gif, jpeg of png afbeeldingen zal in elke browser geen problemen moeten opleveren omdat de afbeeldingen ook in webpagina’s gebruikt zullen worden. Het zijn bekende bestandstypen. Dat ligt weer anders zodra we andere soorten documenten gaan hyperlinken.
Het aanbieden van niet html-documenten op de website kan gebeuren op de gebruikelijke manier met een a-element voorzien van het href-attribuut, maar wat de browser er volgens mee doet, is iets wat je als webmaster niet zelf in hand hebt.
Om een link te maken naar een mp3-geluidsbestand met de naam: “Danza-Kuduro.mp3”kan je in je html tekst de volgende code opnemen:
Eigenlijk niets bijzonders, ipv een html document hebben we nu een .mp3 bestand gebruikt in een Hyperlink.
De gebruiker ziet “Don Omar Ft Lucenzo - Danza Kuduro Mp3” als linktekst.
En dit kan je dan ook weer combineren met een luidsprekertje. Dus een luidsprekertje laten fungeren als linktekst.
Handige tip:
Een link die begint met “klik hier om….” Is geen goed idee. Je denkt vast dat ik gek ben omdat google meer dan een miljoen of zelfs miljard keer deze tekst vind. Maar het gebruik ervan is alsnog niet verstandig!
U weet als webmaster helemaal niet of de bezoeker wel met een muis werkt en kan klikken. Het is ook een stukje logica. Je laat natuurlijk alleen de belangrijkste kernwoord(en) fungeren als tekstlink. En het is bovendien ook een stuk netter, en dus beter als je alleen de kernwoorden ervoor gaat gebruiken.
Voorbeeld:
Klik hier om criminalspoint in het engels te bekijken
is erg omslachtig en het is logischer als je alleen kernwoorden gebruikt:
Engelse versie
Omdat een hyperlink meestal word onderstreept weet de bezoeker meteen het om een link gaat die ons naar de engelse versie zal brengen.
De kracht van het WWW, World Wide Web ligt in de koppelingen, de zogeheten hyperlinks.
Met een muisklik springt de bezoeker naar een andere webpagina om vervolgens weer naar een andere pagina te kunnen surfen. Op deze manier zijn miljoenen websites met elkaar verbonden.
In dit artikel ga ik me bezig houden met het aanbrengen van hyperlinks in een html pagina. Tekst kan een hyperlink worden, maar een plaatje kan ook een link vormen. Een bijzondere vorm van een hyperlink is een e-mailadres dat uitnodigt om een email te sturen.
Tekstkoppelingen
Bij het maken van een hyperlink moeten 2 dingen worden vastgelegd.
- Welke tekst of afbeelding worden voor de gebruiker?
- Welk document is de bestemming van de klik?
Deze 2 gegevens leggen we vast via een a-element. <a> en </a>. De a is de afkorting van het engelse woord: Anchor. In het Nederlands betekent dat Anker.
De bestemming van de link word Referentie genoemd. De hyperlinkreferentie leggen we vast met het attribuut met href binnen de begintag van het a-element.
Laat ik maar is een voorbeeld gaan geven.
We beginnen eerst maar is met een stramien
Code | Selecteer Alles |
|---|
|
Een stramien is een stukje webpagina waarmee je altijd begint, een vaste opbouw en wat volledig foutloos is. Geheel volgens de w3c webstandaarden dus!
Oke nu gaan we weer verder met het maken van een hyperlink:
Ik wil nu een hyperlink aanmaken met de koppeling naar CriminalsPoint, dat doen we door het volgende stukje code te gebruiken:
| Code | Selecteer Alles |
|---|
|
Een klein stukje uitleg hoe de hyperlink in zijn werk gaat.
Het element “<a href= ” geeft de eindbestemming aan, naar de website van CriminalsPoint willen we uiteindelijk een hyperlink plaatsen, nietwaar?
Vervolgens zien we staan: “target=”_blank” “, we willen natuurlijk niet dat de bezoeker onze website verlaat dus zorgen we hiermee voor een nieuwe webpagina. Ofwel tabblad in je browser.
Dan komen we aan op het laatste stukje: “>” en “</a>”.
Heel simpel: De tekst die hiertussen staat is de naam waarop je klikt, als je erop klikt gaan we naar de website van CriminalsPoint.
Om het even compleet te maken:
| Code | Selecteer Alles |
|---|
|
Plaatje als koppeling:
Een hyperlink hoeft niet perse uit tekst te bestaan. Ook een afbeelding kan fungeren als een hyperlink. In plaats van linktekst komt er dan een linkafbeelding te staan in het a-element. Binnen html heeft een afbeelding de vorm van een img-element. Om van een afbeelding een link te maken moeten we een img-element opnemen binnen een a-element.
Allemaal een beetje lastig misschien?
Hier dan een stukje code:
| Code | Selecteer Alles |
|---|
|
Om van deze afbeelding een link te maken, plaatsen we het img element tussen de begintag en de eindtag van een a-element:
| Code | Selecteer Alles |
|---|
|
Let op de dubbele punt na mailto.
Bij alle internet toepassingen geldt dat een protocolnaam gevolgd word door een dubbele punt. Denk maar een http. Ook dan volgt meteen een dubbele punt.
Een link met het mailto-protocol zorgt ervoor dat het e-mailprogramma dat als standaard is aangewezen op de computer wordt gestart met het genoemde e-mailadres ingevuld in het geadresseerdenveld.
Bij een mailto-koppeling is het ook mogelijk alvast het onderwerp van het e-mailbericht in te vullen. Schrijf dan na het e-mailadres een vraagteken, de tekst subject= en daarna de onderwerptekst.
Voorbeeld:
| Code | Selecteer Alles |
|---|
|
Hyperlink naar andere soorten documenten
De meeste hyperlinks verwijzen naar een html-document, maar dat is absoluut geen verplichting!
Je kan ook rechtstreeks linken naar andere bestandstypen, zoals een pdf, .rar of naar een afbeelding.
Een voorbeeld van een hyperlink naar een afbeelding:
| Code | Selecteer Alles |
|---|
|
Een klik op deze hyperlink brengt ons bij de header van CP, meer niet. De bestemming is namelijk geen webpagina maar een een afbeelding. Als de gebruiker terug wil keren naar de pagina die die ervoor had kan die gewoon de terug knop gebruiken.
Het laten tonen van gif, jpeg of png afbeeldingen zal in elke browser geen problemen moeten opleveren omdat de afbeeldingen ook in webpagina’s gebruikt zullen worden. Het zijn bekende bestandstypen. Dat ligt weer anders zodra we andere soorten documenten gaan hyperlinken.
Het aanbieden van niet html-documenten op de website kan gebeuren op de gebruikelijke manier met een a-element voorzien van het href-attribuut, maar wat de browser er volgens mee doet, is iets wat je als webmaster niet zelf in hand hebt.
Om een link te maken naar een mp3-geluidsbestand met de naam: “Danza-Kuduro.mp3”kan je in je html tekst de volgende code opnemen:
| Code | Selecteer Alles |
|---|
|
Eigenlijk niets bijzonders, ipv een html document hebben we nu een .mp3 bestand gebruikt in een Hyperlink.
De gebruiker ziet “Don Omar Ft Lucenzo - Danza Kuduro Mp3” als linktekst.
En dit kan je dan ook weer combineren met een luidsprekertje. Dus een luidsprekertje laten fungeren als linktekst.
| Code | Selecteer Alles |
|---|
|
Handige tip:
Een link die begint met “klik hier om….” Is geen goed idee. Je denkt vast dat ik gek ben omdat google meer dan een miljoen of zelfs miljard keer deze tekst vind. Maar het gebruik ervan is alsnog niet verstandig!
U weet als webmaster helemaal niet of de bezoeker wel met een muis werkt en kan klikken. Het is ook een stukje logica. Je laat natuurlijk alleen de belangrijkste kernwoord(en) fungeren als tekstlink. En het is bovendien ook een stuk netter, en dus beter als je alleen de kernwoorden ervoor gaat gebruiken.
Voorbeeld:
Klik hier om criminalspoint in het engels te bekijken
is erg omslachtig en het is logischer als je alleen kernwoorden gebruikt:
Engelse versie
Omdat een hyperlink meestal word onderstreept weet de bezoeker meteen het om een link gaat die ons naar de engelse versie zal brengen.