・どこに作るの？
ホームページは、インターネットに接続された Web サーバーにあるファイルを、
閲覧者がブラウザソフトを使って、観ることが出来るシステムです。
１．まずホームページの作成者は、テキストエディタを使って自分のパソコン上にホームページの原稿ファイルを作ります。
＊ファイルやフォルダ名に使える文字は、基本的には半角英数字のみだと考えて下さい。
２．次にこのファイルを、ホームページを公開するサーバー*の指定フォルダに、「
ファイル転送ソフト」を使って、転送(アップロード)します。
＊個人の場合、プロバイダーの提供するサーバーを借りるのが一般的です。
３．閲覧者がブラウザソフトを使って、Web サーバーのファイルアドレス
(URL)を指定すると、Web サーバーに転送されているファイルの内容が閲覧者に知らされ、ファイルの内容を観ることが出来ます。
詳しくは、HP作りの流れで、 またネットワークに関しては、こちらをご覧下さい
・ホームページの構造 （ツリー構造）
Web サーバーに置かれたホームページとなるファイルは、HTMLファイルと言う決まりで作る必要があります。
閲覧者のブラウザソフトはそのファイルの内容を解釈して、閲覧者のPC上にホームページを表示します。
ホームページは指定されたアドレス(URL)の入力で最初に表示される「トップページ」( index.html もしくは index.htm)と、
そこから「リンク」される「サブページ」等で構成された次のような構造になっています。
| |
トップページ |
─ |
┬ フォルダ11 |
─ |
┬ サブページ111 |
| ├ サブページ１ |
├ サブページ11 |
├ 画像111 |
| ├ 画像G1 |
└ 画像11 |
└ 音声111 |
| ├ サブページ２ |
|
|
| └ フォルダF1 |
─ |
┬ サブページF11 |
─ |
┬ サブページF111 |
| |
├ 画像F11 |
└ サブページF112 |
| |
└ スタイルシートF11 |
|
これはパソコンに層構造のフォルダがあり、それぞれにいくつかのファイルがあることと同じですが、
各ページで表示画像やファイルを指定したり、画像や文字をクリックすると、
他のページにジャンプしたりするように 「リンク設定」 されていることが HTMLファイル特徴です。
・各ページの構成は？
通常各ページファイルは「ＨＴＭＬファイル」や画像ファイル等と、それらを含むフォルダ等のセットとして構成されます。
詳しくは、以下の文や、「ＨＴＭＬの初歩」をご覧下さい。
＊出来たらまず自分のパソコンで確認をし、
よかったら Web サーバにアップロードして「公開」します。
自分のＰＣ上に作ったホームページの「原稿」は公開する前にWebブラウザで確認しましょう。この際色々な不都合も修正しましょう。
また必要なら自作CGIの確認も出来るように出来ます。詳しくは関連ページリンクなどを参照してください。
HTML（Hyper Text Markup Language）文は<HTML>で始まり</HTML>で終わります。
<HEAD>〜</HEAD>の部分をヘッダ部と呼びます。ヘッダ部にはタイトルなどを記述します。
<TITLE>〜</TITLE>でタイトルを書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、必ず記述するようにします。
<BODY>〜</BODY>の部分が本文です。この部分がブラウザのウィンドウ枠に表示されます。この部分に、<B>や、<BR>や、<FONT>などを使用して飾り付けをおこなっていきます。
<HTML>や<HEAD>などを「タグ」、HTMLやHEADなどを「タグ名」と呼びます。タグ名には header → <HEAD>、break
→ <BR> など、英語のスペルを元にした名前が付けられています。
タグはほとんどの場合<B>〜</B>のように開始タグと終了タグで囲みます。開始タグのタグ名にスラッシュ（/）をつけたものが終了タグです。たまに、<BR>のような単独タグもあります。
タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述します。また"<"の後に空白があってはなりません。
○ <HTML>
○ <html>
× ＜ＨＴＭＬ＞ ← 全角文字は駄目
× < HTML> ← <の後に空白を入れては駄目
開始と終了は、他の開始〜終了タグの完全に外側か、完全に内側に無くてはなりません。例えば、<S>〜<S>タグを記述する場合、次のようになります。
○ <S>〜<B>〜</B>〜</S> ← 完全に外側
× <B>〜<S>〜</B>〜</S> ← 終了タグ(</B> )のみを挟んでいる
<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>
属性値も多くの場合大文字・小文字どちらでも構いませんが、ごくたまに大文字・小文字を区別する場合（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>
ダブルクォーテーション( " )の中ではシングルクォーテーション( ' )を、シングルクォーテーション( ' )の中ではダブルクォーテーション(
" )を用いることができます。
○ <INPUT TYPE=button onClick="alert('XXX')">
× <INPUT TYPE=button onClick="alert("XXX")">
どうしても両方を使用したい場合は、ダブルクォーテーションの代わりに" を指定します。
○ <INPUT TYPE=button onClick="alert("X'X")">
複数の属性を指定したい時は、ひとつ以上のスペースまたはタブまたは改行のあとにもうひとつの属性を記述します。順番は関係ありません。
○ <FONT SIZE=7 COLOR=red>〜</FONT>
いずれにしても、ＨＰ作りではまず簡単なものを作って、ブラウザで確認して、誤りや不足分を修正・追加してゆくのが結局は早道だと思います。
すべて勉強してからではなくて、やりながら覚えるのがコツのように思います。がんばりましょう。
C:\My Documents\test.html - Microsoft････