MENUへ | 元のページに戻る |
■ 1 ホームページの基本的な構造(HTML文書) ■ 2 タグ |
Top へ |
□ 標準的なホームページは次のような構造をしている。
<html> <head> <title> </head> <body> 本文 </body> </html> |
────────────┬──HTML文書 ────┬──ヘッダ部 │ │ │ ────┘ │ ────┬──本文 │ │ │ ────┘ │ ────────────┘ |
<html> で始まり </html> で終わるこの書き方を HTML(Hyper-Text Markup Language)と呼ぶ。
HTML の規則に従って書かれた文書を HTML文書(あるいは HTMLファイル、HTMLソース)と呼ぶ。
<head>〜</head> の部分を ヘッダ部 と呼び、このヘッダ部にはタイトルなどを記述する。
<title>〜</title> で タイトル を書く。
タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりします。必ず記述するのが望ましい。
<body>〜</body> の部分が 本文 となり、この部分がブラウザのウィンドウ枠に表示される。
Top へ |
<html> や <head> などを タグ、html や head などを タグ名 と呼ぶ。
タグ名にはヘッダ(header)→ <head>、改行(break)→ <br> など、英語のスペルを元にした名前が付けられている。
多くのタグは <b>〜</b> のように 開始タグ と 終了タグ (開始タグのタグ名にスラッシュ(/)をつけたもの)で囲む。
注:<br> のような 単独タグ もある。
タグ名は大文字でも小文字でも構わないが、必ず半角文字で記述する必要がある。
なお、< の後に空白があってはならない。
○ <html> ○ <HTML> × <html> ← 全角文字はNG! × < html> ← <の後に空白を入れるのもNG!
開始タグ〜終了タグは、他の開始タグ〜終了タグの完全に外側か、完全に内側でなければならない。
(入れ子になってはいけない。)
例えば、<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")">
ダブルクォーテーション(")を " と表記することもできる。
○ <input type=button onclick="alert("XXX")">
Top へ |