第5節 ホームページを充実させる

  ようやくホームページを公開できましたが、これでは何とも物足りないホームページですね!
  僕の趣味のページを作りたいし、みんなに勧めたいホームページの紹介もしたい
  また、みんなと話せる、掲示板も是非とも作りたいなあ〜〜♪
  それでは、僕と一緒に、色んなページを揃えて、より充実したホームページにしていきましょう



 @ リンクページを作る
 A リンクを貼る
 B ホームページの全体構成
 C 趣味のページを作る(前編)
 D 趣味のページを作る(後編)
 E お勧めリンクのページを作る
 F もう一工夫! (BGMと流れる文字)
 G ホームページの更新



@ リンクページを作る

ホームページに、「趣味の紹介」とか、「お勧めホームページ紹介」などを付け加えたいのですが、一つのページにすると、だらだら長くなってなりすぎて、非常に見にくし、またホームページの主旨も分かりにくいですね。

従って、テーマ毎にいくつかのページにまとめ、トップのメニューページから各ページの主旨の紹介をし、自由な往来を設定すると、わかりやすいサイト(まとまりのあるページ全体の事)になります。

あるページから、別のページに行けるよう、つなぐ事をリンクすると言います。

本来リンクを考える時は、ホームページ全体の構成を考えなければなりませんが、リンクの要領を理解して貰うのに、まず自己紹介の部分を分割して別ページにし、メニューページとの間を互いにリンクさせましょう。

その準備として、この項では「メニューページ」と「自己紹介のページ」の2つのページを作ります。
自己紹介のページを作る
前節までに作ったホームページより、自己紹介の部分を抜き取り、一つのHTMLファイルにします。
この色の部分は、前項までに作ったホームページの自己紹介部分の抜き取りです。
メモ帳
<html><head>
  <title>くまさんの自己紹介</title>  ← タイトル名を設定
</head>

<body background="parts/bg.gif">
<div align="center">

<!-- ++++++++++ 自己紹介 ++++++++++ -->
 <img src="parts/hana4.gif" vspace="10"><br>

 <font size="5" color="#bb00ff">
  <img src="parts/profile.gif" align="absmiddle">
   <b>  自 己 紹 介  </b>
  <img src="parts/watashi1.gif" align="absmiddle">
 </font><br><br>

<table border="5" cellpadding="10">

   <colgroup width="100" align="center" bgcolor="#ffdddd"></colgroup>
   <colgroup width="350" bgcolor="#ffeeee"></colgroup>

 <tr><td>なまえ</td>
     <td> <i>くまさん</i></td></tr>
 <tr><td>住 所</td>
     <td> 兵庫県の中部の田園地帯</td></tr>
 <tr><td>仕 事</td>
     <td> ぱーぷりんの助手</td></tr>
 <tr><td>年 齢</td>
     <td> 30歳代</td></tr>
 <tr><td>趣 味</td>
     <td> <u>パソコン・スキー</u>が特に好き</td></tr>
 <tr><td>高 校</td>
     <td> ぱーぷりん高校を何とか卒業</td></tr>
 <tr><td>大 学</td>
     <td> ぱーぷりん大学でパソコンを専攻</td></tr>
</table><br>

 <img src="parts/tulip1.gif">
 <img src="parts/tulip3.gif" hspace="50">
 <img src="parts/tulip4.gif"><br><br>

</div>
</body></html> 
これを,HTMLファイル syokai.html にして home フォルダに保存します。
右のスイッチをクリックして,表示した上で、ソースを参照してください。
メニューページを作る
一方、メニューページの方は、おおむね自己紹介部分を抜いた残りで、次のようになります。
メモ帳
<html><head>
  <title>くまさんのHP</title>
</head>

<body background="parts/bg.gif">
<div align="center">

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="5" width="550" color="green">
 <font size="7" color="red">くまさんのホームページ</font>
 <hr size="5" width="550" color="green">

<!-- ++++++++++ あいさつ ++++++++++ -->
 <img src="parts/hana1.gif" vspace="10"><br>
 <img src="parts/line3.gif">

<table border="0">
 <tr><td>
  <img src="parts/kuma.gif">
 </td><td>
  <font color="navy" face="HG創英角ポップ体">
   ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
   まだ始めたばかりなので、内容はあまりありませんが、<br><br>
   すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
  </font>
 </td></tr>
