Chapitre 30 : Trucs et astuces en HTML

Ce chapitre comporte un certain nombre d'astuces qui donneront à vos pages HTML un petit caractère personnel. Ces tout petits détails sont parfois importants pour une page qui se veut soignée. Ils finissent par passer inaperçus quand on les retrouve partout.

Il est important que leur usage soit réfléchi. Il est de nombreux exemples de pages Web complètement illisibles parce que leur auteur n'a pas vérifié que la couleur de fond ne rendait que sur son écran et que 80% des lecteurs ne pourraient pas lire sa page.

Détail amusant, une page dédiée à l'écriture de pages Web est complètement illisible depuis des PC munis de cartes SVGA ou VGA mais assez sympathique quand elle est lue sur une station XWindows avec un écran graphique...

30.1 - Titre de page

Cet effet est assez circontancié puisque ne fonctionnant qu'avec Netscape sur Macintosh et Internet Exporer sur toutes les plates-formes. Vous pouvez faire des effets sur les titres de vos pages en définissant plusieurs titres. Ceci permet de faire défiler un titre ou de faire des effets.

La séquence suivante provoquera un défilement du titre avec la phrase Regardez ça!

<title>Regardez ça!</title>
<title>********************************************Regardez ça!</title>
<title>******************************************Regardez ça!</title>
<title>****************************************Regardez ça!</title>
<title>*************************************Regardez ça!</title>
<title>***********************************Regardez ça!</title>
<title>********************************Regardez ça!</title>
<title>*****************************Regardez ça!</title>
<title>**************************Regardez ça!</title>

30.2 - Les compteurs

On trouve de plus en plus de pages affichant un compteur, indiquant le numéro d'ordre du client connecté. Il existe un grand nombre de formats de compteur plus ou moins réussis.

Ceci se fait très simplement en incluant un graphique représentant un compteur de flipper, de pompe à essence ou de réveil électronique. Ce graphique peut être :

• sur un serveur distant
• sur votre serveur

Compteur sur un serveur distant

Il existe quelques serveurs qui fournissent un compteur et comptabilisent le nombre de visiteurs de votre site. Ceci présente l'avantage de n'avoir pas grand chose à faire d'autre que d'appeler une image distante.

 Par contre, les compteurs peuvent être remis à zéro sans que vous en soyez averti, et si le propriétaire du compteur décide de fermer l'accès de son serveur, vous ne bénéficierez plus de ses services.

La syntaxe suivante vous propose un compteur distant :

<IMG SRC="http://www.eeb.ele.tue.nl/cgi-bin/nph-count?width=5&link={votre adresse}{votrepage}">

La valeur width donne le nombre de digits de votre compteur.

 Les champs adresse et votrepage permettent au serveur d'identifier votre page Web et de maintenir les compteurs s'y référant.

Voici le résultat de cette commande :

Les sites offrant des compteurs ont tendance à disparaître peu de temps après avoir été créé. Le site http://usa.nedstat.net offre un exemple de compteur fournissant avec une partie gestion de statistique. Il est gratuit pour les pages personnelles.

Compteur sur votre serveur

Les sources d'un compteur beaucoup plus puissant peuvent être rapatriés sur votre site pour y être compilé. Ceci vous donne toute l'autonomie voulue mais nécessite un travail de compilation en langage C et de lire la page WWW Homepage Access Counter [ http://www.fccc.edu/users/muquit/] en langue anglaise.

30.3 - L'heure

Pourquoi ne pas afficher l'heure sur votre page HTML ? Ceci se fait de la même façon que pour les compteurs du paragraphe précédent . Il n'existe pas dans le cas des horloges de maintien à distance de votre heure et vous serez donc obligé de compiler différents programmes que vous trouverez à l'adresse suivante : WWW Homepage clock [warm.semcor.com/~muquit/dgclock.html]

30.4 - La transparence dans les images

Ne trouvez vous pas l'image  sympathique ?
 
 

Elle l'est, en effet, car le fond de l'image est transparent.

Ceci est facile a réaliser, il suffit de connaître les deux conventions suivantes :

• la couleur tranparente est fabriquée ou convertie par les logiciels en demandant, dans une option, qu'une couleur donnée (celle du fond généralement) soit transparente. Les logiciels gérant les couleurs transparentes sont, par exemple, LViewPRO, PaintShopPro sur PC et PhotoGIF sur Macintosh. Ces logiciels sont décrits dans la section Conversion d'image
• le format de l'image doit impérativement être du GIF 89a non entrelacé ou entrelacée.

Parfois l'option d'activation de la couleur transparente n'est pas facile à trouver, ainsi on notera les commandes suivantes :

• Paint Shop 3.11 + : File/Save as/option/Set backgtound color
• LView Pro : Options/Background color" puis dans "dropper"

Les exemples suivants reprennent la même image avec des formats différents :

• GIF 87a non entrelacé
• GIF 87a entrelacé
• GIF 89a entrelacé

30.5 - Images sélectionnables

Sur certaines pages Web, vous avez pu constater qu'il était possible de cliquer sur une image et d'avoir des réactions différentes en fonction de la région cliquée. Ceci se fait généralement au moyen des procédures CGI ou des IMAGEMAP. Dans ces deux cas, il vous faudra accéder au serveur HTTP et le configurer, mais les administrateurs systèmes n'aiment pas trop laisser les utilisateurs développer leur procédure CGI qui peuvent devenir des maillons faibles par rapport à la sécurité de leur serveur.

 Il est cependant possible avec HTML 3 de spécifier dans la directive IMG une largeur de trait nulle. Par cet artifice, vous pourrez donner l'impression d'une image à région cliquable à plusieurs images indépendantes, chacune d'entre elles déclenchant une action.

Ainsi vous remplacerez les directives :
<A HREF=""><IMG SRC="gif/button_y.gif"></A> 

• avec bord :   
• sans bord :   

30.6 - Les marges

Il est possible par quelques artifices de définir les marges de vos documents.

Ceci se fait principalement par les tableaux ou par la directive UL.

Par les tableaux

La première méthode consiste à utiliser les tableaux en laissant la première colonne vide.
 
 

Cette méthode HTML V3.0 n'est pas normée et ne fonctionne qu'avec les lecteurs compatibles Netscape.

 Par exemple :

Ici j'écris dans la marge

Ceci est un tableau qui comprend du texte qui a une marge. Je peux écrire tous les caractères que je veux dans la deuxième colonne et ainsi laisser apparaître une marge. Cette méthode est assez lourde à mettre en oeuvre mais permet d'écrire dans la marge ou de mettre des images dans cette même marge.      Je peux mettre des caractères saut de ligne dans mon texte et mettre les attributs de caractère que je veux.

Code généré :
 
 

 <TABLE COLSPEC="L30 L20" >
<TR>
<TD>Ici j'écris dans la marge</TD>
<TD> Ceci est un tableau qui comprend du texte qui a une marge. Je peux écrire tous les caractères que je veux dans la deuxième colonne et ainsi laisser apparaître une marge. Cette méthode est assez lourde à mettre en oeuvre mais permet d'écrire dans la marge ou de mettre des images dans cette même marge.

 Je peux mettre des caractères saut de ligne dans mon texte et mettre les attributs de caractère que je veux. </TD>
</TR>

Par la directive UL

La directive UL utilisée sans balise de numérotation ou autre permet d'obtenir le même résultat.