Hyperlinks


Wat zijn Hyperlinks?

Hyperlinks | Webdesign KennisbankHyperlinks (of kortweg links) worden in het Nederlands: verbindingen of (snel)koppelingen genoemd. Het is een computer- en internetterm dat duidt op een verwijzing (referentie) in de hypertekst (broncode).

Deze kan de gebruiker dan volgen, om naar een ander webadres te surfen. Een hyperlink is vaak een stukje tekst, maar kan ook een afbeelding of enig ander HTML-element zijn.

Veel hypertekst, is te verdelen in onafhankelijk onderhouden “hyper-documenten”. Het wereldwijde web bestaat tenslotte voor een groot deel uit websites. Hyperlinks zijn als het ware de ‘lijm’ van het internet, waarmee alle webpagina’s aan elkaar verbonden zijn.

Deze documenten hebben meestal een algemene voorpagina (de hoofdpagina van een website). Een bekende term voor zo’n hoofdpagina van een website is: index of portal. Op deze index-pagina staat tevens de belangrijkste informatie van de website in de broncode vermeld.


Hoe Codeer je Hyperlinks?

Je kunt ook het webadres, de weergave tekst en de tekenstijl of de kleur van een hyperlink bewerken. 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 vanzelfsprekend een link.

Hyperlink in HTML

<a href=”https://webdesignkennisbank.nl”>Webdesign Kennisbank</a>

Zet je er een stukje tekst tussen, dan wordt het een tekst-link. Zet je er de HTML-code van een foto ertussen, 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.

Dit doe je met de code: href=””. Tussen de dubbele aanhalingstekens zet je de linkbestemming neer.


Diverse Stijleigenschappen

De weergave van hyperlinks kun je het makkelijkst aangeven met behulp van een stylesheet (CSS). Behalve de kleur zijn er dan ook andere mogelijkheden, zoals het lettertype, de lettergrootte, wel of niet onderstreept en een achtergrondkleur.

Dit met de stijleigenschappen color, font-family, font-size, text-decoration en background-color.


Vormgeving van Hyperlinks in CSS

a {text-decoration: none;}
a:link {color: #0000ff; border-bottom: 1px solid #ff0000;}
a:visited {color: #0000ff; border-bottom: 1px solid #c0c0c0;}
a:hover {color: #000000; border-bottom: 2px dashed #dd0000;}
  • De eerste regel geeft aan, dat in de hyperlink verder geen stijl-decoratie is opgenomen.
  • De tweede regel geeft de kleur aan, dat de onderlijn gestreept doorloopt en de kleur van de lijn, die wordt weergegeven bij een onbezochte link.
  • De derde regel geeft de kleur van de tekst aan, de dikte van de onderlijn en dat deze gestreept doorloopt nadat de link is bezocht.
  • De vierde regel geeft de kleur aan, de dikte van de onderlijn en dat deze gestippeld is, samen met de kleur van de onderlijn, wanneer de muis zich over de hyperlink beweegt.

  • Zo link je naar contact.php

    <a href=”contact.php”>contact</a>

    Hoe bewerk je een Hyperlink?

    In de openingstag van de link kun je ook nog neerzetten of de link-bestemming in een nieuw browservenster geopend moet worden, of dat het huidige venster wederom hergebruikt wordt. In dat laatste geval ‘verdwijnt’ dus de huidige pagina, en wordt in plaats daarvan de webpagina van de link-bestemming vertoond als je op de link klikt.

    Vind je dat prima, dan hoef je verder niets te doen. Maar als je wilt dat er een nieuw browservenster geopend moet worden, dan moet je in de openingstag ook nog de volgende code neerzetten: target=”_blank”.

    Externe Hyperlink in HTML

    <a href=”https://webdesignkennisbank.nl/” target=”_blank” >Webdesign Kennisbank</a>

    Bladeren ► HomeKennisbankHTML • Hyperlinks

  • Elementen en Attributen
  • HTML-Kleurcodes
  • HTML-Editors
  •  

    Omhoog