</table>

 <img src="parts/line3.gif"><br>
 <img src="parts/hana4.gif" vspace="10"><br>

 <img src="parts/line2.gif"><br><br>

<!-- ++++++++++ メールを貼る ++++++++++ -->
 <a href="mailto:perplin@mail.goo.ne.jp">
  <img src="parts/mail2.gif" border="0">
 </a><br>

</div>
</body></html> 
これを,HTMLファイル index.html にして home フォルダに保存します。
右のスイッチをクリックして,表示した上で、ソースを参照してください。


A リンクを貼る

第2節の「G メールにリンク」で、リンクのタグは習いましたが、再度タグのおさらいしましょう。
  リンクする
<a href="***"> 文章または画像 </a>
  *** : リンク先のアドレスを指定します
「文章または画像」に、マウスを近づけると指型になり、クリックでリンクします
「文章」の場合、アンダーラインが引かれます
「画像」の場合,画像属性でborder="0"としないと枠線が入ります
index.html 側より syokai.html を呼び出す部分は次のようになります。
<a href="syokai.html">自己紹介</a>
syokai.html 側より index.html を呼び出す部分は次のようになります。
<a href="index.html">homeに戻る</a>
メニューページ側
まずは index.html ファイルの、リンク挿入部前後のソースファイルを示します。
赤色部分 が付け加えた部分です。
メモ帳
<!-- ++++++++++ あいさつ ++++++++++ -->
 <img src="parts/hana1.gif" vspace="10"><br>
 <img src="parts/line3.gif">

<table border="0">
 <tr><td>
  <img src="parts/kuma.gif">
 </td><td>
  <font color="navy" face="HG創英角ポップ体">
   ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
   まだ始めたばかりなので、内容はあまりありませんが、<br><br>
   すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
  </font>
 </td></tr>
</table>
 <img src=parts/line3.gif><br>

<!-- ++++++++++ リンク ++++++++++ -->
  <img src="parts/hana4.gif" vspace="10"><br>
 <a href="syokai.html"><font size="5">自己紹介</font></a><br><br>
  <img src="parts/line2.gif"><br><br>

<!-- ++++++++++ メールを貼る ++++++++++ -->
 <a href="mailto:perplin@mail.goo.ne.jp">
  <img src="parts/mail2.gif" border="0">
 </a><br>
自己紹介ページ側
次に syokai.html ファイルの、リンク挿入部前後のソースファイルを示します。
赤色部分 が付け加えた部分です。
メモ帳
 <tr><td>なまえ</td>
     <td> <i>くまさん</i></td></tr>
 <tr><td>住 所</td>
     <td> 兵庫県の中部の田園地帯</td></tr>
 <tr><td>仕 事</td>
     <td> ぱーぷりんの助手</td></tr>
 <tr><td>年 齢</td>
     <td> 30歳代</td></tr>
 <tr><td>趣 味</td>
     <td> <u>パソコン・スキー</u>が特に好き</td></tr>
 <tr><td>高 校</td>
     <td> ぱーぷりん高校を何とか卒業</td></tr>
 <tr><td>大 学</td>
     <td> ぱーぷりん大学でパソコンを専攻</td></tr>
</table><br>

<!-- ++++++++++ リンク ++++++++++ -->
 <img src="parts/tulip1.gif">
 <img src="parts/tulip3.gif" hspace="50">
 <img src="parts/tulip4.gif"><br><br>

 <a href="index.html"><font size="5">homeに戻る</font></a>

 <br><br></div>
</body></html>
右のスイッチをクリックして,表示した上で、ソース全体を参照してください。
これで、二つのファイルが、互いにリンクで、つながりました。


B ホームページの全体構成

リンクの要領が分かったところで、次はホームページ全体のリンクの構成を考えましょう。

ホームページにどのような内容のページを掲載するかを計画するのですが、まずはサイトとしての コンセプト を考え、それを構成する1ページとして、各ページを計画する訳です。

この作業は、ホームページ作りで、もっとも重要な部分ですが、ここで掘り下げて考えていては前に進みませんので、今回は、とりあえずのページ構成をしておきます。
全体構成の計画
■まず「趣味のページ」として、「スキーの体験ページ」を作ってみましょう。
  写真を中心にワンコメントを挟み、タイトルは「スキーが好き!」、ファイル名は ski.html にします。

