あなたも Web-Page を 作ってみよう


eBiz で 仕事のやり方を 変えよう という 掛け声が あります。そして、アンケート を とれる Page や JavaApplet で ダイナミックな 動きの Page を 目にするように なりました。
皆さん それぞれ PC の 環境 や 開発経験 が 異なっているので、直接 手助けでき るわけでは ありませんが、 Home-Page を 作成するうえで 共通の 基本的な 事項を 2 - 3 回 に 分けて 解説します。


( A 子 : )
ポスターなどを 作るのは 得意な方なので、今度 ホームページに 挑戦してみようと 思っているのですが、何から 始めらいいか、分からないのです。

( B 先輩 : )
きっと いいホームページが 作れるのじゃないでしょうか。 MS-Word や PowerPoint で 文書を作る やり方から 少し 頭を 切り替える 必要が ありますね。 ハイパーテキスト という 言葉を どこかで 聞いたことが ありますか ?

( A 子 : )
いえ、... 。 もしかしたら、HTML の HT のことでは ?

( B 先輩 : )
ピンポン。 英和辞書を 引く 時、例文の中に 分からない 単語があると、また それを 調べて いきますよね。 こんな時、単語を クリックするだけで、新しく Window が 開いて 次々に 訳語を 表示すると、便利です ...

( A 子 : )
ホームページ や Exchange メール で、自分の 指示に従って あちこち 飛んでいける ことを おっしゃりたいのですね。 その 仕組みが ポイントであることは 分かります。

( B 先輩 : )
そうなんです。 テキストだけでなく イメージや 動作指定まで 盛り込まれ、 また TCP/IP による Network 網 が 普及して、大変 ポピュラーに なりました。
仕組みの 一つが Internet-Explorer や Netscape-Navigator などの ブラウザ であり、もう 一つが HTML 文書 というわけです。

( A 子 : )
なるほど、ブラウザ と HTML 文書 ですね。

( B 先輩 : )
実は もう一つ、HTML 文書 の 置かれる Server と ブラウザのある Client が 交信を 行うための 規格、HTTP も 必要なのですが、これは 後に 回しましょう。 そして、HTML とは どんなものか 具体的に 見ていくことに しましょう。

( A 子 : )
分かりました。 たしか HTML の L は Language でしたか、Language であるからには 文法書が あるわけですよね。

( B 先輩 : )
その通りです。 IETF とか W3C という 組織が あって 標準化を 行ってきました。 でも これは ものすごい 勢いで 拡張されていましてね、 HTML 文書の 冒頭には 従った 規格の Version を Tag として 記載することに なっています。

( A 子 : )
やはり、Tag を 勉強しなければ いけませんか ...

( B 先輩 : )
いえ、FrontPage や HomePage-Builder などの 編集 Soft を 使っていれば 必要ないかも 知れませんが、基本的なことは 知っておいたほうが、自分の 希望する 仕上がりに 早く 到達できると 思うのです。
HTML 文書 の Text 以外 のところは、Tag と 言われるもので 構成されます。 Tag は 例えば <TABLE>、</TABLE> のようなもので、"<" と ">" で Tag 名 を 挟んだ 格好を しています。
普通は、"/" 付 の もの との 間に Text、他の HTML 文 が 置かれます。

( A 子 : )
"/" の ない Tag で 始まって、"/" 付 の Tag で 終わり、それらが 入れ子に なっている ということ ですね。

( B 先輩 : )
まぁ そうです。 HTML-Page は、Program のように 基本的構造 を もっています。 それは Tag 名 が HTML、HEAD、BODY のもの を 使うのですが、次を 見てください。
- - - - - - - - 部分 は HEAD、BODY それぞれに 記述する 内容が 決まっています。 

  <HTML>
    <HEAD>
      - - - - - - - - - - - - - 
      </HEAD>
    <BODY>
      - - - - - - - - - - - - - 
      </BODY>
    </HTML>
( A 子 : )
なるほど、そのよう ですね。

( B 先輩 : )
上の 記述では Indent ( 字下り )、改行 を 使いましたが、HTML では その 意味で 解釈されません。 代表的な 段落 ( Paragraph ) Tag、<P> では Text の 改行を 行うために <BR> Tag を 使用します。
それから、Tag には、値を 与えたり 動作を 指定するために 属性 を 付加します。 下の COLOR、SIZE、HREF の 例 を 見ていただけば 分ると 思います。 

  <FONT COLOR="#FF0000">赤の 文字 です。</FONT><BR>
  <FONT SIZE=5>文字の Size を 大きくしました。</FONT><BR>
  <A HREF="http://3.28.123.4/free/GTO/indexj.htm" TARGET="_TOP">GEYMS GTO Page</A>

   赤の 文字 です。
   文字の Size を 大きくしました。
   GEYMS GTO Page


( A 子 : )
だんだん 難しく なってきました ...

( B 先輩 : )
少し 複雑に なってきましたね。 Tag は 他にも OL、DL、IMG、TITLE、META、SCRIPT、など 非常に 沢山あり、実際に 使われています。
実は ブラウザの 持っている 機能で、表示中の Page の Source-Code を 表示させることが 出来ますので、興味のあるところを 少しづつ 学べるのです。
また、Home-Page は メモ帳 のような Editor が あれば 作成できますし、自分の PC の Hard-Disk に File として 保存しておいて ブラウザで 表示できます。

( A 子 : )
試しに 作って、ブラウザで 表示し、更に 手直ししたり 追加していけば 良いわけ ですね。

( B 先輩 : )
そうです。 次回は、 Tag の 続き と、Server への UpLoad / DownLoad、FrontPage での 作成 に 触れましょう。



Smpl-Image