HTML et DHTML Valid XHTML 1.1Cette page est conforme à la norme CSS!Mise à jour 02-2002
SOMMAIRE

Présentation
Les exemples détaillés
De Html 3 à Html 4
Les outils et liens
Télécharger les exemples
PRESENTATIONRetour en haut de page

Le langage abordé ici est le HTML et surtout le DHTML, qui permet d'ajouter de l'interactivité aux pages. Il est constitué de fonctions écrites en JavaScript ou en VBscript.

Son domaine d'application est varié :

  • images s'animant lorqu'on passe la souris dessus
  • affichage de données dynamiques (date et heure par exemple)
  • animation simple
  • traitement immédiat des données par le navigateur, sans passer par un serveur (ex: vérifier qu'un champ est rempli, calculer un montant, etc...)

LES EXEMPLES DETAILLESRetour en haut de page

HTML - Mise en page avec des tables   Voir le résultatSuiv.

Pour obtenir une mise en page correcte, la meilleure solution est d'utiliser les tables; en imbriquant celles-ci, on parvient à disposer les différents éléments les uns par rapport aux autres de manière voulue.

En indiquant des tailles en %, le rapport entre les différentes cellules est respecté et l'ensemble garde la même apparence.

Cette solution remplace souvent les frames, qui notamment ne sont pas gérés par tous les navigateurs et posent des problèmes de référencement du site.

L'exemple classique est le dessin d'une page principale, composée d'un bandeau horizontal, sous lequel on trouve un menu vertical sur la partie gauche et une zone réservée aux différentes pages. dans la partie droite.
Dans cette dernière on présente des pages qui peuvent elles aussi être constituées de tables, tout ceci indépendamment les unes des autres, ce qui facilite énormément la programmation, surtout en utilisant des outils plus évolués comme Asp et Php.
Si l'on a besoin de présenter dans une cellule des données sous des formats différents, il est aisé d'ajouter dans cette cellule une table qui fera le découpage nécessaire.

Voir le résultat


DHTML - JavaScript   Voir le résultatPréc.Suiv.

Cet ensemble de pages permet d'exploiter plusieurs possibilités de DHTML avec des scripts écrits en Javascript

  • la page d'accueil

    3 cadres organisent l'écran en bandeau de titre, menu et zone réservée aux pages.
    Sur le menu, le passage de la souris sur les textes modifie leur apparence (couleur et police), en utilisant les styles intégrés dans la feuille. Des infos-bulles apparaissent lorsque le curseur reste sur une ligne.
    Au bas du menu, s'affiche l'heure en temps réel, par l'utilisation d'un timer qui relance l'affichage régulièrement.
    Dernier point, l'affichage de l'heure nécessite une technique particulière pour identifier la zone de sortie, car celle-ci n'est pas une simple zone de formulaire.
  • le jeu des cases

    On dispose de 9 cases disposées en carré. Chaque case peut être rouge ou verte. En cliquant sur une case, on change sa couleur ainsi que celle de ses voisines, tout ceci dépendant de la position de la case cliquée. Le but est d'obtenir toutes les cases vertes sauf celle du centre.

    Les fonctionnalités utilisées sont les suivantes :

    . accès à des zones quelconques de l'écran (cases et score)
    . fonctions de date et heure pour déterminer un délai
    . tirage aléatoire de nombres pour déterminer la combinaison initiale
    . traitement d'un bouton pour commencer une nouvelle partie
    . scrolling vertical de l'écran
  • les proverbes

    Affiche, à chaque clic sur le bouton, un proverbe tiré au hasard dans un tableau de caractères.
  • l'animation

    Basée sur un timer, cete page déplace un point rouge à l'écran, affiche du texte avec un effet d'apparition (police de plus en plus grande), puis fait clignoter la couleur du texte.
  • le menu dynamique

    Ce menu présente ses options sous forme d'une hiérarchie, comme le gestionnaire de fichiers. En cliquant sur le +, le détail de la ligne apparaît; - le fait disparaître. De plus, lors du passage de la souris sur une ligne, celle-ci se met en évidence par un changement de sa couleur de fond (surlignage).
    Le traitement est réalisé grâce à l'accès direct aux divers éléments HTML composant la page; pour ce faire, ces composants sont isolés dans des balises DIV et SPAN.
Voir le résultat


DHTML - VBScript (1)   Voir le résultatPréc.Suiv.

Cet ensemble de pages reprend strictement les mêmes applications que les exemples Javascript, mais en VBscript cette fois. On voit combien ces langages sont équivalents, à la différence que Java est supporté sur tous les navigateurs (attention cependant aux versions), au contraire de VB qui n'est connu que de IE.

Voir le résultat


DHTML - VBscript (2)   Voir le résultatPréc.

Cet ensemble de pages permet d'exploiter plusieurs possibilités de DHTML avec des scripts écrits en VBscript.

La page présente 2 applications :

  • le jeu des cases

    La particularité de cette version et d'utiliser des controles activeX pour représenter les cases avec des boutons classiques Windows, dont on change les propriétés au cours du traitement.
    Ces objets externes remplacent les objets fournis en standard par le langage HTML et possèdent généralement plus de propriétés, permettant ainsi des présentations un peu plus sophistiquées.
  • le javanais

    Le javanais est un jeu avec des mots, qui transforme un mot en ajoutant AV entre une voyelle et une consonne; ainsi BONJOUR devient BavONJavOUR.

    C'est surtout l'occasion de manipuler des valeurs entrées par l'internaute et de lui fournir un résultat après un calcul quelconque.
Voir le résultat

DE HTML 3 A HTML 4Retour en haut de page

Règles générales

La norme HTML4 est plus rigoureuse que les normes précédentes; ceci assure une meilleure compatibilité entre différents navigateurs, dans la mesure où ils respectent la norme, en excluant les particularités de langage.

L'objectif, comme pour le XML, est d'arriver d'une part, à séparer le contenu de sa mise en page, d'autre part à définir des mises en page pour différents supports (ecran, imprimante, sonore ...).


Les facilités et le laxisme dans la syntaxe des anciennes versions n'ont plus cours. L'idée générale tient en quelques points :
  • les valeurs des attributs doivent être entre guillemets, même les valeurs numériques,
  • toute balise doit avoir une balise fermante (sauf BR, HR),
  • les balises imbriquées ne doivent pas se recouvrir,
  • les attributs de présentation sont inclus dans l'attribut de style, plutôt que comme un attribut propre à la balise,
  • la norme utilisée doit être identifiée en entête de document,
  • certains mots clés sont devenus obligatoires

Détail des conversions

Voici ci-dessous quelques conseils pour rapidement transformer une page. Le plus facile, mais non le moins fastidieux, consiste à encadrer de guillements les valeurs des attributs. L'autre point un peu lourd consiste à transformer les attributs de présentation (font, bgcolor, ...) en styles, respectant la norme CSS.
Rappelons qu'il existe 3 manières d'exprimer les styles :

  • "en ligne" dans l'attribut style des balises,
  • en créant un style affecté à une classe, défini dans la section HEAD,
  • en créant un style affecté à une classe, mais stocké dans un fichier .css

Cette dernière méthode est évidemment la plus "propre". Pour transformer mes pages, j'ai choisi la méthode "en ligne" qui offre l'avantage de conserver un parallèle avec l'ancienne formulation, comme on peut le voir dans les tableaux ci-dessous.

Afin de s'assurer de la conformité de la nouvelle page à la norme, le site http://validator.w3.org permet de lancer une vérification en ligne, avec un rapport immédiat sur les anomalies.
A partir du site, on peut aussi télécharger la documentation qui détaille la syntaxe de toutes les balises.

Version HTML 3 Version HTML 4
Déclaration de norme facultative <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <html lang="fr" dir="ltr">
<head> <head>
<TITLE>titre de la page</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type=text/css> <style type="text/css"
media="all"
title="facultatif">
<script language="JavaScript" > <script type="text/JavaScript" >
<tr
valign=center
bgcolor=#ffcc88>
<tr
valign="middle"
style="background-color:#ffcc88">
<td align=left >
<font size=4
color=#ff0000>
<td align="left" >
<span style="font-size:18;
color:#ff0000">
<td
height=*
background=images/fond.gif>
<td
style="height:*;
background-image:url(images/fond.gif)">
<ul type=disc> <ul style="list-type: disc outside">
<u> <span style="text-decoration: underline">

LES OUTILS ET LIENSRetour en haut de page

Front Page Express

Editeur de page Html simple. Graphique mais non Wysiwyg. Nécessite d'ouvrir une fenêtre navigateur séparée.
Le code Html peut être visualisé et modifé.
Parfait pour concevoir rapidement un canevas ou faire des essais.

Livré en standard avec Windows 98.

Web Expert 3

Télécharger sur http://www.visic.com/webexpert Editeur graphique Html.
Fournit des scripts pré-définis (bannières, textes à défilement ...)
Intègre un navigateur interne ou permet d'utiliser le vôtre pour tester les résultats.
Gestion de projets (ensemble de pages d'un site)
Beaucoup d'autres fonctions.

Ce n'est pas la version la plus récente mais j'apprécie les fichiers d'aide fournis sur le HTML et le javascript


Quelques sites sur le Javascript

http://www.allhtml.com/
http://www.ccim.be/
http://www.editeurjavascript.com/
http://www.toutjavascript.com/