HTMLの記述

HTMLファイルはテキストファイルであり、タグ(「<」と「>」で囲まれた文字列)により、文章の構造を定義します。
HTMLファイルは以下のような構成にする必要があります。

<html>
    <head>
        (ヘッダ要素)
    </head>
    <body>
        (ボディ要素)
    </body>
</html>

ヘッダ要素にはこのHTMLファイルに関する情報を記述し、 ボディ要素には画面の構成に関する情報を記述します。

ヘッダ要素

head要素以下には、以下のようなタグを記述することができます。
なお、これら以外にも様々なタグを記述することができますが、詳しくはWEBに多くのリファレンスがありますので、各自で調べるようにしてください。

タグ 用例 説明
meta
<meta http-equiv="content-type"
      content="text/html; charset=utf-8">
このHTMLファイルのタイプと文字コードを指定します。
本教材のサンプルの文字コードはすべてUTF-8に統一します。
title
<title>ページのタイトル</title>
このHTMLファイルのタイトルを指定します。
ブラウザのタブやタイトルバーにはこのタイトルが表示されます。
link
<link rel="STYLESHEET" href="todo.css"
      type="text/css">
CSSファイルへの参照を指定します。
詳細はCSSの記述 で説明します。
script
<script type="text/javascript" src="login.js"> 
</script>
スクリプト(JavaScriptなど)を指定します。
詳細はJavaScriptの記述 で説明します。


ボディ要素

body要素以下に記述可能なタグに関しては、ログイン画面を例に説明します。
ログイン画面の場合、以下のようなHTMLタグで構成することが考えられます。

HTMLレイアウトイメージ(ログイン画面)

それぞれのタグの意味は以下の通りです。
これ以外にも様々なタグを記述することができます。詳しくはWEBに多くのリファレンスがありますので、各自で調べるようにしてください。

タグ 用例 説明
body
<body>
  (ページの内容) 
</body>
ページ全体をあらわすタグです。ページをフレーム分割する場合以外は必須です。
h1
<h1>見出し</h1>
見出しをあらわすタグです。
hr
<hr>
水平線をあらわすタグです。
div
<div>
  (ブロックの内容)
</div>
ブロックをあらわすタグです。
table, tr, th, td
<table>
  <tr>
    <th>表見出し1</th>
    <th>表見出し2</th>
  </tr>
  <tr>
    <td>表データ1(1行目)</td>
    <td>表データ2(1行目)</td>
  </tr>
  <tr>
    <td>表データ1(2行目)</td>
    <td>表データ2(2行目)</td>
  </tr>
</table>
表構造をあらわすタグです。
form
<form action="送信先URL" method="送信メソッド">
  (フォームの内容)
</form>
テキスト入力、ボタンなどのまとまりを示すタグです。
フォームに含まれるすべての入力フィールドの値をまとめ、サーバに送信することができます。
input
<input type="text" name="1行入力フィールド"
       value="1行入力用のテキストボックスです">
<input type="password" name="パスワード入力フィールド"
       value="パスワード入力用のテキストボックスです">
<input type="submit" value="送信ボタンです">
テキスト入力、ボタンなど、入力領域を示すタグです。


ログイン画面HTMLの記述

実際に、ログイン画面のHTMLを記述してみましょう。
HTMLは以下のようになります。

ダウンロード index.nocss.html
index.nocss.html
  1: <html>
  2:     <head>
  3:         <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4:         <title>ログイン</title>
  5:     </head>
  6:     <body>
  7:         <h1>ログイン</h1>
  8:         <hr>
  9:         <div align="center">
 10:             <table border="0">
 11:                 <form action="list.html" method="get">
 12:                     <tr>
 13:                         <th>
 14:                             ユーザID
 15:                         </th>
 16:                         <td>
 17:                             <input type="text" name="user_id" value="" size="24">
 18:                         </td>
 19:                     </tr>
 20:                     <tr>
 21:                         <th>
 22:                             パスワード
 23:                         </th>
 24:                         <td>
 25:                             <input type="password" name="password" value="" size="24">
 26:                         </td>
 27:                     </tr>
 28:                     <tr>
 29:                         <td colspan="2">
 30:                             <input type="submit" value="ログイン">
 31:                         </td>
 32:                     </tr>
 33:                 </form>
 34:             </table>
 35:         </div>
 36:     </body>
 37: </html>

3~4行目:
ヘッダ要素の記述。
titleタグでページタイトルを、metaタグで文字セットを明示しています。
7~36行目:
ボディ要素の記述。
ログイン画面の構成例に従ってタグを組み合わせています。


上記のファイルを適当な場所にダウンロードし、ブラウザで表示を確認してください。
ブラウザには以下のように表示されます。

ログイン画面(1)