Comment créer une calculette avec du HTML

PDF download Télécharger l'article
PDF download Télécharger l'article

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

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] .
    • 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] .
    • 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] .
    • 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]
    • 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] .
    • 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] .
    • 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] .
    • /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] .
    Publicité
Partie 2
Partie 2 sur 4:

Écrire le code de base de la calculette

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Il existe de nombreux programmes que vous pouvez utiliser, mais dans un souci de qualité, il est recommandé d'utiliser TextEdit ou Notepad  [9] [10] .
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • 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] .
    • Sur un PC, cliquez dans le corps du document et collez le code en appuyant sur Ctrl + V .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Votre navigateur par défaut devrait ouvrir la calculette dans un nouvel onglet.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Les résultats de vos calculs devraient apparaitre dans la barre prévue à cet effet.
    Publicité

Conseils

  • Si vous le souhaitez, vous pouvez aussi insérer cette calculette dans une autre page HTML.
  • Vous pouvez aussi adapter le design en modifiant le code.
Publicité

wikiHows en relation

Comment
accéder au BIOS
Comment
faire une capture d'écran sur un ordinateur HP
Comment
casser le mot de passe d'un BIOS
Comment
ouvrir des documents EPUB
Comment
deviner un mot de passe
Comment
ouvrir des ports
Comment
ouvrir des fichiers DLL
Comment
créer et supprimer des dossiers et fichiers sous Windows avec l'invite de commandes
Comment
formater une clé USB si Windows n’y arrive pas
Comment
réinitialiser le BIOS de votre PC
Comment
ouvrir des fichiers EXE
Comment
ouvrir un fichier XML
Publicité

Références

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

À propos de ce wikiHow

Autres langues 
Cette page a été consultée 21 310 fois.

Cet article vous a-t-il été utile ?

Publicité