ホームページのしくみ


ホームページの仕組みはどのようになっているの?

  まずホームページの基礎事項を少し勉強しておきましょう。  基本マナー  とにかく作る  参考サイト1  参考サイト2
・どこに作るの?

 ホームページは、インターネットに接続された Web サーバーにあるファイルを、 閲覧者がブラウザソフトを使って、観ることが出来るシステムです。

1.まずホームページの作成者は、テキストエディタを使って自分のパソコン上にホームページの原稿ファイルを作ります。
  *ファイルやフォルダ名に使える文字は、基本的には半角英数字のみだと考えて下さい。
 
2.次にこのファイルを、ホームページを公開するサーバー*の指定フォルダに、「 ファイル転送ソフト」を使って、転送(アップロード)します。
  *個人の場合、プロバイダーの提供するサーバーを借りるのが一般的です。

3.閲覧者がブラウザソフトを使って、Web サーバーのファイルアドレス (URL)を指定すると、Web サーバーに転送されているファイルの内容が閲覧者に知らされ、ファイルの内容を観ることが出来ます。 

   詳しくは、HP作りの流れで、 またネットワークに関しては、こちらをご覧下さい


・ホームページの構造 (ツリー構造)

  Web サーバーに置かれたホームページとなるファイルは、HTMLファイルと言う決まりで作る必要があります。
  閲覧者のブラウザソフトはそのファイルの内容を解釈して、閲覧者のPC上にホームページを表示します。
 
  ホームページは指定されたアドレス(URL)の入力で最初に表示される「トップページ」( index.html もしくは index.htm)と、 そこから「リンク」される「サブページ」等で構成された次のような構造になっています。

       トップページ ┬ フォルダ11 ┬ サブページ111
  ├ サブページ1 ├ サブページ11 ├ 画像111
  ├ 画像G1 └ 画像11 └ 音声111
  ├ サブページ2    
  └ フォルダF1 ┬ サブページF11 ┬ サブページF111
  ├ 画像F11 └ サブページF112
  └ スタイルシートF11   

 これはパソコンに層構造のフォルダがあり、それぞれにいくつかのファイルがあることと同じですが、 各ページで表示画像やファイルを指定したり、画像や文字をクリックすると、 他のページにジャンプしたりするように 「リンク設定」 されていることが HTMLファイル特徴です。

・各ページの構成は?

 通常各ページファイルは「HTMLファイル」や画像ファイル等と、それらを含むフォルダ等のセットとして構成されます。
  詳しくは、以下の文や、「HTMLの初歩」をご覧下さい。

*出来たらまず自分のパソコンで確認をし、   よかったら Web サーバにアップロードして「公開」します。

 自分のPC上に作ったホームページの「原稿」は公開する前にWebブラウザで確認しましょう。この際色々な不都合も修正しましょう。
 また必要なら自作CGIの確認も出来るように出来ます。詳しくは関連ページリンクなどを参照してください。


具体的にページはどのように書くの?

     次にホームページの各ページの書き方についても、少し勉強しておきましょう。

  左下のようなテキストファイルを作り、ファイル名を「test.html」として保存してブラウザでみると、右下のように見えます。
テキストファイル ブラウザの表示画面
 これでもホームページ?
 
 
 
 C:\My Documents\test.html - Microsoft・・・・
File Edit  View fAvorite Tool Help 
 これでもホームページ?
 
 これでも一見ホームページのように見えています。とにかく、「***.html」のように拡張子を .html (または htm )として保存すると、 ホームページファイルらしくなります。

  でも文字を大きくしたり、色を付けたり、改行するにはどうすればよいのでしょうか? それには以下のような、HTMLのルールに則ってファイルを作らなければなりません。

  *ワードの文書などをWebページとして保存することで、簡単にホームページを作る ことも可能ですが、ここに書いてある初歩的な事項は理解しておくと良いでしょう。
 
    ・各ページの基本型
 トップページもサブページも、各ページの基本型は次のような構造をしており、それを ***.html(または***.htm)というように拡張子を付けて保存します。
HTML文書

ヘッダ部


本文
┬─
│┌
─┤
│└
│┌
─┤
│└
└─
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
 本文 (実際の表示部分)
</BODY>
</HTML>


 [ヘッダ部には、ページの色々な情報等を記述します]


 [本文には、実際に表示させる内容を記述します]

    ・HTML文(基本事項)   [具体的なHTMLについて少し説明しておきます]

 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>  ← 全角文字は駄目
  × < 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")">

 どうしても両方を使用したい場合は、ダブルクォーテーションの代わりに&quot; を指定します。
  ○ <INPUT TYPE=button onClick="alert(&quot;X'X&quot;)">

 複数の属性を指定したい時は、ひとつ以上のスペースまたはタブまたは改行のあとにもうひとつの属性を記述します。順番は関係ありません。
  ○ <FONT SIZE=7 COLOR=red>〜</FONT>


 以上基本的なルール(タグの記述)について述べました。 実際のページについては、作ってみるで、さらに勉強します。

 いずれにしても、HP作りではまず簡単なものを作って、ブラウザで確認して、誤りや不足分を修正・追加してゆくのが結局は早道だと思います。 すべて勉強してからではなくて、やりながら覚えるのがコツのように思います。がんばりましょう。


TopHP作りTopHPの仕組/ net回線/ HP準備/ HPを作る/ ファイル転送/ 基本HP/ 基本タグ/ 作成フローゼロからHTML初歩手軽に作る