Webプログラミングをしてみよう!! このページをアンテナに追加 RSSフィード

2007-10-06

数値計算(その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を実行してください

(注意)

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

f:id:itotto:20071007002034p:image


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



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

まずはタグについて簡単に説明。

HTMLHyper 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ファイルの終了を表す

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


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


次へ進む


★参考サイト

[HTML]

(1) 超初心者のためのホームページ作成講座

(2) ホームページ作成とHTML初心者・スタイルシート


[HTML/JavaScript]

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


[修正]

ボタンテキストボックスの名前を変更