数値計算(その1)


四則演算が可能なウェブページを作成してみよう。


1. まずは書いてみる

(1) まずはメモ帳を開いて以下を打ち込みます。

<html>
  <head>
    <title>四則演算</title>
  </head>
  
  <body>
    <form name="frm1">
      <input type="text" name="firstValue" size="15" value=0>×
      <input type="text" name="secondValue" size="15" value=0><input type="text" name="result" size="15" value=0>
      <br>
      <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行">
    </form>
  </body>
</html>

(2) デスクトップにcalc.htmlという名前で保存します


(3) デスクトップに作成されたcalc.htmlを実行してください

(注意)

実行した際にセキュリティ警告が出る場合がありますが無視しちゃってください。


上記のような画面が表示されれば第一段階は完了です。



2. 基本的なタグを覚える

まずはタグについて簡単に説明。
HTMLはHyper Text Markup Languageの頭文字から取った略語です。Markupという単語が示すとおり、タグと呼ばれる記法でデータを飾り上げるためのものです。

<html> ← HTMLファイルの開始を表す
  <head> ← ヘッダー部分の開始を表す
    <title>四則演算</title> ← タイトル(ブラウザのバーに表示される情報)
  </head> ← ヘッダー部分の終了を表す
  
  <body> ← 本体(画面上に表示される情報)の開始を表す
    <form name="frm1"> ← 入力情報(ボタン・テキストボックス)の開始
      <input type="text" name="firstValue" size="15" value=0>×
      <input type="text" name="secondValue" size="15" value=0><input type="text" name="result" size="15" value=0>
      <br>
      <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行">
    </form> ← ← 入力情報(ボタン・テキストボックス)の終了
  </body> ← 本体(画面上に表示される情報)の終了を表す
</html> ← HTMLファイルの終了を表す


↑のとおり、基本的にはタグはで一組になっています。そのタグで囲われた部分がタグで指定された影響を受ける事になります。


純粋なHTMLの部分はこれでおしまい。あとは実際にボタンを押された時の処理をJavaScriptで記述しますが、それはまた今度。


次へ進む


★参考サイト
[HTML]
(1) 超初心者のためのホームページ作成講座
(2) ホームページ作成とHTML初心者・スタイルシート


[HTML/JavaScript]
(1) 初心者向きのjavaScript&HTMLタグ・CSS集


[修正]
ボタンやテキストボックスの名前を変更