Dynamic HTML (DHTML)

• Introduction au DHTML
• Présentation des feuilles de style
• Apports du DHTML par rapport au HTML statique
• Liens utiles

Introduction au DHTML

DHTML, pour Dynamic HTML, est un nom générique qui regroupe en fait trois technologies de base utilisées pour le développement de pages clients dynamiques:

• HTML
• CSS (Cascading Style Sheets)
• JavaScript

Il ne s'agit pas d'un standard comme HTML ou XML, mais plutôt d'une terminologie englobant les différentes techniques supportées par les navigateurs web depuis Internet Explorer 5 et Netscape 4.
En pratique, le DHTML a pour but de permettre de visualiser et manipuler des pages Web uniquement sur le poste client. Cela signifie donc que cette technologie concurrence des technologies tels que les applets Java ou les ActiveX Microsoft, qui nécessitent quelques ressources serveur. DHTML n'utilise pas de plugins téléchargeables sur un serveur; JavaScript et les feuilles de style sont supportés en standard sur les navigateurs et se suffisent à eux-mêmes.

Présentation des feuilles de style CSS

Aujourd'hui, les développeurs adoptent de plus en plus les feuilles de style pour séparer plus strictement le contenu de la mise page. On peut obtenir de très beaux effets de présentation: en voici un exemple. Une feuille de style est une partie de page web spécifiant les éléments de mise en page à utiliser pour la présentation du document: styles, couleurs, polices, positionnements...
La feuille de style peut se situer dans la même page que le contenu ou bien se trouver dans un fichier séparé référencé par le contenu: on parle de feuille de style externe. L'intérêt d'utiliser des feuilles de style est qu'on peut spécifier les caractéristiques de chaque élément de la page une fois pour toutes. Avec les feuilles de style externes, on conserve la cohérence de la charte graphique pour un site complet.

Il existe plusieurs types de feuilles de style. Les Cascading Style Sheets (CSS) en sont une, applicables aux pages HTML. Pour le traitement de mise en page combiné avec XML, il existe des spécifications plus complexes, tels que les CSS2 ou encore les XSL.
Les CSS permettent de définir en une fois le style d'un élément HTML particulier comme ayant un ensemble de propriétés fixes, puis de réutiliser ces propriétés à chaque occurence de cet élément. Pour changer une propriété de l'élément, il ne faut plus rechercher toutes les occurences dans le code, mais changer l'entrée associée dans la feuille de style. Ceci présente un avantage évident pour la maintenance d'un site et pour la séparation des taches à effectuer sur un site: d'une part, le design, de l'autre le développement pour les sites faisant intervenir des équipes de plusieurs personnes.
Prenons un exemple: si l'on veut que le niveau de titre 1 d'une page HTML apparaisse en blanc, en gras, en police arial, les codes correspondants en HTML et en CSS sont les suivants:

Il faut répéter le code à chaque nouvel occurence d'un titre de niveau 1 en HTML. Avec les CSS, les caractéristiques sont fixées une fois pour toutes. Dans le corps du document, lorsqu'on place un élément de titre 1, il suffit uniquement d'indiquer la balise <H1> à l'endroit approprié.

La notion de Cascade vient de ce qu'il est possible de définir plusieurs fois une propriété pour un élément: seule la dernière est prise en compte. Ainsi, on peut par exemple définir des tableaux différemment selon l'endroit où ils se trouvent sur la page. Il peut en effet être utile que des tableaux dans le texte aient un certain aspect et que d'autres, secondaires (pour un sommaire ...) aient un autre aspect. C'est le cas pour notre site.
Pour réaliser cela, on définit plusieurs fois les tableaux dans la feuille de style et on leur associe un nom correspondant à une classe. Si une propriété particulière n'est pas définie, l'élément hérite alors de la propriété de son parent immédiat, d'où le nom de Cascade. Par exemple:

On définit une première fois les caractéristiques d'une table ayant pour caractéristiques une bordure de 1 pixel, une largeur de 200 pixels et un texte centré. La table s'appliquant à la classe menus hérite de la largeur du tableau parent "table". Par contre, on y a défini de nouvelles propriétés différentes de celles de "table". Quant à "table.sousmenus", elle hérite aussi des propriétés de son parent immédiat "table", hormis l'attribut padding qui est redéfini.

