Hyperlinks 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 regelmatig 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 Wereld Wijde 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. Een bekende term voor zo’n voorpagina van een website is: index of portal en kan ook een blogpagina zijn. Op deze index-pagina staat tevens de belangrijkste informatie, waaronder (alle) hyperlinks van de website, in de broncode vermeld.
Coderen van Hyperlinks
In HTML (Hypertext Markup Language), de opmaaktaal die wordt gebruikt om webpagina’s te structureren, kun je hyperlinks coderen met behulp van het <a>-element (anchor-element). Vervolgens kun je de tekst van de link tussen de opening en sluitende “a” tags plaatsen. Bijvoorbeeld, om een link te maken met de tekst “Klik hier”:
| <a href=”https://example.com”>”Klik hier”</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 openings-tag van de link zet je neer wat de bestemming 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 bestemming 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.
Zie ook: CSS
Ontwerpen | Hyperlinks
| • | 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. |
| 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;} |
Openen in nieuw browservenster
In de openings-tag van de link kun je ook nog coderen 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 zichtbaar 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 openings-tag ook nog de volgende code neerzetten: target=”_blank”. Zie voorbeeld:
| <a href=”https://webdesignkennisbank.nl/” target=”_blank” >Webdesign Kennisbank | Cees Spelt</a> |
Dan verschijnt de onderstaande hyperlink in een nieuw browservenster:
Webdesign Kennisbank | Cees Spelt
Zo link je naar een contact.php
| <a href=”contact.php”>contact</a> |