HTMLの基本を学びましょう。
基礎の基礎からHTMLを学んでいきましょう。
■HTMLとは
★HTML(Hyper Text Markup Language ハイパーテキスト・マークアップ・ランゲージ)
ウェブページ（ホームページ）を作るための言語。ほとんどのページがHTMLで書かれています。★HyperText（ハイパーテキスト）
ハイパーリンクを埋め込むことができる高機能なテキスト。ハイパーリンクとは、クリックすると別ページなどに移動することができるリンク（つながり）。
★Markup（マークアップ）
目印をつける。文書の役割を示すためにつけるしるし。たとえば、「ここは見出しですよ」「ここは段落ですよ」とかわかるようにします。
ホームページを表示するときに、ブラウザ（ホームページを表示するプログラム（アプリ））が、
このマークをもとに画面に表示させます。
この目印が、タグというやつです。
「ここは段落ですよ」は、<p>ここ</p> のように記述します。
★タグ【tag】
もとの意味は、付け札、荷札や、商品に下げる値札など。 HTMLタグは、<>と</>で囲まれ、文書構造や書式、文字飾りなどを指示したり、画像や他の文書へリンクしたりする。ブラウザはこのタグに従ってWebページを表示します。
タグは、<開始タグ>〜</終了タグ>で囲んで要素の種類を指定します。
段落の場合の使用例を下に示します。
<p>ここが段落です</p>
表示
ここが段落です
このように、タグは開始タグと終了タグではさむものが基本です。
<p>ここが段落です</p>
←要素内容→「<p>ここが段落です</p>」
の全体を要素（この場合はｐ要素）、
開始タグと終了タグではさまれた「ここが段落です」を要素内容といいます。
一方、<br>（改行するタグ）のような単独で使用するものもあり、このようなタグは要素内容がないので、終了タグもありません。
要素には、属性を指定することができます。
スタイルシートを用いて文字を赤にしたサンプルを示します。
ソースコード<p style= "color: red"> ここが段落です</p>
表示
ここが段落です
HTMLでは、基本的には属性名、属性値の大文字と小文字を区別しません。 また、属性値をダブルクォーテーション（２重引用符）で囲む必要はありません。 しかし、XHTMLでは属性名や属性値の大文字と小文字を区別し、属性名はすべて小文字です。 属性値もダブルクォーテーションで囲む必要があります。 今後は、すべて小文字を使うようにしておくといいでしょう。
■HTMLの基本構成
HTMLの基本構成を下に示します。
この内容で、HTMLファイルを作成してブラウザで表示することができます。
<html>
<head>
<title>たいとる</title>
</head>
<body>
内容
</body>
</html>
| <html>〜</html> | HTLMの始め〜終わり。 |
| <head>〜</head> | ヘッダ情報。 サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等を記述します。文書のタイトル以外はブラウザに表示されません。 |
| <title>〜</title> | 文書のタイトル。 ブラウザのタイトルバーに表示されます。また、ブックマーク（お気に入り）や検索結果にも表示されます。 |
| <body>〜</body> | 文書の本体。実際にブラウザに表示される内容を記述します。 |
★HTMLファイルを作成し、ブラウザで表示する
- 上のソースコードをドラッグして右クリック、ポップアップメニュの[コピー]を選択
- テキストエディタ（メモ帳など）に貼り付け
- Test.htmlなどとして保存（「.html」は拡張子なので変更不可）
- エクスプローラで保存したフォルダーを開く
- Test.htmlをダブルクリック
■ドキュメントタイプの宣言
上記基本構成の前にドキュメントタイプの宣言が必要ます。
なくても表示はされますが、正しく表示されなかったりしますので必ず付けるようにします。
この宣言は、ソースの先頭で行います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>たいとる</title>
</head>
<body>
内容
</body>
</html>
HTMLでは使用できるタグや属性などを、各バージョンごとDTD（DocumentType Definition、文書型定義）で定義しています。
どのバージョンのDTDに基づいて文書を構成しているかを宣言します。
| HTML4.01 Strict DTD | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 厳密なDTDで非推奨の要素や属性は使えません。上級者向け。 |
| HTML4.01 Transitional DTD | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 厳密ではなく、非推奨の要素や属性なども使えますが、フレームは使えません。 厳密型やXHTMLへ移行中。通常これを使います。 |
| HTML4.01 Frameset DTD | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> Transitional DTDにフレームが加わったものです。フレーム分割を書くときはこれを使います。 |
html5では、ドキュメントタイプの宣言がシンプルになって<!DOCTYPE html>と記述します。
文書型宣言の詳しい説明については、 The Web KANZAKI さんの 文書型宣言の意味 を参照してください。
■HTML要素
<html>〜</html>で囲まれた範囲。head要素とbody要素をひとつずつで構成されます。 ただし、フレーム設定型DTD（Frameset）では body要素の代わりに frameset要素を記述します。 HTML要素には、lang属性を基本的に指定します。 これにより、文書内の全ての要素に対して特定の言語が指定されたことになります。
ソースコード<html lang= "ja" > これがタイトルです<html>
■ヘッダ要素
<head>〜</head>で囲まれた範囲。その文書のタイトル・作成者など、文書に関するヘッダ情報を示します。
これら情報は、メタ情報といいます。
★title要素
<title>〜</title>のタイトルは、この中にひとつだけ必ず書く必要があります。
ブラウザのタイトルバーに表示されます。また、ブックマーク（お気に入り）や検索結果にも表示されます。
<title>これがタイトルです<title>
IE9での表示
★meta要素
メタ情報は、タイトルを除きMETAタグにより記述します。
属性名は、「http-equiv」と「name」の２種類です。
詳細は、
vaio's HomePage
さんの
HTMLリファレンス
を参照してください。
★style要素
head要素内に、style要素を用いてスタイルシートを記述することもできます。
ソースコード<style
type="text/css">
ここがスタイルシートです
</style>
スタイルシートについては、■CSSの基礎も参照してください。
★スタイルシートのコメント
style要素に対応していない古いブラウザ向けに、スタイルシートの記述を「<!--」と「-->」でコメントアウトするのが一般的ですが、
今では、style要素に対応していない環境で使われることはほとんどなく、XHTMLではブラウザによりこのコメントにより動作しないこともあるようです。
文書内に直接スタイルシートを記述するのではなく、別にスタイルシートファイルを用意して link要素で外部から参照させる手法がよいようです。
コメントの記述例として、リストの先頭にマークを付けなくするスタイルの設定を示します。
<style
type="text/css"
>
<!--
ul { list-style:none; }
-->
</style>
★スタイルシートファイル（link要素）
link要素により、スタイルシートファイルから、スタイルシートを参照することができます。
例として、スタイルシートファイル"style.css"を参照するコードを示します。
<link rel="stylesheet" href="style.css" >
■ボディ要素
<body>〜</body>で囲まれた範囲。見出し、段落などの本文を構成します。
ヘッダ要素、ボディ要素は必ずこの順番で１つづつ書きます。
ボディ要素の中身は、ブラウザの画面に表示される内容となります。
<body>
これは、ボディ要素に直接記入した内容を表示しているサンプルです。
<body>
IE9での表示
■コメント
本人が書いたソースコードでも、時間がたつと理解できなかったりすることもよくあることで、 適切なコメントの記入はとても重要になってきます。ソースコードが読みづらかったら修正のときに非常に手間がかかります。
★HTMLファイルのコメント
<!--と-->で囲みます。★CSSファイルのコメント
/*と*/で囲みます。