Uitleg

Hyperlinks

Bij een link zijn maar twee dingen van belang:

Voor links gebruik je de <a> </a> tags. a is de afkorting van het Engelse woord "anhor" wat anker betekent.

Voorbeeld1:

<a href="http://www.nu.nl/">
   Klik hier om naar nu.nl te gaan
</a>

levert een tekst-link op:  

Klik hier om naar nu.nl te gaan

In dit voorbeeld ziet de gebruiker een stuk tekst. Als de gebruiker op de tekst klikt gaat hij naar de website van nu.nl

 

Voorbeeld 2:

<a href="http://www.nu.nl/">
   <img src="nunl.png" alt="Logo nu.nl" width="79px" height="79px">
</a>

levert een plaatje-link op:

 

In voorbeeld2 ziet de gebruiker een plaatje van 79 bij 79 pixels als hij op het plaatje klikt gaat hij eveneens naar de website van nu.nl

 

Net als bij plaatjes is het netjes om linkjes niet te laten niet zweven. Met andere woorden: ook een link zet ik vaak tussen een <p> en een </p> dit is niet verplicht.

Naast dat je kunt linken naar websites kun je ook linken naar paginas van je eigen site, bestanden of een bladwijzer op dezelfde pagina.

In onderstaand film wordten links uitgelegd.

 

Pseudoklassen

Het beeldscherm is de interface van de browser. Een interface is het punt van interactie tussen twee systemen of objecten.
Browsers hebben listeners (luisteraars) die permanent aan het luisteren zijn naar events (gebeurtenissen) op het beeldscherm.
Bijvoorbeeld wanneer de muis over een tekst zweeft. Dit noemen we muis-events.
Muis-events kunnen we programmeren met behulp van pseudoklassen.

Hyperlinks hebben de volgende pseudoklassen: 

De pseudoklassen
a:visited en a:active veranderen de kleur van de bezochte en de actieve hyperlinks. Zo kunnen we zien welke links we bezocht hebben.

In de laatste opgave hebben we met behulp van de pseudoklasse a:hover een hover-effect gecodeerd zodat de kleur van de tekst van alle hyperlinks verandert wanneer de muis over de link zweeft.