■次に、「お勧めホームページへのリンク」のページを作りましょう。
  勧めたいhpを分野毎に分け、タイトルは「お勧めリンク」、ファイル名は link.html にします。

■そして、来訪者との話し合いの場である「掲示板」のページを作ります。
  フリーのCGI「ASUKA BBS」を設置し、タイトルは「雑談コーナー」、ファイル名は asuka.cgi です。
  CGIについて詳しくは、後節でとりあげます。

■最後に、既に出来ている「自己紹介のページ」を併せ、全体構成図と、ファイル名を次に示します。
   ホームページの全体構成図

                            +-- 自己紹介(syokai.html)
                            l
メニューページ(index.html) -+--- スキーが好き!(ski.html)
                            l
                            +-- お勧めリンク(link.html)
                            l
                            +-- 雑談コーナー(asuka.cgi) 
メニューページを修正
それでは、メニューページ index.html のリンク部分を修正してみましょう。
1行4列のテーブルを作り、各セルにリンクページのタイトル名を入れ、それにリンクを貼ります。
この時、テーブルの背景色、内罫線の幅、罫線の非表示を利用して、スイッチ風に工夫してあります。
リンクの注釈文以降の部分で、この色の部分は、修正した所です。
メモ帳
<!-- ++++++++++ リンク ++++++++++ -->
  <img src="parts/hana4.gif" vspace="10"><br>
 <font size="5" color="#e000e0">☆☆☆ menu ☆☆☆</font><br> 
 <table width="550" cellpadding="5" cellspacing="10">
    ↑文字と罫線の空きを5ピクセル、罫線幅を10ピクセルにして、罫線は非表示
  <tr align="center">
   <td bgcolor="#ffff00" width="25%"><a href="syokai.html">自己紹介</a></td>
   <td bgcolor="#aaff55" width="25%"><a href="ski.html">スキーが好き!</a></td>
   <td bgcolor="#55ffaa" width="25%"><a href="link.html">お勧めリンク</a></td>
   <td bgcolor="#00ffff" width="25%"><a href="asuka.cgi">雑談コーナー</a></td>
  </tr>
 </table>

 <img src="parts/line2.gif"><br><br>
これを,HTMLファイルにして表示すると,次のようになります。

☆☆☆ menu ☆☆☆
自己紹介 スキーが好き! お勧めリンク 雑談コーナー


全体ではどのようになるでしょうか。
右のスイッチをクリックして,表示した上で、ソースを参照してください。

ただしリンクをクリックしても、「自己紹介」以外はファイルがないのでエラーになります。
(エラーを出したくないので、リンクしていません)


C 趣味のページを作る(前編)

前項でリンク構成した「スキーが好き!」 ski.html のページを作りましょう。

このページは写真を中心に、ちょっとコメントを加えたアルバム系にしてみましょう。
この ski.html のページ構成を次の様にします。
ski.html のページの全体構成
タイトル → 案内文 → 写真と簡単なコメント → メニューページへリンク
まずは、このページで飾り付けに使う、イラスト画像とファイル名の一覧です。
これらの画像ファイルを、parts フォルダに置いておきます。


yuki1.gif

ski.gif

bg3.gif

snow1.gif

snow2.gif
タイトル →案内文
まずタイトルは、親ページ同様に「スキーが好き!」の上下に水平線を引きましょう。
タイトル文字の大きさは、メニューページより少し小さくしましょう。

次に案内文は簡単なページ説明を「HG創英角ポップ体」で書き、上下に、上記のラインのイラストを入れます。

新たな画像イラストのファイルを緑色で示しました。
バックの画像は、 bg3.gif を使いましょう。

詳しくは、下のソースファイル内にピンクでコメントします。
メモ帳
<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="3" width="300" color="#00ffff">  ← タイトル上のボーダー
 <font size="6" color="#ffffff">スキーが好き!</font>  ← タイトル文
 <hr size="3" width="300" color="#00ffff">  ← タイトル下のボーダー

<!-- ++++++++++ 案内文 ++++++++++ -->
 <img src="parts/yuki1.gif" vspace="10"><br>  ← 雪の結晶のイラスト
 <img src="parts/snow1.gif">  ← 案内文上の雪の画像ボーダーのイラスト

