exercice

Réalisation de pages html

A INTRODUCTION
1- Répertoire:
Les 3 images: cat18.gif, cat23.gif et T12a.jpg seront nécessaires.Pour plus de facilités, elles devront être dans le même répertoire que le fichier htm créé.Pour le moment elles sont dans le sous répertoire /essai mais vous pouvez créer un nouveau répertoire et les copier.
2- Ouverture d'un éditeur de texte ( le bloc-note ou autre)

B Réalisation du premier fichier htm
1- Création
Structure commune à tout fichier htm:Balise de début et de fin (htm); de titre (ici QUESTION)dans l'en-tête(head) et de corps de texte (vide pour le moment) (body).
<htm>
<head>
<title>QUESTION</title>
</head>
<body>
</body>
</htm>
-Enregistrer ensuite ce fichier sous un nom en extension .htm (par exemple : essai.htm) dans le répertoire où sont les images.( remarque : en enregistrant choisir type de fichier Tous (*.*) )
-Mettre le bloc-note en icône dans la barre des taches.
-Accéder au fichier essai.htm et lancez-le en double-cliquant. Seul le titre doit apparaître dans la barre de titre.
remarque: pour la suite si l'affichage de la page htm ne fonctionne pas, il faut corriger les erreur de syntaxe dans le bloc-note. il est inutile de fermer le fichier htm ouvert, à chaque modification enregistrée, il suffira de faire affichage/rafraîchir dans le navigateur pour voir les modifications.
2- Titre de la page
- But : titre en gros, en couleur, centré et encadré de 2 lignes
- Position dans le fichier source: entre les 2 balises <body> et </body> (corps du texte)
- Syntaxe :
       - ligne horizontale : <hr> (balise unaire)
       - titre <h1> TEST DE MEMOIRE</h1>
       - ligne horizontale : <hr>
Enregistrer et rafraîchir le navigateur pour voir le résultat.
- Modification pour centrer le titre insérer align="center" dans la balise <h1>
- Couleur du titre : Encadrer TEST DE MEMOIRE par <font color="FF0000"> et </font>
remarque: les couleurs sont exprimé en hexadécimal (base 16) sur 256 niveaux (de 00 à FF ) de rouge, vert et bleu. Ici ff0000 signifie rouge =ff vert = 00 et bleu = 00 le résultat est donc rouge vif . vous pouvez essayer d'autres combinaisons.
Enregistrer et rafraîchir le navigateur pour voir le résultat.
3- texte de la page (à la suite)
- Texte : Regarder l'image suivante puis répondre aux questions. A encadre par <p> et </p> (balise de paragraphe)
- Couleur du texte : mettre les balises nécessaires pour que ce texte s'affiche en rouge.
Enregistrer et rafraîchir le navigateur pour voir le résultat.
4- Création d'un hyper lien
- but: le mot "questions" doit permettre d'ouvrir un autre fichier htm que l'on créera plus tard dans le même répertoire.(nom : test.htm)
- méthode : encadrer le mot questions par les balises <a href="test.htm"> et </a>
(pour le moment le lien ne fonctionne pas puisque test.htm n'existe pas encore, mais il doit apparaître en bleu dans le navigateur)
5- Insertion d'une image
- But : insérer un gif animé
- Méthode : < img src="cat18.gif" alt="Un petit chat et des poissons">
(alt= "..." permettra d'afficher un texte quand on posera le curseur de la souris sur l'image)
- Mise en forme : mettre les balises nécessaires pour que l'image se trouve sous le texte précédent( nouveau paragraphe) et centrée dans la page.
Enregistrer et rafraîchir le navigateur pour voir le résultat.
6- Mise en page supplémentaire
- Rajouter une ligne horizontale sous l'image
- Fond de page : Un fond de page (background) peut être en couleur ou comporter une image de fond.
    - en couleur : insérer bgcolor="xxxxxx" dans la balise <body> ( ou xxxxxx est un code de couleur à choisir en hexadécimal)
    - Image de fond : Insérer background="T12a.jpg" dans la balise <body> ( T12a.jpg est une des images présente dans le répertoire du fichier htm. toute autre image de fond en .jpg ou .gif pourrait convenir)
remarque : Si l'on met une image de fond il est inutile de donner une couleur de fond de page.
C'est fini vous pouvez enregistrer définitivement.

C Réalisation du deuxième fichier htm
1- Refaire la structure commune à tout fichier htm ( balise de début et de fin, en-tête, titre , corps de texte)
2- le titre (title) doit être QUESTION et le fond de page doit être le même que essai.htm.
3- Enregistrer sous le nom test.htm
4- corps du texte
- Titre du texte : QUESTION. Il doit être présenté comme le titre de essai.htm.
- Texte de la page : Il doit être : Combien y avait-il de poissons dans l'aquarium ? ( pour mettre le texte en gras il suffit de l'encadrer par <strong> et </strong>
5- Formulaire de réponse
- But : Le formulaire de réponses sera constitué d'un champ texte (pour entrer la réponse) et d'un bouton (pour valider).
- syntaxe:
<form>
<input type="text" name="t1" size="15"> <input type="button" name="b1" value="validation">
</form>
- Rajouter les balises nécessaires pour que ce formulaire se retrouve à la ligne du précédent texte et centré dans la page.
Pour le moment le formulaire existe mais le bouton reste inactif.
6- script associé au bouton
- But : l'action du bouton de validation doit être la suivante quand on clique dessus : Il doit lancer des boites de dialogue adaptées à la réponse (juste ou fausse) entrée dans le champ texte.
- méthode : il faut créer un script en JAVA SCRIPT et l'insérer dans l'en-tête du fichier htm
- Script:
Balise de début et de fin de script : <script language="javascript"> et </script> à insérer dans l'en-tête en dessous </title>. Toute la suite sera inséré entre ces 2 balises.
Déclaration d'une fonction : function test(form) {
} les 2 accolades encadreront les instructions de la fonction. Le nom de la fonction est test (cela pourrait être n'importe quel nom) . (form) indique que la fonction s'occupera du formulaire.
Instructions : utilisation d'instructions conditionnelles du type si (if) alors, sinon (else)
if (form.text1.value == "2")
alert("Bravo !")
else
alert("Non il n'y a pas "+form.text1.value+" poissons.\n Vous n'avez aucune mémoire !.");
if (form.text1.value=="2"): si le contenu(value) du champ texte(nommé text1)dans le formulaire (form) est 2
alors alert ("Bravo") alert appelle la boite de dialogue standard de Windows qui affichera Bravo.
sinon else {etc..} le texte est entre guillemets et les variables sans guillemet. L'ensemble est relié par +. form.text1.value indique le nombre que l'on a entré dans le champ texte.\n fait aller à la ligne dans la boite de dialogue.
- appel de la fonction
Pour que cette fonction soit active il faut qu'elle soit appelée par un clic sur le bouton.
Insérer onClick="test(this.form)" dans la déclaration du bouton juste avant le >
- vérification : si le navigateur fait une remarque du genre Microsoft JScript runtime error, il y a une erreur dans la syntaxe du script ou du bouton. il faut alors le vérifier.
7- extension du script
- But : rajouter des instructions supplémentaires suivant les réponses .
Si la réponse est bonne (2) le commentaire est "Bravo ! "
Si rien n'est rentré dans le champ texte le commentaire doit être " Il faut répondre quelque chose !"
Si la réponse est mauvaise (différente de 2) le commentaire " non il n'y a pas etc..." doit s'afficher et l'on doit retourner à la page précédente pour regarder l'image.
-méthode
Insérer une autre instruction conditionnelle if else entre accolades après le premier else
else {if (form.text1.value == "")
alert("il faut écrire quelque chose !")
else
alert("Non il n'y a pas "+frm.text1.value+" poissons, vous n'avez aucune mémoire !."),location = 'essai.htm';}
}
8-image
Pour faire joli insérez l'image suivante( cat23.gif ) en dessous du formulaire et centrez-la

----- C'est fini! Si malgré les explications ça ne fonctionne pas :
exercice supplémentaire : Envoyer un E-mail à cette adresse : jf_noblet@infonie.fr pour avoir la solution complète.