ＭＥＮＵへ 元のページに戻る
ホームページの基本とタグ
■ 1 ホームページの基本的な構造（ＨＴＭＬ文書）
■ 2 タグ
Top へ

■ 1 ホームページの基本的な構造（ＨＴＭＬ文書）


□ 標準的なホームページは次のような構造をしている。

<html>
　<head>
　　<title>
　</head>
　<body>
　　本文
　</body>
</html>
 ────────────┬──ＨＴＭＬ文書
────┬──ヘッダ部　│　
　　　　│　　　　　　　│　
────┘　　　　　　　│　
────┬──本文　　　│　
　　　　│　　　　　　　│　
────┘　　　　　　　│　
────────────┘　

<html> で始まり </html> で終わるこの書き方を HTML（Hyper-Text Markup Language）と呼ぶ。
HTML の規則に従って書かれた文書を HTML文書（あるいは HTMLファイル、HTMLソース）と呼ぶ。

□ ヘッダ部

<head>〜</head> の部分を ヘッダ部 と呼び、このヘッダ部にはタイトルなどを記述する。

□ タイトル

<title>〜</title> で タイトル を書く。
タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりします。必ず記述するのが望ましい。

□ 本文

<body>〜</body> の部分が 本文 となり、この部分がブラウザのウィンドウ枠に表示される。


Top へ

■ 2 タグ


□ タグとは？

<html> や <head> などを タグ、html や head などを タグ名 と呼ぶ。
タグ名にはヘッダ（header）→ <head>、改行（break）→ <br> など、英語のスペルを元にした名前が付けられている。

多くのタグは <b>〜</b> のように 開始タグ と 終了タグ （開始タグのタグ名にスラッシュ（/）をつけたもの）で囲む。
注：<br> のような 単独タグ もある。

タグ名は大文字でも小文字でも構わないが、必ず半角文字で記述する必要がある。
なお、< の後に空白があってはならない。

	○ <html>
	○ <HTML>
	× ＜ｈｔｍｌ＞　　← 全角文字はＮＧ！
	× < html>　　← <の後に空白を入れるのもＮＧ！
□ タグの包含関係

開始タグ〜終了タグは、他の開始タグ〜終了タグの完全に外側か、完全に内側でなければならない。
（入れ子になってはいけない。）
例えば、<s>〜</s> と <b>〜</b> を記述する場合、次のようになる。

	○ <s>〜<b>〜</b>〜</s> ← 完全に外側
	○ <b>〜<s>〜</s>〜</b> ← 完全に内側
	× <b>〜<s>〜</b>〜</s> ← 包含関係が崩れている
□ 属性

<font color=red> の color=red のように 属性 を伴うものがあり、この属性は多くの場合 属性名＝属性値 という形式で記述する。
たまに 属性名 だけ指定すればよい場合もある。
　（正確には、checked=checked の属性名が省略されているらしい・・・）

	○ <font color=red size=5>〜</font>
	○ <input type=checkbox checked>

属性名も大文字・小文字どちらでも構わないが必ず半角文字とする。
属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行が必要で、属性を複数指定することも可能。 

	○ <font color=red>〜</font>
	○ <font COLOR=red>〜</font>
	○ <font color=red size=7>〜</font>

属性値も多くの場合大文字・小文字どちらでも構わないが、たまに大文字・小文字を区別する場合（target="_top"など）がある。

	○ <font color=red>〜</font>
	○ <font color=RED>〜</font>
	× <a href="xx.html" target="_TOP">〜</a>

属性の値に半角の英数字以外の文字を使用する場合は、"..." か '...' で囲む。
正確には半角英数字以外にも、ハイフン（-）、ピリオド（.）など一部の記号は囲まなくても良いが、最初の内は「記号はクォーテーションで囲む」もしくは「属性値は常にクォーテーションで囲む」と覚えておいた方が無難。

	○ <font size="+2">〜</font>
	○ <font size='+2'>〜</font>
	× <font size=+2>〜</font>
	△ <font size=-2>〜</font> ← ハイフンは囲まなくてもいいが・・・

ダブルクォーテーション（"）の中ではシングルクォーテーション（'）を、シングルクォーテーション（'）の中ではダブルクォーテーション（"）を用いることができる。

	○ <input type=button onclick="alert('XXX')">
	○ <input type=button onclick='alert("XXX")'>
	× <input type=button onclick="alert("XXX")">

ダブルクォーテーション（"）を &quot; と表記することもできる。

	○ <input type=button onclick="alert(&quot;XXX&quot;)">
Top へ