<table border="0">  ← スキー熊の画像と案内文をくくるテーブルの開始
 <tr><td>
  <img src="parts/ski.gif" hspace="20">  ← スキー熊の画像
 </td><td>
  <font color="#cccccc" face="HG創英角ポップ体">  ← 文字の色と書体の設定
    ウィンタースポーツは何たってスキー!!<br><br>  ← 案内文の開始
    今年もいろんな所へ行ってきたよ〜♪<br><br>
    それじゃ〜白銀の世界へ案内します。  ← 案内文の終了
  </font>
 </td></tr>
</table>  ← スキーの画像と案内文をくくるテーブルの終了

 <img src="parts/snow2.gif"><br>  
      ↑案内文下の雪の画像ボーダーのイラスト
 <img src="parts/yuki1.gif" vspace="10">  ← 雪の結晶のイラスト
これを,HTMLファイルにして表示すると,次のようになります。

 スキーが好き!

ウィンタースポーツは何たってスキー!!

今年もいろんな所へ行ってきたよ〜♪

それじゃ〜白銀の世界へ案内します。



ソースファイルと表示内容の関係を確かめ、理解できましたか。
img タグ内の vspacehspace 属性で、画像の周りのスペースを確保して、バランスをとっています。


D 趣味のページを作る(後編)

写真と簡単なコメント
引き続き「写真と簡単なコメント」の部分を作りましょう。
まずコメントを書き、続いて写真画像を貼り付けます。
 (写真画像は、あらかじめ 450x330 ピクセルに加工しています。)
メモ帳
<!-- ++++++++++ 写真を貼る ++++++++++ -->
 <font color="#ffffff">白銀の北アルプス(笠岳)</font><br>
   ↑ 簡単なコメント文
  <img src="parts/ski06.jpg"><br><br><br>
   ↑ 写真画像 ski06.jpg の貼り付け
これを,HTMLファイルにして表示すると,次のようになります。
白銀の北アルプス(笠岳)

この要領で、写真の数だけ繰り返します。

この時注意するのが、画像ファイルは文字などに比べ、大きな容量なので、必要以上に大きな画像や、飾り付けの為だけに不要にたくさんのイラスト画像を、一つのページに貼り付けない事です。

将来的にブロードバンドが普及するまでは、たとえ画像をテーマにしたページでも、ページあたり150KB以下くらい迄に押さえましょう。(メニューページなどはもっと軽く!)
メニューページへリンク
最後に「メニューページへリンク」の部分を作りましょう。
メモ帳

 <!-- ++++++++++ メニューページへリンク ++++++++++ -->
 <img src="parts/yuki1.gif" vspace="10"><br><br>  ← 雪の結晶のイラスト
  <a href="index04.html">
   <font color="#ffffff" size="5">homeに戻る</font></a>
これを,HTMLファイルにして表示すると,次のようになります。

ホームページ全体
それでは全体を通してソースファイルを書いてみましょう。
メモ帳
 <html><head>
  <title>スキーが好き!</title>  ← タイトル名の設定
</head>

<body background="parts/bg3.gif">  ← 壁紙 bg3.gif の設定
<div align="center">  ← 中央寄せの設定開始

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="3" width="300" color="#00ffff">
 <font size="6" color="#ffffff&"gt;スキーが好き!</font>
 <hr size="3" width="300" color="#00ffff">

<!-- ++++++++++ 案内文 ++++++++++ -->
 <img src="parts/yuki1.gif" vspace="10"><br>
 <img src="parts/snow1.gif">

<table border="0">
 <tr><td>
  <img src="parts/ski.gif" hspace="20">
 </td><td>
  <font color="#cccccc" face="HG創英角ポップ体">
    ウィンタースポーツは何たってスキー!!<br><br>
    今年もいろんな所へ行ってきたよ〜♪<br><br>
    それじゃ〜白銀の世界へ案内します。
  </font>
 </td></tr>
</table>

 <img src="parts/snow2.gif"><br>
 <img src="parts/yuki1.gif" vspace="10"><br><br>

<!-- ++++++++++ 写真を貼る ++++++++++ -->
 <font color="#ffffff">青空とボード</font><br>
  <img src="parts/ski01.jpg"><br><br><br>  ← 1枚目の写真

 <font color="#ffffff">モーグルの大会してました</font><br>
  <img src="parts/ski02.jpg"><br><br><br>  ← 2枚目の写真

 <font color="#ffffff">なかなか決まってるでしょう♪</font><br>
  <img src="parts/ski04.jpg"><br><br><br>  ← 3枚目の写真

 <font color="#ffffff">スキーがメインだよ!</font><br>
  <img src="parts/ski05.jpg"><br><br><br>  ← 4枚目の写真

 <font color="#ffffff">北アルプスの西穂高岳・・美しい!</font><br>
  <img src="parts/ski07.jpg"><br><br>  ← 5枚目の写真

 <!-- ++++++++++ メニューページへリンク ++++++++++ -->

 <img src="parts/yuki1.gif" vspace="10"><br><br>
  <a href="index04.html">
   <font color="#ffffff" size="5">homeに戻る</font></a>

