Les normes de codification sur le Web :
Le Dynamic Html :
|
1. Définition :
Le Dhtml (Dynamic HyperText Markup Language) n’est pas à proprement parler UNE norme pour Internet, mais il s’agit d’un ensemble de technologies Internet associées permettant de fournir des pages Html plus intéractives.
Le Dhtml permet de modifier le contenu des pages Html grâce à des événements (mouvements de souris, survol d’un lein par le curseur,..) après que la page en question ait été chargée.
2. Les composantes de la technologie Dhtml :
Le Dhtml est une combinaison de trois technologies : Les feuilles de style (CSS), le JavaScript et la version 4 de la norme Html (Html 4).
Les feuilles de style (Cascading Style Sheet) : permettent de gérer les balises de mise en forme d'un document Html.
Le JavaScript : c'est un langage de programmation permettant d'intégrer des scripts (petits programmes) dans une page Html pour la rendre plus interactive.
La norme html 4 : La nouvelle version de la norme html intègre des nouveaux concepts tels que :
-
Le Document Object Model (DOM) : Chaque élément d'une page Html (paragraphe, image,..) est considéré comme un objet possédant son propre nom et ses caractéristiques.
Ainsi, l'objet peut être utilisé dans
un script, par l'intermédiaire de son nom.
Exemple :
<IMG SRC="photo.gif" ID="ma photo">
L'attribut ID permet de donner un nom identificateur à la balise IMG : Ceci donne la possibilité de manipuler l'image en l'appelant par son nom.
-
Les layers (couches) : Elles sont utilisées pour pouvoir positionner, remplacer ou superposer à un contenu existant dans une section de la page. Les couches peuvent être programmées pour apparaître au bout d'un temps prédéfini ou par l'intéraction de l'utilisateur.
3.L'utilisation des calques :
Il s'agit de balises Html spéciales permettant de définir l'emplacement d'un objet grâce à un ensemble d'attributs telsque :
- TOP :
- La postition par rapport au haut du navigateur ;
- LEFT :
- La position par rapport à la bordure gauche du navigateur ;
- WIDTH :
- La largeur ;
- HEIGHT :
- La hauteur ;
- Z-INDEX :
- définit l'ordre de superposition des calques, c'est à dire quel calque se trouve au-dessus des autres.
Ces attributs sont associés à la balise <DIV>
Il faut signaler, qu'avec la balise <DIV>,il existe deux façons de définir la position d'un objet :
-
Position relative : calculée à partir de la position de l'élément précédent (dont la balise de fin n'a pas été atteinte).
Exemple :
<DIV STYLE ="position :absolute ;TOP : 100 px ; WIDTH : 300 px ; HEIGHT ; 200px">
Texte de référence
<DIV STYLE="position : relative ; TOP; 20px ; LEFT : 20px;
COLOR: red">
Texte décalé de 20 pixels à droite et 20 pixels en bas par rapport au texte de référence
</DIV>
</DIV>
-
Position absolue : Se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur . Les coordonnées de ce point sont TOP = 0 et LEFT = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour TOP et de gauche à droite pour LEFT.
Exemple :
<DIV STYLE ="position : absolute ; TOP : 100 px ; WIDTH ; 300 px ;height : 200px">
TEXTE
</DIV>
4.La compatibilité entre navigateurs :
A partir de la version 4, Internet Explorer et Netscape intégent le support du DHTML. Donc, il est préférable de mentionner l'exprésion suivante sur la page d'accueil de votre site : "Site optimisé pour la version 4 de Netscape ou Internet Explorer".
Néanmoins, il faut signaler qu'il y a des balises spécifique à chacun des 2 navigateurs : Donc l'utilisation d'un code cross-browser, c'est à dire qui fonctionne sous les deux navigateurs, est fortement conseillé.
|
|
|
