Présentation du DHTML

Bon, c'est bien beau tous ces noms de langages, mais concrètement qu'est ce que le DHTML? Rappelons-nous 2 minutes les premiers chapitre du cours php du Site du ZérO. Pour ceux qui ne l'ont pas lu, je vais vous faire un topo.

Lorsque quelqu'un lance une adresse dans son navigateur, il se passe 3 choses, grossièrement. Une requête est envoyée au serveur, le serveur génère les codes dits "serveur" qui sont compilés, et affichent ce qu'il y a à afficher ; enfin, la page ainsi générée est envoyé au visiteur. On comprend donc que même si des langages "serveurs" tels que le php, le Perl, le cgi ou d'autres sont "dynamiques", ce n'est que lorsque la page est générée.

Le DHTML, permet de rendre le HTML (dans sa forme post-générée, c'est-à-dire après génération) Dynamique. N'avez-vous jamais rêvé de pouvoir transformer une balise h1 en balise h2, de faire apparaître, ou disparaître toute une partie de vos pages sans que le visiteur n'ait à recharger la page ?

Vous devez vous demander comment nous allons pouvoir faire ça. C'est là tout le but de ce cours. Je vais devoir vous parler des bases sur lesquelles reposent une telle technologie.

Mais tout d'abord je vais vous exposer quelques exemples de ce que l'on peut faire avec de tels outils.

Alors, que peut-on faire en rendant dynamique notre code HTML ?

Eh bien je vais reprendre les quelques exemples qui serviront d'exercices à ce cours pour que vous gardiez à l'esprit notre but final.

Donc, tout d'abord, le DHTML va nous permettre de réagir à certaines actions de l'utilisateur. Par exemple, sur cette page, nous allons pouvoir afficher un image selon la position du curseur. S'il est au dessus de "Français", le drapeau français apparaîtra ; et s'il est au-dessus de "English", c'est le drapeau anglais qui apparaîtra. Ce qui nous donne pour une même page internet (sans rechargement!!) :





Mais ça ne s'arrête pas à ce genre de choses. On peut aussi interagir avec des formulaires (qui représentent un bon support pour l'apprentissage du DHTML). Par exemple, on peut avoir un formulaire complètement dynamique comme sur cet exemple.

Il existe tout de même un inconvénient à cette technologie : vous ne direz pas que je vous ai caché quelque chose . Il faut bien comprendre qu'on ne crée pas un site en DHTML. Un site s'écrit en HTML. Le DHTML est là pour rendre certains composants plus agréables à utiliser ou plus esthétiques. Mais il faut toujours penser à ceux qui n'activent pas le javascript sur leur ordinateur (même si le javascript ne présente aucun risque, c'est leur choix). Il faut donc toujours créer une alternative dans le cas où le DHTML rend un site plus pratique pour que tout le monde puisse accéder à ces fonctionnalités.

En conclusion de ce petit chapitre, le DHTML permet d'afficher, de supprimer, de modifier des informations sur votre page, en relation avec ce que fait votre visiteur. On pourrait imaginer un champ pays qui, quand on clique dedans, affiche une liste de petits drapeaux qui, quand on clique dessus, affiche le pays correspondant dans notre champ. Mais tout ça n'est qu'un aperçu... Après ce tuto, les limites ne seront que votre imagination.