</div><br><br>  ← 中央寄せの設定終了

</body></html> 
右のスイッチをクリックして,表示した上で、ソースを参照してください。
メニューページや自己紹介ページへのリンクも確認してください。


E お勧めリンクのページを作る

先項でリンク構成した「お勧めリンク」 link.html のページを作りましょう。
このページのリンク先ホームページは、ここを作るのに参考になったものを、種類別にしましょう。

今回は、リンクした時に、新しいウインドウを開くようにします。
これは次のように、リンクの属性で指定できます。
  リンク時のウインドウ指定
<a href="***" target="***"> 文章または画像 </a>
  target="_blank" : リンク時に新たにウインドウを開く
  target="_self"  : リンクしても今のウインドウのまま(規定値)
この link.html のページ構成を次の様にします。
  link.html のページの内部構成

タイトル → 案内文 → 分野毎のお勧めリンク(表にする) → メニューページへリンク
冒頭の「タイトル → 案内文」の部分は、サイトのデザインの統一を図り、スキーのページと同様にし、画像と色のみ変えます。

また最後の「メニューページへリンク」の部分も、スキーのページとほぼ同じです。

これらの部分は、下の「ホームページ全体」のソースファイルの解説を参考にしてください。
ここまで学習を進めて来れば、十分に理解出来るはずですよ!

それでは残る、「分野毎のお勧めリンク(表にする)」の部分を、説明します。
イラスト画像とファイル名の一覧
まずは、このページで飾り付けに使う、イラスト画像のファイル名の一覧です。
これらの画像ファイルを、parts フォルダに置いておきます。        

bg5.gif


pc.gif


door.gif

aline1.gif

aline2.gif
リンク先の一覧とバナー画像
リンク先は、カテゴリ毎に分類します。 その分類と、リンク先を下表のようにします。
また、リンク先のバナーと、そのファイル名を揚げておきます。

カテゴリ分類リンク先バナー
ホームページ
作成支援
とほほのWWW入門 tohoho.gif
ヨッシーのホームページを作ろう! yossi.gif
フリー素材
関連
素材屋405番地 405.gif
素材工房 ENGEL−HEART engel.gif
CGI関連KENT WEB kent.gif
ピーマンの初級CGI設置講座 piman.gif
にほんごCGIインデックス cgi.gif
音源関連[Music Palette] palette.gif
コンピュータミュージック バナーなし
カテゴリ分類毎のお勧めリンク
お勧めリンクの部分は、見やすくするため、テーブルを利用します。

■テーブルの上に、ホームページのカテゴリーの種類を書きます。
■リンクの部分は、左にホームページのバナーを、右にタイトル名を書き、バナーにリンクを貼ります。
■一番下の1行を追記用の空白行にします。

それでは「ホームページ作成支援」の部分のリンクを、実際に書いてみましょう。
メモ帳
<!-- ++++++++++ ホームページ作成支援 ++++++++++ -->

ホームページ作成支援  ←種類分けタイトル名 
<table border="1" cellpadding="5">
   <colgroup width="125" align="center" bgcolor="#ddddff"></colgroup>
   <colgroup width="325" bgcolor="#ccccee>";</colgroup>
  ↑↑各列の背景と幅をまとめて設定
 <tr height="45">  ←行の高さを揃える
  <td><a href="http://tohoho.wakusei.ne.jp/" target="_blank">
        リンク先アドレス・新ウインドウを開く設定↑↑
   <img src="parts/tohoho.gif" border="0"></a></td> ←リンク先のバナー貼付
  <td>とほほのWWW入門</td></tr>  ←リンク先のホームページ名

 <tr height="45">  ←行を変え、次のリンクに(以降繰り返し)
  <td><a href="http://homepage2.nifty.com/yoshi-m/makehp/" target="_blank">
   <img src="parts/yossi.gif" border="0"></a></td>
  <td>ヨッシーのホームページを作ろう!</td></tr>


 <tr height="45">  ←ここは空白行(以降繰り返し)
  <td><br></td>  ←<td></td>の間に<br>を入れると表が凹む
  <td><br></td></tr>
