Een link toevoegen aan je website

Pdf downloaden
Bijdragen van wikiHow-redactie

Pdf downloaden

Koppelingen of hyperlinks, meestal afgekort tot "links", behoren tot de ruggengraat van het internet en van websites in het bijzonder. Links geven gebruikers de mogelijkheid om op een stuk tekst of een afbeelding te klikken, waardoor ze doorgestuurd worden naar een andere webpagina. Hierdoor zijn ze een onlosmakelijk onderdeel van internet. Het maken van een link als onderdeel van je website vereist maar weinig HTML code. Hier laten we zien hoe je dat doet.

Methode 1
Methode 1 van 2:

Een Eenvoudige Link

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-460px-Create-a-Link-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-728px-Create-a-Link-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Links worden met een paar eenvoudige html-tags gemaakt bij het bewerken van de code van je website. Maar eerst is het belangrijk om te weten wat je binnen de tags wilt plaatsen. Dit kan tekst zijn, een afbeelding, of nog weer een ander html element, maar hier gebruiken we gewoon een regel tekst.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-460px-Create-a-Link-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-728px-Create-a-Link-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Hyperlinks worden met twee simpele tags aangegeven, één om de code te openen en één om deze weer te sluiten. Zonder attributen is dit nog niet echt bruikbaar, maar daar gaan we wat aan doen.
    • Je link zou er als volgt uit kunnen zien: Klik hier om mijn nieuwe website te bezoeken.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-460px-Create-a-Link-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-728px-Create-a-Link-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Het "href"-attribuut vertelt de browser waar de gebruiker naartoe moeten worden geleid als op de link is geklikt. Dit attribuut wordt gevolgd door een is-gelijk teken en daarna door het adres tussen aanhalingstekens erachter te plaatsen.
    • Het bovenstaande voorbeeld ziet er als het goed is nu zo uit: Klik hier om mijn nieuwe website te bezoeken.
    • Merk op dat, als de bestemming van de link een andere website is, je de volledige url moet vermelden (deze begint meestal met "http"). Als alleen de naam van de pagina wordt gegeven, dan wordt ervan uitgegaan dat er binnen de directory van de website moet worden gezocht.
    Advertentie
Methode 2
Methode 2 van 2:

Het Toevoegen van E-mail en Ankers

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-460px-Create-a-Link-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-728px-Create-a-Link-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dit is is heel eenvoudig te doen door het toevoegen van een image tag binnen de link tags. Je hebt dan wel het adres nodig van de locatie van de afbeelding (dus de locatie op jouw server of die van iemand anders).Hier zie je een voorbeeld van hoe een afbeeldingslink eruit kan zien:
    • <a href="de_url_van_de_afbeelding.html"><img src="afbeelding.jpg" /></a>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-460px-Create-a-Link-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-728px-Create-a-Link-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    protocol . Om een link te maken waarmee een e-mail kan worden opgesteld naar een specifiek adres, gebruik je "mailto:" en plaats je deze direct voor het email-adres van de persoon in kwestie.
    • Een e-mail link kan er bijvoorbeeld zo uitzien: Klik hier om een vraag te stellen of een opmerking te maken.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-460px-Create-a-Link-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-728px-Create-a-Link-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Als je een manier zoekt om te linken naar een specifiek deel van een webpagina, gebruik dan een anker. Ankers zijn heel handig bij grotere pagina's met een inhoudsopgave; elk hoofdstuk of paragraaf kan een anker toegewezen krijgen, gekoppeld aan de inhoudsopgave. Ankers worden gemaakt met het "name" attribuut.
    • Om een anker te maken voeg je de tag op de juiste plek in op de pagina, zoals bijv: Hoofdstuk 3 - Ankers gebruiken in HTML
    • Om een koppeling te maken naar het zojuist gemaakte anker, gebruik je het # teken als volgt: #Ga naar Hoofdstuk 3
    Advertentie

Tips

  • Voor het bouwen van een website heb je geen speciale software nodig, en de meeste computers hebben de juiste software standaard geïnstalleerd. Een voorbeeld is het Kladblok/ Notepad in Windows. Gewoon de codes invoeren en opslaan als html. Om te kunnen bekijken hoe dit er in de praktijk uitziet heb je wel een browser nodig, wat in meer geavanceerde programma's vaak niet nodig is. Daarnaast missen er mogelijkheden om code te controleren op syntax en of deze voldoet aan de standaarden.
  • Gebruik css-stijlen om de kleur en andere eigenschappen van links te wijzigen.
Advertentie

Benodigdheden

  • Een computer
  • Een editor zoals Kladblok, of webdesign software

Gerelateerde artikelen

Gratis toegang krijgen tot betaalde nieuwsartikelen
Het noorden vinden in Google Maps
Iemand opzoeken met een afbeelding
Waarom is ChatGPT altijd down?
De publicatiedatum van een website vinden
Contact opnemen met Yahoo
Een EML openen
Doen alsof je tekst van een website bewerkt
ChatGPT gebruiken
Google Home-apparaten verbinden met een nieuw wifi-netwerk
Alfabetiseren in Google Documenten
Oude websites vinden die niet meer bestaan
Advertentie

Bronnen

  1. http://www.echoecho.com/htmllinks01.htm
  2. http://w3schools.com/html/html_links.asp

Over dit artikel

In andere talen
Deze pagina is 15.662 keer bekeken.

Was dit artikel nuttig?

Advertentie