DHTML: codage Web dynamique

• Avril 30, 2024

DHTML signifie réynamique HyperText MArkup Language et peut être défini comme l'art de rendre les pages Web HTML dynamiques en combinant HTML avec Javascript et feuilles de style en cascade (CSS). Contrairement aux quatre autres variantes HTML étudiées dans les quatre articles précédents de cette série, DHTML n'est pas une norme définie par le consortium W3. Il s'agit plutôt d'un "terme marketing utilisé par Netscape et Microsoft pour décrire les nouvelles technologies que les navigateurs de génération 4.x prendraient en charge" (W3 Consortium). HTML 4.0 a d'abord introduit deux composants importants qui sont inhérents à la structure de DHTML:

• Feuilles de style en cascade (CSS)
• Modèles d'objet de document (DOM)

Dynamiser votre code

CSS fournit des modèles de style et de mise en page tandis que DOM fournit des modèles de contenu de document pour les documents HTML. JavaScript et VBScript ajoutent la possibilité d'écrire du code de script pour contrôler les éléments HTML. Ensemble, ces trois composants s'ajoutent aux pages HTML dynamiques. Un élément dissuasif majeur est l'incompatibilité des navigateurs - Netscape et Microsoft ne sont toujours pas d'accord sur ce qu'il faut implémenter dans leurs navigateurs: ainsi, écrire des pages DHTML qui fonctionnent bien dans les deux navigateurs peut être délicat. Pour voir par vous-même, vous pouvez accéder aux normes Microsoft et Netscape en ligne:

• Bibliothèque MSDN chez Microsoft
• HTML dynamique dans Netscape Communicator

"DHTML excelle dans la création d'effets à faible bande passante qui améliorent la fonctionnalité d'une page Web. Il peut être utilisé pour créer des animations, des jeux, des applications, fournir de nouvelles façons de naviguer à travers des sites Web et créer des mises en page de page hors du commun qui ne sont tout simplement pas n'est pas possible avec seulement HTML. Bien que de nombreuses fonctionnalités de DHTML puissent être dupliquées avec Flash ou Java, DHTML fournit une alternative qui ne nécessite pas de plugins et s'intègre de manière transparente dans une page Web. "(Dan Steinman, 1998).

Afin de comprendre les complexités de DHTML, il est utile d'examiner ses composants plus en détail.

Feuilles de style en cascade

Les CSS sont des codes sophistiqués qui séparent le contenu Web du contenu Web - le style, le positionnement, les couleurs, les polices, etc. CSSP ou CSS Positioning permet un contrôle au niveau des pixels sur le positionnement des éléments HTML. La séparation du style de présentation des documents Web du contenu avec CSS2 (CSS niveau 2) simplifie la création Web et la maintenance du site. "CSS2 prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux appareils auditifs, aux imprimantes, aux appareils braille, aux appareils portatifs, etc. Cette spécification prend également en charge le positionnement du contenu, les polices téléchargeables, la disposition des tableaux, les fonctionnalités pour internationalisation, compteurs et numérotation automatiques, et quelques propriétés liées à l'interface utilisateur "(W3 Consortium). Le W3C offre un excellent tutoriel pour apprendre CSS2 appelé, Spécification CSS2.

Javascript

JavaScript est un langage de navigation par script spécial utilisé pour contrôler les éléments HTML et ajouter des fonctionnalités aux formulaires, cadres, fenêtres, survols d'image, contrôles audio-vidéo et manipuler DHTML. Netscape a d'abord appelé ce script JavaScript, alors Microsoft a proposé le terme, JScript, pour sa marque particulière de script. Le résultat? Deux versions de JavaScript qui peuvent être ennuyeusement incompatibles. Pour explorer davantage ce problème, visitez le site de Netscape JavaScript Central et de Microsoft JScript page de ressources. Le secret des effets dynamiques du contenu JavaScript est l'utilisation d'objets de calque. Les objets de calque modifient le texte lorsque la souris le fait défiler; il fait déplacer des images ou du texte sur la page Web; il fait également dérouler les menus déroulants. Les objets de calque sont organisés en balises div, avec des caractéristiques telles que la couleur, la position et la visibilité.

Les assembler

DHTML est généralement appliqué pour réaliser trois tâches:

• Position ou placer des blocs de contenu sur la page et les déplacer
• Modifications de style qui changent l'apparence de la page
• Gestion des événements ou relier les événements utilisateur à des changements de positionnement ou à d'autres modifications de style

Dans les nouvelles versions d'Internet Explorer et de Netscape (versions 5, 6 et supérieures), le DOM devient le code de choix pour la plupart des codages DHTML. Une fois maîtrisé, le DOM peut aider les concepteurs Web à manipuler, ajouter, supprimer et modifier le codage des documents liés à tous les styles, attributs (tels qu'un href) et éléments (tels que les balises html) sur la page. Cela signifie que chaque balise et attribut commun à un document html est accessible via le DOM. Actuellement, les niveaux de modèle d'objet de document 0 et 1 sont recommandés par le W3C. Le niveau 2 est également en préparation, mais n'a pas encore été promu comme standard pour le codage DHTML.

Un groupe utile de tutoriels est disponible via HTML Goodies, appelé Tutoriel DHTML et Layer.

Les liens inclus dans cet article proposent des introductions et des procédures pour commencer votre voyage dans la maîtrise de ce nouveau développement en codage html.Toute recherche rapide sur Google apportera de nombreuses autres ressources à votre attention, facilement accessibles à portée de main. Alors que les fabricants de navigateurs travaillent sur leur incompatibilité et que l'utilisation de navigateurs de version supérieure devient plus courante, DHTML deviendra une partie obligatoire de l'itinéraire de tout concepteur professionnel.

Série d'articles en surbrillance HTML

PARTIE 1: Un designer crédible doit-il connaître le HTML?
PARTIE 2: HTML 3.2 - La naissance de Wilbur
PARTIE 3: HTML 4.0 ET 4.01 - Plus d'une bonne chose!
PARTIE 4: XHTML: codage Web pour une conception raffinée
PARTIE 5: DHTML: codage Web dynamique

Instructions Vidéo: Write a code to display any animation using dhtml?? rgpv (Avril 2024).