Waar vandaan: Thuis op Internet > Cursus website maken voor senioren >
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.