HTMLファイルを作成する
HTMLとは
HTML(HyperText Markup Language)は、Webページを作成する時の言語の一つで、HTMLで記述することで、ブラウザが文章の構造を判断して表示します。要素とタグ
Webページを構成する単位を「要素」といい、要素は「<>」(タグ)で囲んで、開始位置と終了位置を指定します。「開始タグ」と「終了タグ」に内容をはさみ、「終了タグ」の要素の前には「/」(スラッシュ)を記述します。
属性
要素に追加する詳細設定を「属性」といいます。属性は「値」を伴い「"」(ダブルコーテーション)で囲んで記述し、要素名と属性、属性と属性の間は、半角空白で区切ります。（例：画像を表示する）
<imag src="画像ファイル" alt="表示する文字列">
上記の場合、「src」「alt」が属性であり、「画像ファイル」「表示する文字列」が値となります。
テキストエディタでHTMLファイルを作成
Windowsに付属する「メモ帳」や、MacOSに付属する「SimpleText」などのテキストエディタ（または、単にエディタとも呼ぶ）を使用して、HTMLファイルを作成します。HTMLを記述した、またはこれから記述しようとするテキストエディタから「名前をつけて保存」を選択し、拡張子に「html」と入力して保存します。
基本要素
HTMLファイルは大きく分けて「html要素」「head要素」「body要素」の3つの要素から構成されています。- 「html要素」
- 「head要素」
- 「body要素」
html要素は、HTMLファイルであることを表す最上位の要素です。
<html>〜</html>
head要素は、ブラウザのウィンドウ内に表示されない「Webページのタイトル」や「検索エンジン用キーワード」などの情報を記述します。
<head>〜</head>
もっとも閲覧者が目にする部分。ブラウザのウィンド内に表示される内容を記述します。
<body>〜</body>
基本要素その2
- 「DTD」
- 「lang属性」
- 「meta要素」
- 「title要素」
HTMLには、バージョンごとに要素や属性を定義した「DTD」(Document Type Definition)があります。
<html>〜</html>の前に記述します。
＜Strict DTD（厳密型）＞
HTML4.01で推奨されている要素や属性だけを使ってWebページを作成する場合に使用します。
<!DOCTYTPE html PULIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
＜Transitional DTD（移行型）＞
推奨されていない要素や属性を使ってWebページを作成する場合に使用します。
<!DOCTYTPE html PULIC "-//W3C//DTD HTML 4.01nbsp;Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
＜Frameset DTD（フレーム設定型）＞
フレーム関連の要素や属性を使ってWebページを作成する場合に使用します。
<!DOCTYTPE html PULIC "-//W3C//DTD HTML 4.01nbsp;Frameset//EN" "http://www.w3.org/TR/html4/Frameset.dtd">
Webページがどの国の言葉で書かれているか指定することで、文字化けなどのトラブルを避けることができます。
<html lang="ja">〜</html>
（「ja」日本、「en」英語、「fr」フランス、「zh」中国、など）
<head></head>の間に記述。
検索エンジン用のキーワードを記述してWebページのアクセス数を向上させたり、文字コードを指定して文字化けを避けることもできます。
<meta name="keywords" content="単語キーワード">
<meta name="description" content="サイトの説明文">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
（「Shift_JIS」シフトJIS、「iso-2022-jp」JIS、「euc-jp」EUCなど）
<head></head>の間に記述。
Webページのタイトルをブラウザのタイトルバーに表します。
<title>タイトル</title>
htmlファイル記述例
<!DOCTYTPE html PULIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="単語キーワード">
<meta name="description" content="サイトの説明文">
<title>タイトル</title>
</head>
<body>
Webページの本文・内容
</body>
</html>