<< Retour au sommaire

 

 

Élaboration d’une page de message

 

 

 

Le sommaire :

  1. Introduction.
  2. La page de message en JavaScript.
  3. La page de message en XHTML.
  4. La page de message avec un formulaire XHTML.

 

 

Introduction

 

En JavaScript, il est possible d’utiliser une fenêtre qui vous affiche un message avec un bouton unique, le bouton « Ok ».

Le curseur est automatiquement placé sur le bouton, JAWS lit donc naturellement le message et vous pouvez immédiatement valider le bouton « Ok », c’est rapide et convivial…

D’ailleurs, un petit son « d’exclamation » accompagne naturellement l’ouverture de la fenêtre de message…

Le but du jeu ici, c’est de se rapprocher le plus possible de la fenêtre de message JavaScript en n’utilisant que le       XHTML…

 

Ci-après, 3 exemples vont vous être proposés et décris.

  1. Premièrement, l’affichage du message en JavaScript Grâce à une méthode toute prête.
  2. L’affichage du message en XHTML sans astuce…
  3. L’affichage du message en XHTML mais avec une astuce ! L’emploi d’un formulaire simple…

 

Dans les 3 cas de figure, après la validation du bouton « Ok » du message de « victoire », vous atterrirez dans une page de relaxation dans laquelle vous pourrez faire une sieste…

 

 


La page de message en JavaScript.

 

Voici comment afficher une véritable fenêtre de message en JavaScript, même si le but du cours ici n’est pas l’étude du Javascript.

 

Imbriquée entre les balises :

<script type="text/javascript> & </script>

On emploi la méthode "alert".

L’instruction « location » , quant à elle, redirige l’exécution de l’exécution sur la page « relaxation.html ».

 

 

Voici donc le code de la page WEB :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Victoire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<script type="text/javascript">

window.alert("Félicitation, vous venez de gagner 1 euro au loto !");

location ="relaxation.html";

</script>

</body>

</html>

 

Essayer la page >>

 

Voilà…

Maintenant, considérons que nous ne maîtrisons pas le JavaScript !

Pour ma part, ce n’est pas qu’une considération…

 

 


La page de message en XHTML.

 

Si nous devions réaliser le message de victoire avec du code simple XHTML, rien d’incroyable à écrire, cependant, l’apparition du message ne surprendrait pas, il n’y aurait même pas de bouton, elle ne simulerait en rien l’ouverture d’une fenêtre !

 

D’abord pas de bouton, mais un lien, et puis, pas de son non plus…

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Victoire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<table>

<tr><td>

Félicitation, vous venez de gagner 1 euro au loto !

</td></tr>

<tr><td>

<a href="relaxation.html">Ok</a>

</td></tr>

</table>

</body>

</html>

 

Bon, rien de plus simple, un texte dans une cellule de tableau pour annoncer le message, et un lien pour le quitter…

 

Essayer la page >>

 

 


La page de message avec un formulaire XHTML.

 

En utilisant un formulaire, on va pouvoir placer un bouton à la place d’un lien.

La prise de focus est donc plus rapide et se ne sera pas la peine de chercher le lien à valider…

On sera directement placé sur le bouton.

En rajoutant le son de WINDOWS « Exclamation », on va encore davantage se rapprocher de la fenêtre « Alert » du JavaScript.

 

Nous allons utiliser un formulaire uniquement pour le bouton ! Il ne faut pas oublier de saisir le nom de la page « relaxation.html » dans l’attribut « action » de la balise « form ».

 

Le petit son de WINDOWS, quant à lui, sera exécuté par la balise « Bgsound ».

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Victoire</title>

<bgsound src="son.wav" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<table>

<form action="relaxation.html">

<tr><td>

Félicitation ! Vous venez de gagner 1 euro au loto !

</td></tr>

<tr><td>

<input type="submit" value="Ok" />

</td></tr>

</form></table>

</body>

</html>

 

Essayer la page >>

 

Philippe BOULANGER