</table><br>
これを,HTMLファイルにして表示すると,次のようになります。
ホームページ作成支援
とほほのWWW入門
ヨッシーのホームページを作ろう!



お勧めリンクの種類を、先程の表の4つのカテゴリ分を繰り返します。(コピーアンドペーストを利用)
少し長くなりましたが、基本的には繰り返しですから、すぐに理解できるでしょう。
ホームページ全体
それでは全体を通してソースファイルを、解説を付けて書いてみましょう。  
メモ帳
<html><head>
  <title>お勧めリンク</title> ←タイトル名
</head>

<body background="parts/bg5.gif"> ←壁紙 bg5.gif
<div align="center"> ←センタリング開始

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="3" width="300" color="#cccc00">
  <font size="6" color="#0000aa">お勧めリンク</font>
       ↑タイトル名 上下はボーダー
 <hr size="3" width="300" color="#cccc00">

<!-- ++++++++++ 案内文 ++++++++++ -->
 <img src="parts/pc.gif" vspace="10"><br> ←イラスト pc.gif
 <img src="parts/aline1.gif"> ←イラスト上ボーダー aline1.gif

<table border="0"> ←案内文の開始テーブル
 <tr><td>
  <img src="parts/door.gif" hspace="20"> ←イラスト door.gif
 </td><td>
  <font color="#0000cc" face="HG創英角ポップ体">
    くまさんがお勧めするホームページだよ!<br> ←ここより3行が案内文
    このホームページ作りでも利用しているサイト<br>
    くまさんが勉強・利用しているサイト集です♪
  </font>
 </td></tr>
</table> ←案内文の終了テーブル

 <img src="parts/aline2.gif"><br> ←イラスト下ボーダー aline2.gif
 <img src="parts/pc.gif" vspace="10"><br><br> ←イラスト pc.gif

        ↓↓ここより、上記で説明した部分
<!-- ++++++++++ ホームページ作成支援 ++++++++++ -->

ホームページ作成支援 
<table border="1" cellpadding="5">
   <colgroup width="125" align="center" bgcolor="#ddddff"></colgroup>
   <colgroup width="325" bgcolor="#ccccee"></colgroup>

 <tr height="45">
  <td><a href="http://tohoho.wakusei.ne.jp/" target="_blank">
   <img src="parts/tohoho.gif" border="0"></a></td>
  <td>とほほのWWW入門</td></tr>

 <tr height="45">
  <td><a href="http://homepage2.nifty.com/yoshi-m/makehp/" target="_blank">
   <img src="parts/yossi.gif" border="0"></a></td>
  <td>ヨッシーのホームページを作ろう!</td></tr>

 <tr height="45">
  <td><br></td>
  <td><br></td></tr>
</table><br>

<!-- ++++++++++ フリー素材関連 ++++++++++ --> ←ここより繰り返しパターン

フリー素材関連 
<table border="1" cellpadding="5">
   <colgroup width="125" align="center" bgcolor="#ddddff"></colgroup>
   <colgroup width="325" bgcolor="#ccccee"></colgroup>

 <tr height="45">
  <td><a href="http://page.freett.com/mikiyu/" target="_blank">
   <img src="parts/405.gif" border="0"></a></td>
  <td>素材屋405番地</td></tr>

 <tr height="45">
  <td><a href="http://engel.kiy.jp/" target="_blank">
   <img src="parts/engel.gif" border="0"></a></td>
  <td>素材工房 engel−heart</td></tr>

 <tr height="45">
  <td><br></td>
  <td><br></td></tr>
</table><br>

<!-- ++++++++++ CGI関連 ++++++++++ --> ←繰り返しパターン

CGI関連 
<table border="1" cellpadding="5">
   <colgroup width="125" align="center" bgcolor="#ddddff"></colgroup>
   <colgroup width="325" bgcolor="#ccccee"></colgroup>

 <tr height="45">
  <td><a href="http://www.kent-web.com/" target="_blank">
   <img src="parts/kent.gif" border="0"></a></td>
  <td>kent web</td></tr>

 <tr height="45">
  <td><a href="http://members6.tsukaeru.net/cgi/" target="_blank">
   <img src="parts/piman.gif" border="0"></a></td>
  <td>ピーマンの初級cgi設置講座</td></tr>

 <tr height="45">
  <td><a href="http://script.lovely.to/" target="_blank">
   <img src="parts/cgi.gif" border="0"></a></td>
  <td>にほんごcgiインデックス</td></tr>

 <tr height="45">
  <td><br></td>
  <td><br></td></tr>
