Contenu

• Avancer d'un pas
• Partie 1 sur 4: Comprendre le code
• Partie 2 sur 4: Code standard pour une calculatrice HTML
• Partie 3 sur 4: Créer votre propre calculatrice
• Partie 4 sur 4: Utilisez votre calculatrice
• Conseils

Il existe de nombreuses façons différentes de calculer avec un ordinateur à l'aide de la calculatrice intégrée, mais une autre consiste à créer la vôtre en utilisant un code HTML simple. Pour créer une calculatrice en utilisant HTML, vous avez besoin de quelques connaissances HTML de base, puis entrez le code nécessaire dans un éditeur de texte et enregistrez-le sous forme de fichier HTML. Vous pouvez ensuite utiliser la calculatrice en ouvrant le fichier HTML dans votre navigateur préféré. Non seulement vous pourrez effectuer des opérations arithmétiques dans votre navigateur, mais vous pourrez également acquérir des compétences de base sur l'art de la programmation!

Avancer d'un pas

Partie 1 sur 4: Comprendre le code

1. Découvrez ce que fait chaque fonction HTML. Le code que vous utiliserez pour créer votre calculatrice se compose de nombreux types de syntaxe différents qui définissent ensemble les différents éléments d'un document. Cliquez ici pour une explication de ce processus, ou lisez la suite pour en savoir plus sur ce que chaque ligne de code fera pour créer la calculatrice.
   • html: Ce bit de syntaxe indique au reste du document la langue qui sera utilisée dans le code. Il existe plusieurs langages dans lesquels coder et dans ce cas, html> indique clairement au reste du document qu'il se trouve - vous l'avez deviné - html.
   • diriger: Indique au document que tout ce qui suit est des données sur les données, également appelées «métadonnées». La commande head> est généralement utilisée pour définir les éléments stylistiques d'un document, tels que les titres, les en-têtes, etc. Considérez-la comme un parapluie sous lequel le reste du code est défini.
   • Titre: Le titre de votre document est indiqué ici. Cet attribut est utilisé pour indiquer le titre du document lorsqu'il est ouvert dans un navigateur HTML.
   • corps bgcolor = "#": Cet attribut définit la couleur de l'arrière-plan de la page HTML et du corps. Le nombre dans la chaîne de guillemets et après le # correspond à une couleur spécifique.
   • text = "": Cette syntaxe définit la couleur du texte du document.
   • nom du formulaire = "": Cet attribut spécifie le nom d'un formulaire et est utilisé pour construire la structure de ce qui vient ensuite, en fonction de ce que Javascript sait de la signification du nom du formulaire. Par exemple, le nom du formulaire que nous allons utiliser est "calculatrice", que nous allons utiliser pour créer une structure spécifique pour le document.
   • type d'entrée = "": C'est là que quelque chose se passe. L'attribut "type d'entrée" indique à l'analyseur du document le type de texte contenu dans les valeurs entre guillemets. Par exemple, cela peut être un texte, un mot de passe, un bouton (comme ce sera le cas avec la calculatrice), etc.
   • valeur = "": Cette commande indique à l'analyseur du document ce qui est inclus dans le type d'entrée ci-dessus. Pour une calculatrice, ce sont des nombres (1-9) et des opérations (+, -, *, /, =).
   • onClick = "": Cette syntaxe décrit un événement, indiquant que quelque chose doit être fait lorsque le bouton est cliqué. Pour une calculatrice, nous voulons que le texte de chaque bouton soit également reconnu comme tel. Donc, avant le bouton "6", nous mettons document.calculator.ans.value + = "6" entre les guillemets.
   • br: cette balise crée une nouvelle ligne dans le document, de sorte que le texte (ou autre chose) soit placé après lui sur une autre ligne.
   • / form, / body et / html: ces commandes sont plus proches des commandes correspondantes précédemment ouvertes dans le document.

Partie 2 sur 4: Code standard pour une calculatrice HTML

1. Copiez le code ci-dessous. Sélectionnez le texte dans la zone ci-dessous en maintenant le bouton gauche de la souris enfoncé et en faisant glisser le curseur du coin inférieur gauche de la zone vers le coin supérieur droit, de sorte que tout le texte devienne bleu. Appuyez ensuite sur "Commande + C" sur un Mac ou "Ctrl + C" sur un PC pour copier le code dans le presse-papiers.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> input type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> input type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" button "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> input type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> input type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> input type =" button "value =" - "onClick =" document.calculator.ans. value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> input type =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> input type =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> input type =" button "value =" 0 "onClick =" document.calculator.ans.value + = '0' "> input type =" reset "value =" Reset "> input type =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> La réponse isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Partie 3 sur 4: Créer votre propre calculatrice

1. Ouvrez un éditeur de texte sur votre ordinateur. Il existe plusieurs programmes à utiliser, mais pour plus de simplicité, nous nous en tiendrons à TextEdit ou Notepad.
   • Sur un Mac, cliquez sur la loupe dans le coin supérieur droit de l'écran pour ouvrir Spotlight. Lorsque vous y arrivez, tapez TextEdit et cliquez sur le programme TextEdit, qui devrait maintenant être sélectionné en bleu.
   • Sur un PC, ouvrez le menu Démarrer en bas à gauche de l'écran. Dans la barre de recherche, tapez Notepad et cliquez sur l'application Notepad, qui apparaîtra dans la barre de recherche à droite.
2. Collez le code HTML d'une calculatrice dans le document.
   • Sur un Mac, cliquez sur le corps du document et appuyez sur Commande + V. Cliquez ensuite sur Format en haut de l'écran, puis Créer du texte brut après avoir collé le code.
   • Sur un PC, cliquez sur le corps du document puis sur Ctrl + V.
3. Enregistrez le fichier. Vous faites cela via "Fichier" dans le menu principal de la fenêtre, puis avec Enregistrer sous... sur un PC ou Sauvegarder... sur un Mac dans le menu déroulant.
4. Ajoutez une extension HTML au nom du fichier. Dans le menu "Enregistrer sous ...", saisissez le nom du fichier, suivi de ".html", puis cliquez sur "Enregistrer". Par exemple, si vous souhaitez nommer ce fichier «Ma première calculatrice», enregistrez le fichier sous «Ma première calculatrice.html».

Partie 4 sur 4: Utilisez votre calculatrice

1. Trouvez le fichier que vous venez de créer. Pour ce faire, saisissez le nom du fichier dans Spotlight ou dans la barre de recherche du menu Démarrer comme expliqué à l'étape précédente. Il n'est pas nécessaire de taper également l'extension "html".
2. Cliquez sur votre fichier pour l'ouvrir. Votre navigateur par défaut ouvrira votre calculatrice dans une nouvelle page Web.
3. Cliquez sur les boutons de la calculatrice pour l'utiliser. Les solutions à vos équations apparaîtront désormais dans la barre de réponse.

Conseils

• Vous pouvez inclure cette calculatrice dans une page Web si vous le souhaitez.
• Vous pouvez également utiliser des styles HTML pour modifier l'apparence de la calculatrice.