Toutes les bonnes pages ont maintenant recours aux scripts, pour améliorer le confort des visiteurs et pour ajouter un petit "plus" interactif qui fera que votre page ne sera vraiment pas comme les autres.
Il n'est, certes, pas évident de manier ces choses-là, mais dès qu'on maîtrise un peu les scripts, on peut aller très très loin...
Assez bavardé. Vous ne voyez peut-être pas ce que les scripts peuvent donner à votre page... Et pourtant leurs possibilités sont infinies !
Tout d'abord, il faudrait savoir où insérer votre script. Ce n'est pas toujours la même chose, ça dépend du script que vous utilisez. Dans la majorité des cas, vous pouvez le mettre n'importe où dans votre code HTML (entre les 2 <body>, bien sûr).
Le tag pour insérer un script n'est pas dur à retenir, c'est <script>. Vous devez le refermer plus loin, de manière à délimiter la zone du script, comme ceci :
<script> <!--Ici se trouvera votre script--> </script>Vous devrez par la suite ajouter obligatoirement l'attribut "language". Cet attribut devra être précisé par le langage que vous utiliserez dans votre script.
Là, je pense que ça se corse. Je m'explique.
Les scripts sont des minis-langages de programmation. Oui, c'est de la programmation miniature. Ce qui veut dire que ce n'est pas à la portée de tout le monde. Si vous n'avez jamais programmé, ce qui risque fort d'arriver, vous pouvez vous rabattre sur des scripts tout prêts que proposent certaines pages web.
Quoiqu'il en soit, il faut que vous sachiez que les langages les plus connus pour les scripts sont :
Il est hors de question de vous enseigner ici un de ces langages, ce serait vraiment trop long.
Votre tag ressemblera donc à ça :
<script language="JavaScript">Ou à ça :
<script language="VbScript">
Le texte défilant
Voilà un script sympa, qui risque quand même de ralentir un petit peu votre PC (rien de bien grave).
Insérez ce code n'importe où dans votre page HTML :
<script language="JavaScript"><!--
// debut du script
var msg = "Votre texte ici !";
var espaceur = " ";
pos=0;
function defilmsg(){
window.status=msg.
substring(pos,msg.length)+
espaceur+
msg.substring(0,pos);
pos++;
if (pos > msg.length)
pos=0
window.setTimeout("defilmsg()", 200)
}
// fin du script
// --></script>
Vous pouvez remplacer "Votre texte ici !" par le texte de votre choix (c'est en haut du script).Pour faire fonctionner ce script, vous devez ajouter au tag <body> l'attribut "onload", précisé par "defilmsg()" : <body onload="defilmsg()">.
Il ne vous reste plus qu'à admirer le résultat.
Le dégradé de couleur
Un script très fun, mais plus complexe que le précédent (plus gros aussi).
Vous devez metre ce script à l'endroit précis où vous voulez voir votre dégradé de couleurs :
<script language="JavaScript"><!--
<!--
// Fading JavaScript (C)1999 Webmaster-fr - des tas de services gratuits ! -
// web : http://www.webmaster-fr.net
// e-mail : webmaster@webmaster-fr.net
// Ce script est librement utilisable. Merci de ne pas effacer ces commentaires.
var hexa = "0123465789ABCDEF";
function DecToHexa(DecNb) {
x = Math.floor(DecNb / 16);
h = hexa.charAt(x);
x = DecNb % 16;
h += hexa.charAt(x);
return h;
}
function Degrade(dr,dg,db,fr,fg,fb,texte) {
steps = texte.length;
cr = dr; cg = dg; cb = db;
sr = (fr - dr) / steps;
sg = (fg - dg) / steps;
sb = (fb - db) / steps;
for (var x = 0; x <= steps; x++) {
document.write('<FONT COLOR="#' + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb) + '">');
document.write(texte.charAt(x));
document.write('</FONT>');
cr += sr; cg += sg; cb += sb;
}
}
//-->
Degrade(0,0,255,0,255,0,"Votre texte ici !");
// --></script>
Pour personnaliser le dégradé, il faut vous pencher sur l'avant-dernière ligne (qui commence par Degrade).Il y a 6 nombres séparés par des virgules. Les trois premiers représentent la couleur du début et les trois derniers la couleur de fin.
Pour écrire vos couleurs, ils faut savoir qu'elles sont en codées en RVB (Rouge, Vert, Bleu). La première des trois représente donc le nombre de rouges (jusqu'à 255), la seconde le nombre de verts et la troisième le nombre de bleus.
Ici, c'est assez simplifié, comme vous pouvez le voir, les couleurs vont du bleu au vert. Simple, non ? A vous de créer maintenant vos propres couleurs (et vous avez le choix !).
Il ne vous reste plus qu'à remplacer le texte entre guillemets ("Votre texte ici !") par le texte de votre choix et vous aurez tout compris !
Le roll-over
Le roll-over est une technique qui permet de changer une image lorsqu'on pointe dessus. Essayez par exemple de pointer sur cette image :
Cette technique est très utilisée et permet de faire des effets sur votre page facilement. Voici comment cela fonctionne :
Dans un premier temps, copiez quelque part entre les 2 <body> le code suivant :
Surprise !
Vous allez voir qu'on a moins de tracas avec un VbScript. Celui qui fait apparaître une fenêtre au survol par exemple. Insérez ce script où vous voulez dans votre page :
<script language="vbscript"> Sub move() MsgBox "Votre texte ici !" End Sub </script>Remplacez "Votre texte ici" par le texte de votre choix. Ensuite, entourez les mots qui vont faire apparaître la boîte de dialogue par des <a>. Oui, le tag de lien va nous servir. Il faut ajouter l'attribut "onmousemove" à préciser par "move()".
Exemple :
Pointez sur le mot <a onmousemove="move()">BOUM</a> !Et le tour est joué !
La date
C'est un script ultra-simple qui montre à quel point il est facile de programmer avec VbScript. Il affiche la date et l'heure où vous voulez dans votre page. Regardez, ça fait de suite plus "pro" :
Pour cela, il suffit d'insérer le code suivant à l'endroit voulu :
Voilà. Ce n'était peut-être pas simple, mais ce n'est pas pour rien que ce chapitre est parmis les derniers.
Vous pourriez faire une recherche sur Yahoo ! par exemple, et rechercher des sites qui pourraient vous passer gratis des scripts... Désolé de ne pas pouvoir vous en dire plus, parce que ça devient un peu vaste à partir de là...
Vous pouvez aussi essayer cette adresse, vous y trouverez sûrement ce que vous cherchez en matière de scripts :
Le prochain chapitre vous parlera des successeurs du HTML, du web du futur (qui existe déjà !) et de ses possibilités. De quoi bien clôturer cet apprentissage du HTML !