</table><br>

<!-- ++++++++++ 音源関連 ++++++++++ --> ←繰り返しパターン

音源関連 
<table border="1" cellpadding="5">
   <colgroup width="125" align="center" bgcolor="#ddddff"></colgroup>
   <colgroup width="325" bgcolor="#ccccee"></colgroup>

 <tr height="45">
  <td><a href="http://www.music-palette.com/" target="_blank">
   <img src="parts/palette.gif" height="30" border="0"></a></td>
  <td>[Music Palette]</td></tr>

 <tr height="45">
  <td><a href="http://www.dtm.ac/" target="_blank">
   con-music</a></td>
  <td>コンピュータミュージック</td></tr>

 <tr height="45">
  <td><br></td>
  <td><br></td></tr>
</table><br>

 <!-- ++++++++++ 親ページへリンク ++++++++++ --> ←戻りリンク

 <img src="parts/pc.gif" vspace="10"><br><br> ←イラスト pc.gif
  <a href="index.html">
   <font color="#0000aa" size="5">homeに戻る</font></a>

</div><br><br> ←センタリング終了

</body></html> 
右のスイッチをクリックして,表示した上で、ソースを参照してください。
親ページやその他のリンクも確認してください。
解説が前後しましたが(G ホームページの更新)雑談コーナーの工事中ファイルも付けておきました。


F もう一工夫! (BGMと流れる文字)

HTMLタグに関する基本的なものは、一通り説明して来ました。
ここでもう2つの、簡単で効果的なタグを説明しておきましょう。
BGMを鳴らす
ホームページでは、文字・画像だけでなく、音を付けることが出来ます。
では、BGMを鳴らす方法について、説明しましょう。
  音を付けるタグ
<bgsound src=**** loop=**>
 src = サウンドファイルを指定します。
   *.wav, *.au, *.mid, *.aif などのサウンド形式をサポートしています
 loop = 再生する回数を指定します。
   infinite または -1 を指定すると無限に再生を繰り返します
<body> の中に、この一文を記入し、サウンドファイルを設置するだけです。
ただ、サウンドファイルの「」に著作権があり、無償で使用できないモノが多いので注意!
文字を流す
ホームページでは、よく流れる文字を見かけますね。
これは比較的簡単に使え、タグを一つ覚えるだけです。
  文字や画像を流す
<marquee 各種属性> 文章または画像 </marquee>
     属  性
 behavior = スクロールの形式を scroll(スクロール), slide(端にぶつかると停止), alternate
  (端から端までを往復)のいずれかで指定します。 省略時の値はscrollです。
 bgcolor = 背景色を指定します。
 direction = スクロールの方向を指定します。
  left : 右→左   right : 左→右(規定値)   down : 上→下   up : 下→上
 height = 高さをピクセルまたはパーセンテージで指定します。
 hspace = マーキーの周りの横方向の余白をピクセル単位で指定します。
 loop = ループする回数を指定します。
 vspace = マーキーの周りの縦方向の余白をピクセル単位で指定します。
 width = 横幅をピクセルまたはパーセンテージで指定します。
marquee タグで囲われた文字や画像が流れ、流す方向や、流れ方など多彩に設定出来ます。
marquee タグの中に marquee タグを入れるのも可能で、工夫次第で面白い動きになります。
それでは、少し marquee タグの練習をしてみましょう。
メモ帳
<marquee width="250">これが規定値です</marquee><br>
<marquee width="250" direction=right>右へ流します</marquee><br>
<marquee width="100" height="50" direction="down">下へ流します</marquee>
<br>
<marquee width="300" behavior="alternate">
  <img src="parts/hana4.gif">花と往復します</marquee><br>
<marquee width="300" bgcolor="green">
  緑の中を<img src="parts/yuki1.gif">雪が流れる</marquee>
これを,HTMLファイルにして表示すると,次のようになります。
これが規定値です
右へ流します
下へ流します
花と往復します
緑の中を雪が流れる

