Links
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
1. de <a> tag
2. Hyperlinks
3. Een afbeelding als link
1. de <a> tag:
Wat zou het internet zijn zonder links? Men zou niet eens kunnen surfen! Gelukkig zijn ze er wel, laat ons de verschillende mogelijkheden eens van dichterbij bekijken. Meer informatie (attributen) over dit element, kunt u op deze pagina terugvinden.
<body>
Ga naar <a href="http://www.sitemasters.be">Sitemasters!</a>
</body> |
Zoals je ziet heeft de <a> tag een verplichte eindtag namelijk </a>
Bovenstaand voorbeeld resulteert in je browser als volgt:
Zoals je ziet staat het woord sitemasters! in blauwe letters (of paarse letters als je deze site al eens bezocht hebt) en is het onderlijnt.
Alles wat tussen <a href=...> en </a> staat vormt de link.
Het href attribuut bevat het internet adres (URL) naar waar de link moet verwijzen.
De standaard kleuren voor links zijn:
--> blauw voor een niet bezochte link
--> purper voor een bezochte link
--> rood als men op de link klikt |
Men kan de kleuren van de links aanpassen:
verouderd (dus af te raden):
|
<body link="#0000ff" vlink="#800080" alink="#ff0000"> |
link staat voor niet bezochte link
vlink staat voor visited link (bezochte link)
alink staat voor active link (actieve link, de klik op de link)
Aan te raden manier: (CSS)
<head>
<style type="text/css">...
a:link {...}{ color: #0000ff }
a:visited {...}{ color: #800080 }
a:active {...}{ color: #ff0000 }
</style>
</head> |
a:link staat voor niet bezochte link.
a:visited staat voor een bezochte link.
a:active staat voor de actieve (de klik op) link.
Men moet enkel de #...... waarde vervangen door de waarde die men als kleur wil.
2. Hyperlinks
Stel je voor dat je een lange pagina hebt met veel tekst en ergens bovenaan op je pagina wil je verwijzen naar een deel van de tekst dat zich onderaan bevindt. Meer nog, je wil, als de bezoeker op de link klikt, dat de browser onmiddelijk naar beneden gaat en blijft staan daar waar de verwijzing zich bevindt.
Bijvoorbeeld:
Je ziet dat de browser terug naar boven springt en wel naar Ga naar Sitemasters!
Deze techniek wordt veel gebruikt om verwijzingen in lange teksten te maken of om snel van onder naar boven of omgekeerd te gaan.
Dit bereik je als volgt:
1. We nemen de regel waar je naar wil verwijzen:
|
Ga naar <a href="http://www.sitemasters.be" name="sitemasters">Sitemasters!</a> |
de name attribuut geeft deze link de naam "sitemasters". Je kan natuurlijk eender welke naam kiezen.
2. We nemen de regel die de verwijzing zal doen:
De HTML code voor deze regel is:
|
Klik <a href="#sitemasters">op deze link</a> en zie wat er gebeurd! |
#sitemasters zal een link teweeg brengen naar de code waar zich name="sitemasters" bevindt. Vergeet het # teken niet in de code!
Men kan ook een link maken om een e-mail bericht te versturen. Deze link opent de e-mail client (Outlook Express, of Messenger, of andere ...) en laat de lezer toe een e-mail bericht naar de geadresseerde te sturen.
Dit is de vorm:
<body>
Stuur een <a href="mailto:test@testadres.be">e-mail</a> naar Jefke.
</body> |
wordt weergegeven als:
Als je op de link klikt wordt jouw e-mail client geopend en kun je me een mail sturen. Erg handig niet?
Je kan zelfs het onderwerp van de e-mail specifiëren.
Dat doe je zo:
|
Zend een <a href="mailto:test@testadres.be?subject=hulp!"> bericht</a> naar Jefke. |
wordt weergegeven als:
Je zal zien dat het onderwerp reeds zal ingevuld zijn in je e-mail client.
3. Een afbeelding als link
Je hebt ze waarschijnlijk al gezien. Een afbeelding die dienst doet als link. Weet je nog hoe je een afbeelding op je pagina plaatst?
Dit doe je zo:
|
<img src="logositemasters.jpg" width="100" height="50" alt="Dit is het logo van sitemasters"> |
Een link maken van deze afbeelding doe je zo:
|
<a href="http://www.sitemasters.be"><img src="logositemasters.jpg" width="100" height="50" alt="Ga naar www.sitemasters.be"></a> |
Als je dan op die afbeelding klikt dan zal je naar http://www.sitemasters.be gebracht worden.
Normaal zie je altijd een blauwe (of paarse kader als je het web adres al eens bezocht hebt) rond de afbeelding.
Deze kader oogt meestal niet mooi op je pagina en daarom is het nuttig te weten dat je hem kan 'wegtoveren'.
Gebruik dan deze vorm:
<a href="http://www.sitemasters.be">
<img src="logositemasters" width="100" height="50" alt="Ga naar www.sitemasters.be" border="0">
</a> |
border="0" zorgt ervoor dat de kader niet wordt getoond.
Opmerking:
De volgorde binnen de <img> tag speelt geen enkele rol. Dit is ook goed:
|
<img src="logositemasters.jpg" border="0" alt="Ga naar www.sitemasters.be" width="100" height="50"> |
En ook dit is goed:
|
<img border="0" alt="Ga naar www.sitemasters" src="logositemasters.jpg" width="100" height="50"> |
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
|
