Introduction au D-HTML

Le terme de "page dynamique" est souvent employé pour décrire ce que les scripts serveurs sont capables de faire, à savoir générer un contenu programmé et non figé. Cependant il faut garder à l'esprit que ceux-ci ne permettentpas de générer autre chose que des documents fixes. La réalisation de pages animées en temps réel doit employer des cripts clients réalisant du HTML dynamique, ou D-HTML.

Je présente donc ci-dessus les fonctionnalités du HTML associé au JavaScript et aux feuilles de style permettant d'une part de emettre en forme ses pages au pixel près, et d'autre part d'animer le tout pour rendre vos sites plus attrayants.

Les feuilles de style

Le concept de feuilles de style est apparu en 1997 avec le browser Internet Explorer 3.0, puis s'est généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator.


Navigateurs compatibles:

Le concept de feuilles de style consiste à attribuer des caractéristiques de mise en forme à tout un groupe d'éléments. On peut par exemple décider de mettre les titres en police Arial, en vert et en italique.

On définit par un nom une caractéristique de mise en forme, il suffit ensuite de l'appeler pour l'appliquer à un texte.

On les appelle feuilles de style en cascade ("Cascading Style Sheets") car on peut en définir plusieurs, et en cas de redondance de style un ordre de priorité est donné par le browser (navigateur). Elles permettent:

Définition d'un style

C'est une chose simple à faire:

balise {propriété de style: Valeur; propriété de style: Valeur ...}

Exemple:

A {font-family=Verdana; font-size=18px; 
font-style=bold; font-color=yellow}

Incorporer les styles

Les styles peuvent être incorporés de trois manières diiférentes:

A l'intérieur des marqueurs <HEAD>

On les déclare grâce à la balise STYLE. L'attribut type="text/css" prévient qu'il s'agit de feuilles de style en cascade (c'est actuellement la seule possibilité, mais les créateurs de la norme prévoieront peut-être une extension). La balise de commentaire <--! ... --> évite que des browsers peu récents lisent ces informations.

<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
   balise { propriete de style: valeur; ... }
   ..
  -->
  </STYLE>
 </HEAD>
 <BODY>
 ...
 </BODY>
</HTML>

A l'intérieur des marqueurs <BODY>

Cette façon de définir les feuilles de style est peu courante, et peu conforme au but des feuilles de style. Cela peut néanmoins servir pour définir une exception.

<HTML>
 <BODY>
  <BALISE propriete de style: valeur; ...> ... </BALISE>
 </BODY>
</HTML>

Dans un fichier séparé

Le fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document est un "plus", car on peut, en modifiant le fichier contenant les feuilles de style, changer l'allure de toutes les pages web s'y reférant.

Ce document porte l'extension est .css et ressemble à

body       {background-image: home.gif}
LI         {font: 13px Verdana}
B          {font: 14px Verdana; font-weight: bold}
A          {font:12px Verdana; font-weight: bold;color=black;}
H1         {font: 16px Arial;font-weight: bold;color=black)
H2         {font: 14px Arial;font-weight: bold;color=black)

Pour l'utiliser dans une page web, il suffit de placer en en-tête le code

<HTML>
  <HEAD>
   <LINK rel=stylesheet type="text/css" href="style.css">
  </HEAD>

La balise <LINK> avertit le navigateur qu'il doit établir un lien

Les classes

Il peut s'avérer intéressant d'affecter différents style à un même type de balise. Pour cela on a introduit le concept de classe. La définition des classes est aussi simple que celles des styles

.classe {propriété de style: Valeur; ...}

Où classe représente le nom que vous donnez à la classe.

Pour appeler cette classe il suffit de rajouter un attribut à la balise:

 <BALISE class="nom_de_la_classe"> ... </BALISE>

Créons par exemple la classe "important" 

 .important {font-type: arial; font-color: red; font-weight: bold}

Les propriétés de style

