Contact 
 Rechercher 
 Accueil   Plongée   Labo   Nucléaire   Carnets   Musique   Bonheur   Cinéma   Eclipses 
  Intro • Créer son site web • [HTML] • JavaScript • Perl
Liens  
 HTML - Arborescence 

Dans la catégorie "tiré par les cheveux", un truc pour matérialiser des arborescences. Les plus courageux peuvent envisager la réalisation d'organigrammes. L'intérêt de la manip est de faire cohabiter des images légères (Euh, faciles à charger) et des liens hypertexte.

Tout repose sur l'utilisation répétée d'un petit ensemble d'images GIF rapides à charger. Celles-ci sont réparties dans les cellules d'un tableau. On peut imaginer plein de déclinaisons : puces, flèches, cadres...

Good music   The Ramones
 The Dead Kennedys
 The Toy Dolls

Voici la structure :

Good music   The Ramones
     The Dead Kennedys 
     The Toy Dolls

Et voila le code :

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 ALIGN="CENTER"> <TR> <TD>Good music&nbsp;</TD> <TD WIDTH=20><IMG SRC="24.gif" HEIGHT=20 WIDTH=20></TD> <TD><IMG SRC="234.gif" HEIGHT=20 WIDTH=20></TD> <TD><IMG SRC="24.gif" HEIGHT=20 WIDTH=20></TD> <TD>&nbsp;<A HREF="ramones.html">The Ramones</A></TD> </TR> <TR> <TD></TD> <TD></TD> <TD><IMG SRC="123.gif" HEIGHT=20 WIDTH=20></TD> <TD><IMG SRC="24.gif" HEIGHT=20 WIDTH=20></TD> <TD>&nbsp;<A HREF="dk.html">The Dead Kennedys</A></TD> </TR> <TR> <TD></TD> <TD></TD> <TD><IMG SRC="12.gif" HEIGHT=20 WIDTH=20></TD> <TD><IMG SRC="24.gif" HEIGHT=20 WIDTH=20></TD> <TD>&nbsp;<A HREF="toydolls.html">The Toy Dolls</A></TD> </TR> </TABLE>

L'espace insécable (&nbsp; = Non Breaking SPace) est utilité pour aérer un peu le contenu des cellules. En effet on doit avoir à la fois CELLPADDING=0 et CELLSPACING=0 pour que les images restent jointives.