<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>フォーム</title> </head> <body> <input type="number"> + <input type="number"> = <input type="number"> <input type="button" value="計算する"> </body> </html>
実行してみると、
画面にフォームが表示されました。アプリを作る時はこのフォームに動作を追加していきます。
HTMLのコードの書き方を解説すると、一行目の<!DOCTYPE html>はこれからHTMLのコードを書きますという宣言で、必ず必要というものではありません。二行目の<html>はここからHTMLのコードになりますという印(タグ)で<html>と</html>で囲った箇所がHTMLの記述となります。三行目からの<head>ですが、表に見えない部分の情報を入力するところで、<meta charset="UTF-8">は今回のHTMLはUTF-8という文字列で記述ということを設定しています。見えない部分の情報は</head>までになります。次の<body>と</body>で囲まれている箇所が実際に表示される箇所で、今回のサンプルコードでは、<input type="number">というものと<input type="button" value="計算">というものと、+や=といった記号が書かれています。<input type="number">は数字を入力するフォームを表示という意味で、<input type="number">を組み合わせることで簡単な計算機を表示しています。
※現時点では計算ボタンを押しても計算が開始することはありません。
まとめると
<!DOCTYME html> <html> <head> 表示されない箇所の諸々の設定 </head> <body> ここに書いたコードは表示される。ユーザが操作できる(ユーザーインターフェースという) </body> </html>
このような記述ルールとなります。
補足
HTMLでは、改行する時にEnterボタンを押しても改行されず、<br>を入れることで改行されます。
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8”> <title>HTMLサンプル</title> </head> <body> 文章を表示します。 <br> 改行してから文章を表示します。 </body> </html>
<br>を入れることで改行されます。
HTMLでできること
HTML | Mozilla Developer Network
0 件のコメント:
コメントを投稿