Links

De link naar een andere pagina:
<A HREF="nieuw.html">link</A>

De link naar een deel in een pagina:
<A HREF="#deel">

Waarbij het deel waar naar toe verwezen wordt, aangegeven is met:
<A NAME="deel">

Of, het element een ID gekregen heeft, bijvoorbeeld:
<DIV ID="deel">

Opmaak van links wijzigen

In een HTML document kunt u doormiddel van links <A> (Anchor) een nieuwe pagina oproepen of verwijzen naar een deel in de pagina zelf.

De kleuren en de opmaak van links hebben een standaard uiterlijk.
De standaard opmaak:

    (Niet actief!)
  • Niet bezochte link
  • Bezochte link

Velen vinden deze standaard kleuren en/of de streep onder de links niet mooi of passend bij de opmaak van hun pagina. Men wil de opmaak en kleur graag wijzigen en/of leuke effecten meegeven.

U dient echter niet te vergeten dat de standaard opmaak er niet voor niets is. Er is een duidelijk verschil te zien tussen nog niet bezochte links en de reeds bezochte links. Hierdoor ziet een bezoeker van een pagina onmiddelijk op welke links hij al geweest is en op welke niet.

Als u toch besluit uw links te wijzigen, doe dit dan zeer zorgvuldig. Zorg ervoor dat uw bezoeker niet in verwarring raakt en gebruik deze voor alle links op uw pagina.

CSS

In de CSS stylesheet (een extern document) dat aan het HTML document is toegevoegd, is de opmaak vastgelegd.

Link 1.

Is beschreven als: a.links1

Link 2.

Is beschreven als: a.links2

Link 3.

Is beschreven als: a.links3

Link 4.

Is beschreven als: a.links4

Bekijk de stylesheet.

(Opent in een nieuw venster!)

HTML

In de <HEAD> sectie van het HTML document wordt middels een <link> het document met de styles ingelezen.

In dit geval door:

<link rel="stylesheet" type="text/css" href="./linkvoorbeelden.css" media="screen, projection">

In de HTML wordt in de link <A HREF> de gewenste "class" opgenomen:

<A HREF="#links" class="links1" title="Wijzigen opmaak links">Link 1.</a>

Voor een beschrijving van de gebruikte CSS elementen verwijzen wij graag naar de volgende pagina: htmlhelp.com

Links opgemaakt met CSS

Een link kan net als tekst van een opmaak worden voorzien.
Er zijn grofweg 4 situaties voor een link, waarbij u voor alle 4 de situaties de opmaak in CSS kunt vastleggen:

  • (a.link) nog niet bezocht
  • (a.visited) bezocht
  • (a.hover) muisover effect
  • (a.active) actief
Dit is ook de volgorde waarin de opmaak dient te worden vastgelegd in CSS!

De link kan op dezelfde wijze worden opgemaakt als tekst.
U kunt de grootte, breedte, hoogte, het lettertype, de letterafstand, de positie: (gecentreerd, links- of rechts uitgelijnd), wel of niet onderstrepen, met of zonder kaders, de tekst- en achtergrondkleur enz. wijzigen.

Voorbeelden:

Beweeg uw muis over de links om het effect te bekijken.
(Links verwijzen naar de top van het document!)

Link 1. Link 2. Link 3. Link 4.


 

CSS

Voeg onderstaande regels aan uw styles / stylesheet toe:

.bestelknop { background: #036 url(../plaatjes/bestelpijltje.jpg) no-repeat left center; color: #FFF; padding-left: 1em; font-weight: bold; }

.bestelknophover { background: #FFF url(../plaatjes/bestelpijltje-neg.jpg) no-repeat center left; color: #003; padding-left: 1em; font-weight: bold; }

HTML

Op de plaats waar de knop moet komen neemt u in de html-code de volgende regels op:

<input type="button" value="Bestellen" class="bestelknop" onmouseover="this.className = 'bestelknophover';" onmouseout="this.className = 'bestelknop';">

De plaatjes

Zorg ervoor dat u twee plaatjes aanmaakt:

bestelpijltje.jpg

bestelpijltje-neg.jpg

en plaats deze in de map of directory "plaatjes"

Dit kan natuurlijk ook een andere map zijn en de plaatjes kunnen ook een andere naam of uiterlijk hebben.

In dat geval dient u de volgende delen in de CSS aan te passen:

(../plaatjes/bestelpijltje.jpg)

(../plaatjes/bestelpijltje-neg.jpg)

Button / knop in formulieren wijzigen

In formulieren <form> wordt standaard een knop getoond met een grijs vlak. Vaak wordt de standaard opmaak en het uiterlijk van de knop "saai" of "niet mooi" gevonden.

Met behulp van CSS is deze knop of button prima aan te passen.

Hierbij dient u echter wel in gedachte te houden dat door het standaard uiterlijk, een knop direct als knop wordt herkend.

Zorg er dus altijd voor dat het uiterlijk van de knop er voor zorgt dat er geen twijfel over bestaat dat het hierbij ook om een knop gaat.

Normale knop:



Met CSS opgemaakte knop: