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