Hyperlinks (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 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 (de hoofdpagina van een website). Een bekende term voor zo’n hoofdpagina van een website is: index of portal en kan ook een blogpagina zijn. Op deze index-pagina staat tevens de belangrijkste informatie van de website in de broncode vermeld.
Hyperlinks Coderen
De “a” tag begint met het “href” attribuut, waarin je de URL van de pagina die je wilt linken moet opgeven. Dit kan een volledige URL zijn, bijvoorbeeld “http://www.example.com”, of een relatieve URL, bijvoorbeeld “/pagina.html”.
Vervolgens moet 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”, zou je de volgende code kunnen gebruiken:
| <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 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
Hyperlinks Vormgeven
| 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 |
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 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”. Zie voorbeeld:
| <a href=”https://webdesignkennisbank.nl/” target=”_blank” >Webdesign Kennisbank | Cees Spelt</a> |
Dan verschijnt de volgende hyperlink: Webdesign Kennisbank | Cees Spelt
Zo link je naar een contact.php
| <a href=”contact.php”>contact</a> |