HTML - Tag cloud maken


Met enige regelmaat kom je op diverse blogs en websites een tag cloud tegen. Een tag cloud, ook wel woordenwolk genoemd is een visuele weergave van inhoudstags.

Hoe belangrijker een specifieke tag in de wolk is hoe meer deze benadrukt zal worden, bijvoorbeeld groter of met een andere kleur. Op het moment dat je dan op een tag klikt krijg je een overzicht te zien van alle berichten die gekoppeld zijn aan de betreffende tag.

Maar als je een eigen website hebt maar niet direct de beschikking kunt hebben over een tag cloud die automatisch aangemaakt wordt dan kun je natuurlijk ook een eigen statische HTML tag cloud maken met woorden en links die verwijzen naar pagina's in je website.

Het handigst is in dit geval om de opmaak direct in de HTML zelf te plaatsen maar uiteraard kun je dit eventueel ook scheiden door deze opmaak in een apart CSS bestand te plaatsen en de links in de tag cloud ieder een eigen classnaam te geven, eigenlijk wel mooier.

Dan de tag cloud zelf, als eerste om alle woorden in de 'wolk' te houden gebruik je een DIV (container) die alle tags bij elkaar gaat houden, de code dan simpelweg als volgt.

<div></div>


Deze div heeft een eigen opmaak waaronder de breedte die je opgeeft en eventueel een alternatief lettertype. In dit geval is de breedte van de woordenwolk 250 pixels.

<div style="width: 250px; font-family: Arial, Verdana, Helvetica;"></div>


Dan de woorden zelf die in de tag cloud worden geplaatst met de bijbehorende links. Hiervoor gebruik je de code van een gewone link en opnieuw eigen opmaak. De code van een link wordt dan als volgt met de opmaak voor de kleur en de font-size.

<a href="http://www.websonic.nl/" style="font-size: 15px; color: #000000; text-decoration: none;" >Windows</a>


Plaats deze link binnen de div en plaats daarna dan op deze manier alle tags in je tag cloud en pas dan per link de font-size aan en eventueel de kleur. Een voorbeeld hieronder.

<div style="width: 250px; font-family: Arial, Verdana, Helvetica;">
        <a href="http://www.websonic.nl/" style="font-size: 15px; color: #999999; text-decoration: none;">Google Analytics</a>
        <a href="http://www.websonic.nl/" style="font-size: 16px; color: #ff7600; text-decoration: none;">Google Doodles</a>
<a href="http://www.websonic.nl/" style="font-size: 12; color: #999999; text-decoration: none;">Hoaxes</a>
        <a href="http://www.websonic.nl/" style="font-size: 22px; color: #039faf; text-decoration: none;">Windows 7</a>
        <a href="http://www.websonic.nl/" style="font-size: 14px; color: #ff7600; text-decoration: none;">Windows Vista</a>
        <a href="http://www.websonic.nl/" style="font-size: 19px; color: #87a800; text-decoration: none;">CSS Tutorials</a>
</div>


Werkend ziet de tag cloud er dan als volgt uit.

Google Analytics Google Doodles Hoaxes Windows 7 Windows Vista CSS Tutorials HTML Tutorials Windows XP Internet Explorer 8 Internet Explorer 7 Gratis Webtools