メニューページに応用
それでは、ホームページのメニューページ index.html にBGM(bgm.mid)を付けます。

また marquee タグをテーブルに入れ込み

  くまさんのホームページへようこそ!! 来てもらった記念に一言残していってね♪

の文字を、あいさつとメニューの間に挿入して、流してみましょう。

関連部分( body タグ以下)のソースファイルです。
メモ帳
<body background="parts/bg.gif">
<bgsound src="parts/bgm.mid" loop="-1"> ←BGMを付ける
<div align="center">

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="5" width="550" color="green">
  <font size="7" color="red">くまさんのホームページ</font>
 <hr size="5" width="550" color="green">

<!-- ++++++++++ あいさつ ++++++++++ -->
 <img src="parts/hana1.gif" vspace="10"><br>
 <img src="parts/line3.gif">

<table border="0">
 <tr><td>
  <img src="parts/kuma.gif">
 </td><td>
  <font color="navy" face="HG創英角ポップ体">
   ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
   まだ始めたばかりなので、内容はあまりありませんが、<br><br>
   すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
  </font>
 </td></tr>
</table>
 <img src="parts/line3.gif"><br><br>

<!-- ++++++++++ 文字を流す  ++++++++++ -->
<table border="3" bgcolor="#ffffff"><tr><td> ←テーブル設定
 <marquee width="300">くまさんのホームページへようこそ!! ←文字を流す 
  来てもらった記念に一言残していってね♪</marquee>
</td></tr></table>

<!-- ++++++++++ リンク ++++++++++ -->
右のスイッチをクリックして,表示した上で、ソースを参照してください。
音楽が付いて、文字が流れて、楽しいメニューページになりましたね。


G ホームページの更新

あと「雑談コーナー」が残っていますが、これは今までのようなHTMLファイルでは作れません。
「工事中ファイル」を補充
このページがリンクエラー状態では更新ができないので、「工事中ファイル」で当面のリンクを完結しておきます。
このファイル( koji.html )は次のようなソースファイルです。 内容を確認しておいてください。
メモ帳
<html><head>
  <title>工事中!</title> ←タイトル名です
</head>

<body background="parts/bg5.gif"> ←壁紙はリンクのページと同じ
<div align="center"> ←センタリング開始

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="3" width="300" color="#cccc00"> ←水平線
  <font size="6" color="#0000aa">工事中!</font> ←工事中の表示
 <hr size="3" width="300" color="#cccc00"> ←水平線

 <!-- ++++++++++ 親ページへリンク ++++++++++ -->

 <img src="parts/pc.gif" vspace="10"><br><br> ←イラスト pc.gif
  <a href="index05.html">  ←親ページへリンク
   <font color="#0000aa" size="5">homeに戻る</font></a>

</div><br><br> ←センタリング終了

</body></html> 
 koji.html ファイルは、CGIファイル asuka.cgi 完成までの、仮のファイルです。

これを,HTMLファイルにして表示すると,次のようになります。

工事中!


homeに戻る

ホームページを更新
 最終は下図のようなディレクトリの構成になり、赤字は新しいファイルです。
     ディレクトリ構成

\(ルートディレクトリ)
    l
    l
    +--home(HTMLフォルダ)
        |  index.html , syokai.html , ski.html , link.html, koji.html
        | 
        +--parts(画像フォルダ)
             bg.gif , mail.gif , kuma.gif , line2.gif , line3.gif
             profile.gif , watashi1.gif , mail2.gif , tulip1.gif
             tulip3.gif , tulip4.gif , hana1.gif , hana4.gif
       (趣味のページのイラスト)
             bg3.gif , yuki1.gif , snow1.gif , snow2.gif , ski.gif
             ski01.jpg , ski02.jpg , ski04.jpg , ski05.jpg , ski07.jpg
       (リンクのページのイラスト)
             bg5.gif , pc.gif , aline1.gif , aline2.gif , door.gif
       (リンクバナー)
             tohoho.gif , yossi.gif , 405.gif , engel.gif , kent.gif
             piman.gif , cgi.gif , palette.gif , 

FTPソフト FFFTP を起動します。

左側の「home」フォルダを指定し、アップロードをクリック。
「新しければ上書き」を実行します。

すると、修正したファイルと新規ファイルが追加転送され、
ホームページは更新完了しました。

うまく行かない場合は、4節の FFFTP の初期設定をチェックしなおして下さい。