Les CSS1 sont supportés par les navigateurs Internet Explorer et Netscape depuis les versions 4. Pour les navigateurs les plus récents, une version CSS2 est aujourd'hui utilisable avec HTML et XML et permet de contrôler également le positionnement des éléments. Il devient dès lors possible de spécifier la position des objets sur l'écran: par exemple, on pourra placer une image en contrôlant sa largeur, sa hauteur, sa position par rapport au haut de l'écran et par rapport à sa gauche.

Il faut encore souligner que la pratique des feuilles de style rend non seulement le code HTML plus clair, mais permet également de ne plus abuser des tableaux comme éléments de mise en page. Les tableaux retrouvent alors leur finalité première, à savoir d'inclure des données tabulaires. Les feuilles de style permettent d'obtenir des résultats impressionnants au niveau design, mais offre également du dynamisme à une page web. L'utilisateur peut par exemple choisir lui-même l'habillage du site. Il suffit pour cela que le développeur associe plusieurs feuilles de style à son document.

Voir un exemple.
Voir un autre exemple.

Ceci peut paraître anecdotique (si on n'aime pas une couleur, on en choisit une autre), mais l'usage d'habillages différents permet d'adapter l'aspect de son site à une gamme plus large de visiteurs. En offrant l'opportunité de choisir un habillage avec des caractères plus gros, on simplifie par exemple la lecture aux gens dont la vue baisse. Un autre exemple d'application concrète peut par exemple être la projection du site dans une salle de conférence: dans ce cas, on pourra choisir un habillage plus approprié qu'un habillage blanc standard.
Par ailleurs, la présentation du document peut varier en fonction du média utilisé: selon que l'on souhaite simplement afficher la page, on charge une feuille de style ayant pour caractéristique "media: screen"; par contre, pour imprimer la page, on associe le document à une feuille de style ayant pour caractéristique "media: print". Suivant les propriétés de la feuille de style, le format d'impression pourra ne pas inclure les menus, entête, copyright ... Le document imprimé est directement mis en forme pour un affichage sur papier. Ceci résoud un problème fréquemment rencontré sur des sites utilisant des frames, où la page imprimée n'est souvent pas très agréable à lire (dépassement, affichage des menus ...).

En conclusion, pour optimiser la maintenance d'un site et pour mieux se préparer à XML, il est conseillé de passer aux feuilles de style car:

• elles introduisent une distinction plus nette entre éléments de mise en page et contenu lui-même.
• elles offrent la possibilité d'adapter la présentation à l'usage que veut en faire un utilisateur (affichage, impression, projection). La page est donc bien dynamique côté client.

Apports du DHTML par rapport au HTML statique

DHTML offre donc la possibilité de rendre une page HTML dynamique et ce, en utilisant uniquement des ressources disponibles sur le poste client, contrairement aux contrôles ActiveX ou aux applets Java qui permettent eux aussi de rendre une page dynamique depuis le poste client, mais en téléchargeant des plugins depuis un serveur. Le DHTML est au contraire directement intégré aux navigateurs récents et donc directement interprétable.

Si DHTML n'est pas un standard du Web, il résulte de la volonté des constructeurs d'offrir une solution convenable au problème de l'intégration d'éléments non HTML, mais très souvent emplyés par les développeurs, dans les navigateurs. Même si les rendus ne sont pas toujours les mêmes d'un navigateur à l'autre, le DHTML est en grande partie supporté par tous les navigateurs récents.
Cette technologie combinant des technologies éprouvées est intéressante, car elle peut s'apparenter à une étape transitionnelle vers le XML.

Liens utiles

http://openweb.eu.org/articles/initiation_css/

http://www.laltruiste.com/document.php?url=http://www.laltruiste.com/courscss/ sommaire.html

http://www.commentfaireunsite.com/site_essai/ pages_du_site/techniques/tech_dhtml.htm

http://www.allhtml.com/dhtml/dhtml43.php

http://www.webdeveloppeur.com/Ressources/dhtml.html

http://www.ccim.be/ccim328/trucs/