Police
Propriété Valeur Description
font-family Police précise (Arial, Times, Verdana ...)
Famille (serif, fantasy, monospace)		 Définit un nom de police ou une famille
font-style normal, italic, oblic Définit le style d'écriture
font-weight - normal, bold, light, bolder, lighter
- valeur numérique		 Définit l'épaisseur de la police
font-size xx-small, x-small, small, medium, large, x-large, xx-large
taille en points (pt), cm, %		 Définit la taille de la police
font-variant normale, small-caps Définit une variante
font {font: bold italic} Raccourci permettant de mettre toutes les propriétés


Style
Propriété Valeur Description
text-align left, center, right Définit l'alignement du texte
text-indent en pouces (in), en cm, ou en % Définit un retrait
text-decoration blink, underline, line-through, overline ou none (clignotant, souligné, barré, surligné ou aucune) Définit une décoration
text-transform uppercase, lowercase, capitalize (majuscule, minuscule, première lettre en minuscules) Définit la casse du texte
color "#RRGGBB" Définit la couleur du texte
word-spacing En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit l'espace entre les mots
line-height En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit l'interligne
width En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit la longueur d'un élément de texte ou d'une image
height En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit la hauteur d'un élément de texte ou d'une image
white-space normal, pre, nowrap Espacement ou blanc

 

Arrière plan
Propriété Valeur Description
background-color "#RRGGBB" Définit la couleur du fond
background-image URL Définit l'image d'arrière-plan
background-repeat repeat, repeat-x, repeat-y, no-repeat Définit la fa�on de répéter l'arrière-plan
background-attachment scroll, fixed Spécifie si l'image reste fixe avec les déplacements de l'écran
background-position - top, center, bottom, left, center ou right
- En points (pt), pouces (in), en cm, en pixels (px), ou en %		 Position de l'image par rapport au coin supérieur gauche
background {background: test.jpg fixed repeat} Raccourci pour les propriétés d'arrière-plan

Marges
Propriété Valeur Description
background {background: test.jpg fixed repeat} Raccourci pour les propriétés d'arrière-plan
margin-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge supérieure
margin-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de droite
margin-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge inférieure
margin-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de gauche
margin   Raccourci pour les propriétés de marge

Bordures
Propriété Valeur Description
border-top-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord supérieur
border-right-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord droit
border-bottom-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord inférieur
border-left-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord de gauche
border-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Raccourci vers les propriétés d'épaisseur de trait
border-color "#RRGGBB" Couleur de la bordure
border En points (pt), pouces (in), en cm, en pixels (px), ou en % Raccourci vers les propriétés de bordure
padding-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord supérieur
padding-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord droit
padding-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord inférieur
padding-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord gauche
padding   Raccourci vers les propriétés d'écartment

Listes
Propriété Valeur Description
list-style-type disc, circle ou square Type de puces et de numérotation
list-style-image URL Permet de remplacer les puces par une image
list-style-position inside ou outside Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
list-style   Raccourci vers les propriétés de liste

Identifier les éléments d'une page HTML

Dans la plupart des balises du HTML, une propriété id permet de nommer les objets créés. Cet identificateur en fait des objets au sens JavaScript du terme. Il est ensuite aisé d'accèder à leurs propriétés et de les modifier à loisirs à l'aide de scripts. 

<script>
 function survole() {test.bgColor='#dddddd'; }
</script>
<table>
 <tr><td id=test onmouseover="survole()">Survolez moi</td></tr>
</table>

Utilisation des ID avec les feuilles de style

De même, il est possible d'identifier les styles à l'aide de la propriété ID.

La syntaxe est alors

#nom_ID { propriété de style: Valeur; ...}

On l'appelera de la manière suivante

<BALISE ID="#nom_ID" > ... </BALISE>

On ne peut faire appel qu'à un seul même ID par page!

Les calques DIV et SPAN

Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <SPAN> et <DIV>

Balise SPAN

La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS.

Sa syntaxe est la suivante

<SPAN class=important> Texte </SPAN>

Balise DIV

L'idée est la même pour la balise DIV, cependant au lieu de s'appliquer à quelques mots dans un paragraphe, elle s'applique sur plusieurs paragraphes.

Sa syntaxe est la suivante

<DIV class=important> paragraphes </DIV>

Notion de couche

Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres:

