11.4 Figuren en hyperlinks

Je kunt ook een link geven aan een figuur. Dit wordt veel gebruikt voor bv. menu’s die bestaan uit figuren.
Om zoiets te maken is niets moeilijks aan, het is een combinatie van een link en een figuur.
Je plaatst eerst de <a> tag, dan de <img> tag en dan sluiten we af met de </a> tag.

Een voorbeeldje:

<a href="http://www.seniorennet.be"><img src="logo.gif" width="97" height="59"></a>

Dit wordt:

Je ziet dat er rond de figuur een gekleurde rand komt. Dit is om aan te geven dat het een hyperlink is. Indien je dit niet wenst, kan je een extra parameter meegeven, namelijk border=”0". Uiteraard kan je ook een dikkere rand instellen, die is dan bv. border=”5”.

Een voorbeeld van geen rand:

<a href="http://www.seniorennet.be"><img src="logo.gif" width="97" height="59" border="0"></a>

Dit wordt:

Een voorbeeld van een hele dikke rand:

<a href="http://www.seniorennet.be"><img src="logo.gif" width="97" height="59" border="10"></a>

Bovenstaande links openen allemaal in hetzelfde venster. Zoals we hebben geleerd bij hyperlinks, kunnen we ook de pagina laten openen in een nieuw venster door het commando target="_blank" mee te geven in de <a> tag.

Dit wordt dan:

<a href="http://www.seniorennet.be" target="_blank"><img src="logo.gif" width="97" height="59" border="10"></a>

Klik maar eens op de figuur om het uit te proberen:

Nu maken we op onze voorbeeldpagina ook onderaan het logo bij met een link naar www.seniorennet.be die opent in een nieuw venster, de figuur wordt rechts uitgelijnd, en de tekst loopt links ervan gewoon door, we doen dit dus door middel van een kleine tabel.

We hebben dus volgende HTML code nodig, rechts van de code zie je wat deze wordt:

<table align="right">
<tr>
<td><a href="http://www.seniorennet.be" target="_blank"><img src="logo.gif" width="97" height="59" border="0"></a></td>
</tr>
</table>

Op onze voorbeeldpagina voegen we bovenstaande code bij en krijgen nu in totaal dit:

<html>
<head>
<title>Mijn persoonlijke website</title>
</head>
<body bgcolor="#99CCFF" text="#0000FF">
<h1><font color="#000000" face="Courier New, Courier, mono">Mijn persoonlijke website</font></h1>
<p>U bent hier beland op mijn persoonlijke website!</p>
<h2><font color="#000000">Beginpagina</font></h2>
<p>U bent op de <u>beginpagina</u> van mijn <u>persoonlijke website</u>, van hieruit kan u naar de rest van mijn website surfen.</p>
<h3><font color="#000000">Welkom</font></h3>
<p>Ik heet u van harte welkom op mijn website. Veel plezier op deze site, <i>en kom nog eens een keertje terug</i>!</p>
<p align="right"><font size="1">Deze website wordt regelmatig bijgewerkt.</font></p>
<p>Op mijn <b>persoonlijke website</b> kan je heel wat informatie vinden over mijzelf, en mijn interesses.</p>
<ul>
  <li>Over mijzelf</li>
  <li>Over mijn hobbies
      <ol>
        <li>Fotografie</li>
        <li>Website's maken</li>
      </ol>
    </li>
  <li>Enkele links</li>
</ul>
<p>Mijn huisdieren:</p>
<table width="50%" border="1" align="center" cellpadding="2" cellspacing="5">
<tr>
<td><b>Huisdier</b></td>
<td><b>Aantal</b></td>
</tr>
<tr>
<td>Kat</td>
<td>1</td>
</tr>
<tr>
<td>Kippen</td>
<td>5</td>
</tr>
<tr>
<td>Vissen</td>
<td>30</td>
</tr>
<tr>
<td>Vogels</td>
<td>5</td>
</tr>
</table>
<table align="right">
<tr>
<td><a href="http://www.seniorennet.be" target="_blank"><img src="logo.gif" width="97" height="59" border="0"></a></td>
</tr>
</table>
<p>Surf naar Seniorennet, de startpagina voor de actieve 50-plusser, <a href="http://www.seniorennet.be" target="_blank">klik hier</a>.</p>
</body>
</html>

Voor de voorbeeldpagina, klik hier.

Klik hier om te leren hoe een achtergrondfiguur te maken op je webpagina.


Seniorennet