ホームページの構造　 戻る





インタへネットの世界　

Webの仕組み

　インターネットを見ている人を、ユーザー(クライアント)と言い、 インターネットを提供している側をサーバーという。ユーザーは PCやスマホでインターネットを見ているが、見るためのソフトを ブラウザーといい、Internet Explorer(IE)、Microsoft Edge、 Google Chrome、Safari、Firefox、等々があるが、ユーザーが 意識しなくとも購入したパソコンにはいづれかが標準装備されている。 　WEBページはすべてHTML文で書かれており、ブラウザーはそれを 解釈してユーザのパソコンに画面として表示している。
　したがって、ホームページのプログラムを開発するには、 まず、HTML言語を使用しなくてはならない。つまり、 PHP言語の習得の前提として、HTML言語に精通していることが求められる。
　このように、HTMLはユーザのPC内で働くプログラムであるので、 ユーザーサイドのプログラムと呼ばれる。
　一方、PHP言語は、サーバサイドのプロクラムであり、 ユーザのPC内では働かず、サーバにおいてのみ働くものであり、 働きとしては、HTML文を作り出すソフトである。PHPが作り出した HTML文も、もともとHTMLで書かれたHTML文も区別することはできないので、 ユーザにとっては、PHPが関わっているのはどうかは知ることは難しい。

HTMLについて

　まず、HTML言語によるプログラムの作成に ついて簡単に述べ、その後にPHP言語の学習をする。
  1. HTML言語の骨組み
    <html>
    <title>
    　・・・　　　　　　　　　←画面の体裁を決める(省略することもある)
    < /title>
    <body>
    　・・・　　　　　　　　　←プログラムの記述
    　・・・
    　・・・
    </body>
    </html>
  2. 命令の殆どは、< >で始まり、</ >でおわる。
    例外は、</ >がない、改行を示す<br>と、水平線を描く <hr>等である。
    これらを、タグという。非常に多くの種類のタグがある。
  3. 表を作る　< table >　タグ
    　　行を決めるタグ　<tr>　</tr>　
    　　セルを決めるタグ　<td>　</td>
    　<table>タグの中で、表の幅、枠線の幅を指定する。
    １
    ２
    ３
    ４
    上の表を描くHTMLプログラムは
    <html>　
    <body>　
    <table width="100%" border="1px">
    <tr><td>１</td><td></td<td></td><td></td><td></td></tr>
    <tr><td>２</td><td></td<td></td><td></td><td></td></tr>
    <tr><td>３</td><td></td<td></td><td></td><td></td></tr>
    <tr><td>４</td><td></td<td></td><td></td><td></td></tr>
    </table>
    </body>　
    </html>　

    となる。
  4. HTMLプログラムの実行
    　ここで、HTMLプログラムを実行してみよう。上のピンクの部分をコピーし、 wordなどいつも使っているエディタにペーストして、test000.htmlという名前で どこかのフォルダ内に格納する。エクスプローラーなどでいま格納したtest000.html を探し出して、名前の上をダブルクリックすると、IEなどが立ち上がって、表が 現れる。これができれば、プログラムの実行が出来たことになる。
    　ユーザーサイドのプログムであるHTMLは自分のパソコン上で簡単に実験ができ、 試行錯誤して仕上げてゆくことができるのである。
  5. 枠を作る　div　タグ
    上のピンクの枠を作るには、<div> タグを用いる。
    実際のブログラムでは、
    <DIV style="background-color:#FFDDFF; POSITION:relative;top:10px;left:10px;width:90%;">

    となっている。
    　タグの中での、表の幅、表の高さ、枠線の幅を指定法が、table のそれとは異なっている。 ここでは、style="　" という形の指定法を用いているが、これは、スタイルシート方式によるものである。
    top によって枠の上の位置、left によって枠の左位置が決まるが、POSITION が相対(relative)となっているので、枠の 直前の位置から、10px 下にずれた位置を表す。　px はピクセル単位を表す。絶対(absolute)とすれば、ページ 最上端からの位置になる。
    　枠内の色を定めるのに、♯FFDDFF という記号が使われている。色の指定法は後で述べる。
  6. スタイルシート
    タブの位置、幅、高さ、色、枠線の有無、・・・いろいろの属性を定めるには、table での例のように、 タグの中に直接記述できる簡単な属性は別にして、大部分の属性はスタイルで決める。 スタイルを記述する方法は３つある。
    1. おのおのタグの中
      　style="　　" の中に、　属性：値； の形で設定する。上に示した<DIV>タグの中がその例である。 個々のタグの属性を別々に指定するときに用いる。
    2. プログラムの<head>と</head>の中
      　プログラムの中に沢山の表や枠があり、それらが同じスタイルである場合、 個々のタグの中に同じことをを書き込んでゆくのは煩わしいという場合、 一括したスタイルを一か所に書いて置き、個々の タブはそれを引用するのが便利という場合に用いる。
      以下に例を示す。 本館では用いていない。
      <head>
      <style type="text/css">
      <!--
      div {
      　　　background-color:♯FFDDFF;
      　　　POSITION:relative;
      　　　top:10px;
      　　　left:10px;
      　　　width:80%;
      　　　height:auto;
      }
      -->
      <style>
      </head>

    3. 拡張子 .css というファィルに上で示したような記述をすべて記し、各プログラムから読み込む
      　どのページも同じスタイルで書かれる統一したホームページにはこの方式が 向いており、多くのホームページはこれを採用している。しかし、本館の様に 各ページがそれぞれスタイルが異なる場合には向かないので、これを採用していない。 従って解説はしない。
  7. ホームページの作り
    　ヘッダー　　
    左欄　右欄　
    　フッター

    　普通のホームページの表紙部分は、左の ような形式になっていることが多い。
    これは、table を使って寸法決めをすれば外形は作ることが出来る。
    ヘッダーとフッターは図を用意して、それぞれ張り付ければよい。
    左欄は、リンクを並べることが多いので、1列のtable を作れば、実現できる。
    この形式を作る方法には、table の他にも、frame を用いる法、li、div を 用いる法もある。






　　
戻る