En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments HTML pouvant être superposés à l'écran comme des carrés de papier calque et pouvant être déplacés séparément (chaque calque est repéré par un identifiant unique que l'on définit comme attribut) dans la fenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de superposition des calques, c'est-à-dire quel calque se trouve au-dessus des autres...

Les balises permettant de constituer des couches que nous étudierons sont les balises SPAN et DIV. (LAYER n'étant pas compatbile Internet Explorer)

La balise DIV

Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page (d'où la notion de HTML dynamique).

Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.

Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse et montre encore quelques problèmes de compatibilité

Positionnement relatif et absolu

Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur, ou du bloc DIV conteneur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

La position relative se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

La syntaxe des balises DIV et SPAN est la suivante:

<DIV style="position: absolute; top: 99 px; left: 99 px; 
            visibility : visible;z-index : 2;">

 éléments HTML
 ...
 éléments HTML

</DIV>

Positionner du texte

Positionnons le texte "Comment ça marche?" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre: 

<HTML>
 <BODY>
  <SPAN style="position: absolute; top: 80 px; left: 100 px;">
   Comment ça marche?
  </SPAN>
 </BODY>
</HTML>

Il y a d'autres façons de procéder, en voici une: 

<HTML>
 <HEAD>
  <STYLE>
  <!--
   .test{position: absolute; top: 80px; left: 100px; color: black;
         font-size: x-large}
  -->
  </STYLE>
 </HEAD>

 <BODY>
  <DIV class=test>
   Comment ça marche?
  </DIV>
 </BODY>
</HTML>

Positionner une image

Positionnons l'image "test.jpg" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image fait 103x61): 

<HTML>
 <BODY>
  <SPAN style="position: absolute; top: 80 px; left: 100 px;
               width: 103px; height: 61px">
   <IMG SRC="test.jpg" >
  </SPAN>
 </BODY>
</HTML>

Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.

Superposer des éléments

Superposons le texte "Comment ça marche?" à l'image "test.jpg": 

<HTML>
 <BODY>
  <SPAN style="position: absolute; top: 30 px; left: 80px;
               width: 103px; height: 61px">
   <IMG SRC="test.jpg" >
  </SPAN>

  <SPAN style="position: absolute; top: 50 px; left: 80 px;">
   Comment ça marche?
  </SPAN>
 </BODY>
</HTML>

Il est ainsi possible de superposer des éléments de texte, ainsi que des images.

Syntaxe des balises

LAYER
Propriété Valeur Description
name chaine de caractère Définit un identifiant unique pour la couche
left valeur numérique entière distance en pixel à la bordure gauche
top valeur numérique entière distance en pixel au haut de la page

 

DIV et SPAN
Propriété Valeur Description
position static
absolute
relative

Aucun mouvement par rapport au document
Positionnement par rapport au document
Par rapport à l'élément précédent

left auto
valeur numérique entière
valeur en pourcentage (%)

Distance à la bordure gauche automatique
Distance à la bordure gauche en pixels
Distance à la bordure gauche en pourcentage
top auto
valeur numérique entière
valeur en pourcentage (%)

Distance au sommet automatique
Distance au sommet en pixels
Distance au sommet en pourcentage
width auto
valeur numérique entière
valeur en pourcentage (%)

Largeur automatique
Largeur de l'élément en pixels
Largeur de l'élément en pourcentage
height auto
valeur numérique entière
valeur en pourcentage (%)

Hauteur automatique
Hauteur de l'élément en pixels
Hauteur de l'élément en pourcentage
overflow visible
hidden
auto
scroll

Affiche le contenu même s'il est trop grand
Cache le contenu superflu
Automatique
Affiche des barres de défilement
clip auto
bottom
left
right
top

Découpage automatique
Découpage en bas
Découpage à gauche
Découpage à droite
Découpage en haut
visibility inherit
hidden
visible

Visibilité par défaut
Caché
Visible
z-index auto
valeur numérique entière

Superposition automatique
Valeur indiquant la profondeur

Les événements

Comme on l'a vu, l'intérêt des styles et des calques, outre de permettre un positionnement au pixel près et une mise en forme efficace des pages web, est d'autoriser l'accès en écriture à un grand nombre de propriétés accessibles. Il devient donc possible de réalser des animations et effets graphiques en tout genre, via JavaScript. Le modèle événementiel des pages web permet de réagir à de nombreuses actions de l'utilisateur. Les possibilités offertes sont les suivantes:

Nom Objet affecté Description de l'événement
onAbort images arrêt de chargement (bouton stop ou clic sur un lien).
onBlur fenêtres, éléments de formulaire fermeture de la fenêtre ou annulation d'un formulaire
onChange texte, liste de sélection changement de sélection
onClick boutons, boutons radio ou liens clique sur un élément
onDragDrop fenêtres pose d'un élément à l'intérieur de la fenêtre du navigateur
onError images, fenêtres erreur au chargement de l'image ou de la fenêtre
onFocus fenêtres, éléments de formulaire sélection de la fenêtre ou de l'objet formulaire
onKeyDown documents, images, liens, zones texte appuie d'une touche du clavier
onKeyPress documents, images, liens, zones texte maintient appuyé d'une touche du clavier
onKeyUp documents, images, liens, zones texte relachement d'une touche du clavier
onLoad documents chargement d'un document
onMouseDown documents, boutons, liens clique avec la souris
onMouseMove rien déplacement de la souris
onMouseOut cartes, liens le pointeur de la souris sort d'une zone graphique ou d'un lien
onMouseOver liens le pointeur de la souris passe sur un lien
onMouseUp documents, boutons, liens un bouton souris est relaché
onMove fenêtres l'utilisateur ou un script bouge une fenêtre
onReset formulaires réinitialisation d'un formulaire
onResize fenêtres changement dela taille d'une fenêtre
onSelect champs ou zones de texte sélection d'une zone ou d'un champ texte
onSubmit formulaire envoi d'un formulaire
onUnLoad documents on quitte un document

Animations

Le principe

L'animation des éléments présents sur une page Web se fait en modifiant leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en utilisant leur méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript permettant de modifier les propriétés des éléments suite à des événements utilisateurs (clic sur la souris, déplacement de la souris, ...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).

Le Document Object Model (DOM)

Le Document Object Model est un principe consistant à représenter le navigateur et le document qui y est affiché comme une hiérarchie d'objets possèdant des propriétés intrinsèques et auxquels ont peut accéder en décrivant la hiérarchie qui mène à chaque objet.

Toutefois, le Document Object Model ayant été implémenté de manière "sauvage" dans les deux navigateurs concurrents (ie Netscape et Internet Explorer), la hiérarchie et les propriété diffère quelque peu entre les deux browsers.

Propriétés modifiables

Selon que l'on utilise Internet Explorer ou Netscape, la façon d'accèder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire du script le type de navigateur utilisé, puis adapter la notation en fonction...).

Voici un petit aperçu des actions réalisables en DHTML et la façon de les effectuer sur les deux navigateurs

Netscape Navigator
Modifier l'image de fond document.layers.nom.background
Modifier la couleur du fond document.layers.nom.bgColor
Modifier le clipping document.layers.nom.clip
Modifier le contenu document.layers.nom.open();
document.layers.nom.writeln();
Modifier la distance à gauche document.layers.nom.left
Accéder au nom objet.name
Modifier la visibilité document.layers.nom.visibility
Modifier la distance au haut document.layers.nom.top
Modifier le z-index document.layers.nom.zIndex

 

Internet Explorer
Modifier l'image de fond document.all.nom.style.backgroundImage
Modifier la couleur du fond document.all.nom.style.backgroundColor
Modifier le clipping document.all.nom.style.clip
Modifier le contenu document.all.nom.innerHTML
Modifier la distance à gauche document.all.nom.style.left
Accéder au nom objet.id
objet.name
Modifier la visibilité document.all.nom.style.visibility
Modifier la distance au haut document.all.nom.style.top
Modifier le z-index document.all.nom.style.zIndex

Pour conclure, il faut bien voir que les concepts de base sont simples mais que pour réaliser de beaux effets une bonne connaissance de JavaScript peut s'avérer nécessaire. Ci-dessous en téléchargement des documentations trouvées sur la toile.

Télécharger Télécharger la doc sur JavaScript