Comment créer une calculette avec du HTML

Il existe de nombreuses façons de faire des calculs sur son ordinateur en utilisant la calculette intégrée, mais vous pouvez aussi créer la vôtre en utilisant simplement du code HTML. Pour y arriver, vous devez apprendre les bases du HTML avant de copier le code nécessaire dans un fichier texte que vous enregistrez avec l'extension .html. Il vous suffit ensuite d'ouvrir le fichier dans votre navigateur favori pour avoir accès à la calculette. Cette technique vous permet de faire des calculs directement dans votre navigateur tout en apprenant les bases de l'art de la programmation informatique.

Partie 1

Partie 1 sur 4:

Comprendre le code

Télécharger l'article

1
Comprenez le fonctionnement du code. Le code que vous allez utiliser pour créer la calculette se base sur de petits bouts de code qui fonctionnent les uns avec les autres pour définir différents éléments du document. Vous pouvez en apprendre plus sur le HTML en cliquant sur ce lien ou vous pouvez lire ce que fait chaque ligne dans le code que vous allez utiliser pour la calculette.
- html: ce bout de code indique au reste du document le langage utilisé. On utilise de nombreux langages différents de programmation et la balise indique au reste du document que cette fois-ci, c'est du HTML que vous utilisez ^{[1]XSource de recherche}.
- head : cela indique au document que les informations qui suivent sont des données qu'on appelle aussi « métadonnées ». La balise est généralement utilisée pour définir des éléments stylistiques du document, par exemple le titre, les entêtes, etc. C'est comme un parapluie sous lequel le reste du code est défini ^{[2]XSource de recherche}.
- title : c'est le titre que vous allez donner au document. Cette balise est utilisée pour afficher le titre du document une fois qu'il sera ouvert dans le navigateur.
- body bgcolor= "#" : cela permet de définir une couleur de fond pour le document. Le nombre qui apparait après le dièse correspond à une couleur prédéterminée.
- text= "" : le mot entre guillemets indique la couleur du texte sur le document.
- form name="" : cet attribut indique le nom du formulaire qui sera utilisé pour la structure de ce qui vient après pour que le code JavaScript puisse savoir de quel formulaire on parle. Par exemple, le nom de formulaire que l'on va utiliser est « calculette » ce qui va créer la structure spécifique du document ^{[3]XSource de recherche}.
- input type="" : c'est là où l'action va se dérouler. L'attribut « input type » indique au document le type de valeur pour le texte qui se trouve dans le reste des crochets. Par exemple, cela pourrait être du texte, un mot de passe, un bouton (comme ce sera le cas pour notre calculette), etc. ^{[4]XSource de recherche}
- value="" : cet attribut indique au document ce que l'attribut « input type » va contenir. Pour une calculette, vous allez afficher les chiffres de 1 à 9 et les signes arithmétiques (+, -, *, /, =) ^{[5]XSource de recherche}.
- onClick="" : ce bout de code décrit un évènement qui indique au document que quelque chose doit se passer au moment où le bouton est activé. Pour une calculette, vous voulez afficher le chiffre qui correspond au bouton sur lequel l'utilisateur a appuyé. Par exemple, si le bouton 6 est activé, vous voulez mettre document.calculette.ans.value+='6' entre les guillemets ^{[6]XSource de recherche}.
- br : c'est une balise qui indique un saut de ligne, tout le reste du code qui vient après apparaitra une ligne en dessous ^{[7]XSource de recherche}.
- /form, /body, and /html : ces balises fermantes indiquent au navigateur que les balises que vous aviez ouvertes plus tôt sont maintenant finies et fermées ^{[8]XSource de recherche}.
Publicité

Partie 2

Partie 2 sur 4:

Écrire le code de base de la calculette

Télécharger l'article

Sélectionnez le texte ci-dessous en maintenant le curseur appuyé du coin en haut à gauche de la boîte et en le faisant glisser jusqu'au coin en bas à droite pour que tout le texte apparaisse en bleu. Appuyez ensuite sur Command + C sur un Mac ou sur Ctrl + C sur un PC pour copier le texte.

<html><head><title>Calculette HTML</title></head><body bgcolor= "#000000" text= "gold"><form name="calculette" ><input type="button" value="1" onClick="document.calculette.ans.value+='1'"><input type="button" value="2" onClick="document.calculette.ans.value+='2'"><input type="button" value="3" onClick="document.calculette.ans.value+='3'"><input type="button" value="+" onClick="document.calculette.ans.value+='+'"><input type="button" value="4" onClick="document.calculette.ans.value+='4'"><input type="button" value="5" onClick="document.calculette.ans.value+='5'"><input type="button" value="6" onClick="document.calculette.ans.value+='6'"><input type="button" value="-" onClick="document.calculette.ans.value+='-'"><input type="button" value="7" onClick="document.calculette.ans.value+='7'"><input type="button" value="8" onClick="document.calculette.ans.value+='8'"><input type="button" value="9" onClick="document.calculette.ans.value+='9'"><input type="button" value="*" onClick="document.calculette.ans.value+='*'"><input type="button" value="/" onClick="document.calculette.ans.value+='/'"><input type="button" value="0" onClick="document.calculette.ans.value+='0'"><input type="reset" value="Réinitialiser"><input type="button" value="=" onClick="document. calculette.ans.value=eval(document.calculette.ans.value)"><br>Le résultat est <input type="textfield" name="ans" value=""></form></body></html>

Partie 3

Partie 3 sur 4:

Créer la calculette

Télécharger l'article

1
Ouvrez un fichier texte sur l'ordinateur. Il existe de nombreux programmes que vous pouvez utiliser, mais dans un souci de qualité, il est recommandé d'utiliser TextEdit ou Notepad ^{[9]XSource de recherche} ^{[10]XSource de recherche}.
- Sur un Mac, il suffit de cliquer sur la loupe en haut à droite de l'écran pour ouvrir Spotlight. Une fois ouvert, tapez TextEdit et cliquez sur le programme qui devrait être sélectionné en bleu.
- Sur un PC, cliquez sur le bouton Démarrer en bas à gauche. Dans la barre de recherches, tapez Notepad et cliquez sur l'application qui devrait apparaitre dans les résultats.
2
Collez le code HTML dans le document.
- Sur un Mac, il suffit de cliquer dans le corps du document et d'appuyer sur Command + V. Vous devriez ensuite cliquer sur Format en haut de l'écran, puis sur Afficher en texte simple après avoir collé le code ^{[11]XSource de recherche}.
- Sur un PC, cliquez dans le corps du document et collez le code en appuyant sur Ctrl + V.
Il vous suffit de cliquer sur le bouton Fichier en haut à gauche de la fenêtre, puis sur Enregistrer sous... sur un PC ou Enregistrer... sur un Mac dans le menu déroulant qui apparait.
Une fois dans le menu, tapez le nom du fichier suivi de « .html » avant de cliquer sur Enregistrer. Par exemple, si vous voulez appeler ce fichier « ma première calculette », vous pouvez lui donner comme nom : « MaPremiereCalculette.html ».
Publicité

Partie 4

Partie 4 sur 4:

Utiliser la calculette

Télécharger l'article

Il vous suffit de taper le nom du fichier dans Spotlight sous Mac ou dans la barre de recherches du menu Démarrer sous Windows. Il n'est pas nécessaire de taper l'extension du fichier.
Votre navigateur par défaut devrait ouvrir la calculette dans un nouvel onglet.
Les résultats de vos calculs devraient apparaitre dans la barre prévue à cet effet.
Publicité