BUSI 2423 Lecture Notes - Lecture 18: Standard Generalized Markup Language, Xml, Chapeau
3 Jun 2018
School
Department
Course
Professor
DHTML ou le Html dynamique
1. Définition du DHTML
1.1 Introduction ou ... au risque de vous décevoir
Ne cherchez pas de syntaxe ou de références DHTML, vous n'en trouverez pas. Le DHTML n'est pas un
langage de balises, de scripts ou de programmation. Le DHTML n'est pas une quelconque spécification. Il n'est
même pas réellement une technologie! Tout simplement,
le DHTML ou Html dynamique est, et reste, du Html
où le concepteur a mis l'accent sur les animations.
A l'heure de l'importance croissante de l'impact visuel des sites Internet, le Html dit dynamique est un "plus"
incontestable et génial sous certains aspects. Mais il faut raison garder! Le DHTML n'est pas le "futur de
l'Internet" comme le prétendent certains mais, à n'en pas douter, il y aura certainement une bonne place.
Bien que peut-être excessifs, je suis même tenté de reproduire les mots de Sally Khudairi [à vos souhaits!] du
World Wide Web Consortium (W3C) : "DHTML is nothing more than a marketing term for generic animation
and manipulation of multimedia events" (DHTML n'est rien d'autre qu'un terme de marketing pour des
animations et des effets multimédia).
1.2. Définition
Le DHTML se définit comme un (savant) mélange de trois développements de la publication sur Internet : les
feuilles de style (CSS1), les langages de script, principalement le Javascript, ainsi que les objets et leur
positionnement en vue de produire des pages dynamiques et interactives.
Ajoutons car cela n'apparaît pas dans la définition :
• l'aspect dynamique réside dans le fait que la page Html peut être modifiée après le chargement de celle-ci
par le navigateur.
• une volonté d'effectuer les animations et interactions côté client (c-à-d côté browser) sans faire appel aux
ressources du serveur par des applets Java ou des ActiveX.
• cette technique DTML a un aspect "high-tech" et est réservée aux versions 4.0 (ou plus) de Internet
Explorer et Netscape.
1.3. Les feuilles de style
Popularisée par Microsoft avec Internet Explorer 3.0 (bien qu'elles existaient déjà sous d'autres systèmes), les
feuilles de style [Cascading Style Sheets] constituent un réel développement dans la conception de pages Web,
en séparant la mise en forme du contenu, en proposant des possibilités jusque là inédites en Html strict , etc..
Le concept des feuilles de style est maintenant un standard depuis son officialisation par le Word Web
Consortium sous la norme CSS level 1 et son intégration dans le Html 4.0. Et les versions 4.0 de Microsoft
Explorer et Netscape Navigator reprennent déjà largement les feuilles de style.
Pour une étude plus poussée, les feuilles de style sont largement abordées dans ce site (www.ccim.be/ccim328/
htmlplus/idxstyle.htm).
1.4. Les langages de scripts (surtout Javascript)
Introduit par Netscape avec Navigator 2.0, Javascript a bien mûri au fil des versions 3.0 et 4.0 des browsers de
la marque (Javascript 1.1, Javascript 1.2). Enfin repris efficacement par Microsoft sous Explorer 4.0, ce
langage de scripts s'est définitivement imposé comme un élément incontournable dans l'élaboration de sites
Internet.
Javascript permet de programmer et d'exécuter, côté client c-à-d côté browser et donc sans faire appel à des
ressources extérieures, de petites applications à l'intérieur de pages Html. Sans être un véritable langage de
programmation, Javascript en possède toutes les fonctionnalités ou presque).
VBscript fait également partie des langages de scripts qui peuvent être utilisés dans le DHTML. Mais
propriétaire Microsoft, il n'est que peu utilisé en DHTML au détriment de Javascript.
Javascript est aussi un standard Internet depuis la norme ECMA Script. En outre, le Html 4.0 le reprend
largement.
Pour vous guider dans l'apprentissage de ces deux langages de scripts, "Apprendre le Javascript"
(www.ccim.be/
ccim328/js/index.htm) et "Apprendre le VBscript" (www.ccim.be/ccim328/vb/index.htm) du même auteur, sont
à votre disposition.
1.5. Les objets et leur positionnement
L'héritage du Html, à l'origine conçu pour faire transiter du texte structuré, est parfois pesant. Positionner
précisément, au pixel près, un texte ou une image, tourne vite au cauchemar. De là est née l'idée d'introduire
une sorte de cadre, de rectangle dans lequel on pourrait "encapsuler" des "objets" comme précisément du texte,
des images ou tout autre élément.
Comme s'est souvent le cas dans l'histoire de la publication sur Internet, nos deux compères Microsoft et
Netscape, se sont attelés à la tâche (sans attendre un quelconque standard) et ce en suivant des modèles
différents pour cette insertion d'objets dans les documents Html.
Microsoft fournit un accès aux éléments des pages Html par "ses" feuilles de style (CSS-P). Netscape a choisi
un modèle d'insertion d'éléments qui lui est spécifique par le concept de "layer" et sa collection de balises. On
se retrouve donc avec deux technologies distinctes pour une même approche.
Le W3C tente de réunir de réunir les deux précédentes technologies pour les faire fonctionner ensemble. C'est
le DOM [ Document Objet Model ]. Cette tentative est encore à ce jour (septembre 98), un document de travail
et l'on reste donc encore dans l'attente d'un véritable standard.
Cette lacune ouvre la porte aux problèmes de compatibilité pour les applications DHTML selon quelles soient
traitées par Netcape 4.0 ou par Explorer 4.0.
1.6. Déceptions
Si visuellement et techniquement, le DHTML est quelque chose de tout à fait génial, on ne peut qu'être un peu
déçu :
• par son manque (actuel?) de compatibilité. Un DHTML qui fonctionne pour IExplorer 4.0 ne tourne que
très rarement sous Netscape 4.0. Si le Webmaster est gentil, il aura bien prévu une petite remarque du genre
"Il vous faut le browser X". Mais je fais toujours partie de ceux qui n'ont pas de bol et emploient justement
le browser Y.
• par sa complexité. Tout en tirant mon chapeau aux concepteurs de DHTML, le Html dynamique n'est pas du
tout à la portée d'un débutant et n'est même plus à la portée d'un hobbyiste, fut-il averti. Il faut connaître
sous le bout des doigts, trois techniques : le Html, le Javascript et les feuille de style. Ce qui n'est pas à la
portée du premier
• Webmaster venu. A vos cours de programmation... ou à votre "copier/coller" (en respectant le copyright).
• par son temps de chargement plus important bien qu'il ne soit en rien comparable avec la vitesse d'escargot
des applets Java.
• par son risque réel de faire planter le browser et même la machine si l'application DHTML est mal écrite.
1.7. Espoirs
Mais terminons par une note positive car :
• le concept DHTML (Feuilles de style - Javascript - Objets) est bien né et n'est pas remis en cause par les
actuels problèmes de compatibilité.
• le DHTML est encore jeune et les développeurs ne peuvent que, dans un avenir proche, trouver de nouvelles
astuces pour améliorer cette compatibilité.
• après les versions 4.0, Microsoft et Netscape sortiront leurs versions 5.0... Et celles-ci intégreront (peut-être)
une gestion commune des objets.
2. Positionner avec Netscape
par la technique des couches [layer]
2.1.La balise <LAYER>
Netscape propose depuis sa version 4.0, une technique pour positionner des éléments. C'est la technique des
couches ou des "layers". On peut comparer ces layers aux transparents que l'on utilise avec les rétroprojecteurs.
La syntaxe est :
<LAYER name="nom" left=x top=y> ... élément ... </LAYER>
La balise <LAYER> va demander au browser de réserver une sorte de petit rectangle - vide - ou une sorte de
container dans lequel on va placer un élément, par exemple une image.
Il sera indispensable de donner un nom au "layer" lorsque plusieurs sont utilisés dans une même page ou un
même document.
Les attributs "left" et "top" vont positionner cette zone par rapport au coin supérieur gauche de la fenêtre du
browser. Top est la valeur en pixels du haut vers le bas et left, la valeur en pixels de la gauche vers la droite.
Le browser va afficher les layers et leur contenu quoiqu'il arrive! Idéal pour créer selon vos désirs des effets de
superpositions. Idéal aussi pour avoir des superpositions inattendues...
La tag <LAYER> est un tag propriétaire de Netscape 4.0 qui n'a pas été repris par Microsoft. "LAYER" ne
fonctionne donc pas sous Eplorer 4.0 et uniquement sous Netscape. Comme les feuilles de style qui permettent
aussi de positionner des éléments, sont reprises et par Explorer 4.0 et par Netscape 4.0, cette dernière technique
est recommandée pour des raisons de compatibilité.
