それでは、【○○市立美術館】で個展を開くための準備を具体的に始めることにします。
最初に行う作業は、作業場所「アトリエ」の確保です。
ホームページを作る時も、事情は全く同じです。
一番最初に行う作業は、現在お使いのMacのハードディスクにホームページ専用の作業スペースを確保する作業です。
専用の作業スペースのフォルダー名は、本当は何だって良いのです。
しかし、皆さんがそれぞれバラバラな名前を付けたんでは、説明する私の方も、読んでいただく皆さんの方も大変です。
なるべくならお読みくださる全員が同一のホルダー名の方が、話を進め易い！
と言うことで、もし、ご異存無ければ、「アトリエ」と言う名前のフォルダーを作って下さい。
作り方は簡単ですね。----画面を「Finder」に切り換えて、「メニューバー」の「ファイル」をプルダウンし、一番上の「新規ファイル」を選ぶ。
そして出来上がったばかりの「名称未設定フォルダ」の名前を「アトリエ」に変更して下さい。
今後、ホームページ関係のファイルは、全てこの「アトリエ」フォルダーの中で作成し、保管することにします。----index.htmlも、フォルダーも、その他のHTML文も、画像ファイルも、何もかもこの「アトリエ」の中に格納して下さい。
これまで、私の元に寄せられた質問の中で、一番多い質問の一つが、
『何故、右端が破れた画像アイコンしか現れないのだろう？』
と言う質問です。その原因を調べてみると、
■一番最初に「アトリエ」フォルダーを作成する。
■HTML文も、画像ファイルも何もかも「アトリエ」の中に格納する。
■各ページごとにフォルダーを作って格納する場合は、「アトリエ」の
中にフォルダーを作る。
そして、ファイルは、それぞれ所定のフォルダーに格納する。
■“HTML文”への“画像ファイル”の貼り付け作業は、以上の作業を
終えた後、一番最後に行う。と言う大鉄則を守らなかったが故の悲劇です。
◇3-1-1 ホームページの構成
ホームページの構成は、どうしますか。
巻頭のホームページ（index.html）は絶対に必要ですね。
しかし、「これ一つだけ」と言うのではちょっぴり寂しい。
取りあえず、もう１ページ作りましょう。
プロフィール（profile.html）はどうですか。
最初ですからあまり欲張らずに、この２ページだけで我慢してください。
そして、プロフィール（profile.html）には、将来、貴方の写真やご家族の写真も一緒に貼り付ける事になると思いますので、この際、最初から「my_profiles」というホルダーに格納することにします。
文章に書くと難しいですね。
では、前にご説明したディレクトリー構造で表示してみましょう。
ファイルがたった２つなんだから、本来ならば「ホルダー」を設けなければならない必然性は全然ありません。
『では、何故ホルダーを作るのか？』
結論から言うと理由は２つです。
“テーマ別にそれぞれ「フォルダー」を作成すると言う習慣”
を、最初から身につけた方がいい。そして、
“「フォルダー」と「ファイル」の送・受信方法を最初から覚えてしまう”
その方が、後々の事を考えると合理的です。
ですから、敢えて「フォルダー」を用意して貰うことにしたんです。
◇3-1-2 HTML文の雛形
では、最初に巻頭ホームページを作りましょう。
一番簡単にHTML文を作る方法は、誰でもお持ちのソフト[Microsoft Word98]をHTMLエディターとして有効に活用することです。
下手なHTMLエディター顔負けの立派なHTML文が出来上がりますよ！
まず、[Word98]でレイアウトを考えながら文章を作る。もちろんカラー文字もOKです。写真（JPEGファイル）やイラスト（GIFファイル）も加えて下さい。
こうして、ホームページが出来上がったら、保存するときにメニューバーの左端「ファイル」をプルダウンして、上から７番目の「HTML形式で保存」を選んで下さい。（何が何でもHTMLファイルで保存する。そうしない限りWord98ではHTML文は完成しません）
保存し終えたらファイルの名前を替えましょう。
Wordが付けてくれたファイル名の後ろに“.html”（ピリオドに加えてhtmlを付け足す）を加えれば、立派なHTML文の完成です。
（後々のためにファイル名は全て半角の英小文字で統一することをお薦めします。!#$%^&*()+":;'?/<などは使えません）
これだけの操作で下の雛形と殆ど同じ様なHTML文が自動的に出来てしまいます。----難しいと思っていたHTML文がこんなに簡単に出来てしまったのです。
出来上がったHTML文をソースで確認するには、お手持ちのエディター（SimpleTextで充分です）で開けば、立派なHTML文が出来上がっているのが確認できると思います。
最後に、実際にそのファイルをブラウザ（ネットスケープなど）でを開いてみて下さい。
どうですか。「僕にもできた！」でしょう。
『本も買ったし、しっかり勉強した。HTMLは自力で作れるよ！』と言う方は、[index.html]と[profile.html]をご自分で自由に作って下さい。
そして、ホルダー「アトリエ」の中に、ディレクトリー構造の通り、保存して下さい。
まだまだ自信のない方は、下記の青字の部分をクリックすると、簡単なホームページの雛形が現れます。
ホームページ資料
プロフィール資料
これを取り込んで、ちょっとだけ加工して使うことにしましょう。
なお、この雛形では、HTML文に絶対不可欠な、
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</BODY>
</HTML>の他は、
<BR>：改行する
<P></P>：段落
<H2></H2>：見出２を指定
<HR>：水平線
<CENTER>：文字を中心に配置する
<BLOCKQUOTE></BLOCKQUOTE>：行頭を下げる
<FONT COLOR="#FF0000"></FONT>：文字の色を変える（#FF0000は、赤）
だけを使用しました。
詳しくは、HTMLタグの参考書で勉強して下さい。
◇3-1-3 index.html雛形の入手
上記の青色の部分をクリックすると、index.htmlが現れます。
現れたらブラウザ（Netscape Navigator）のメニューバーの一番左、「ファイル」をプルダウンして、「別名で保存」を選んで下さい。
そうすると下図の様なダイアログが現れます。
FIG 3-1-3
先ず、収納場所を指定しなければなりません。
フォルダーは、先ほど作ったばかりの「アトリエ」を設定して下さい。
次に、「保存：」の下の窓の中を index.html と書き換えてください。
次に、一番下の窓は、現在、「テキスト」になっていますね。----その「テキスト」の文字の右「▼」をプルダウンして「ソース」に切り替えて下さい。（FIG 3-1-3を参照下さい）
以上の準備が全ての整ったら、「保存」キーボタンを押す。
これで、貴方のハードディスクのフォルダー「アトリエ」にindex.htmlの雛形が取り込まれました。
ファイルが手に入ったら、ブラウザ（Netscape Navigator）のメニューの右上の「戻る」キーボタンで、もう一度、ここに戻って来て下さい。
◇3-1-4 profile.html雛形の入手
そして[index.html]と全く同じ手順で、もう一回。
今度は、プロフィール資料（profile.html）を取り込んで下さい。
さっきと同じように「保存：」の下の窓の中を profile.html に書き換える。
そして、一番下の窓の「テキスト」を「ソース」に切り替える。
さっきと同じ手旬で全ての準備が整ったら、「保存」キーボタンを押す....。
このファイルは、「アトリエ」の中の「my_profiles」フォルダーに格納して下さい。
◇3-1-5 HTML文の編集作業
これで、貴方がホームページで使う、HTML文法に従って書かれたサンプルが２つ手に入りました。
フォルダー「アトリエ」には、index.htmlというファイルと、my_profilesと言うフォルダーが入っている。
そして、my_profilesと言うフォルダーの中には、 profile.html が入っている。
その通り出来上がっているか、しっかり確認して下さい。
「HTML文の雛形」の中身は、名前が「坂東太郎」になっています。（利根川の別名ですね）
演習問題と割り切って、そのままお使いになるのは自由ですが、折角、自分自身のホームページとして使うんだから“借り物”では面白くない。
そう思いませんか？
せめて名前ぐらいは、ご自身の名前に変えましょう！
書き換えにはHTMLエディターが一番便利ですが、まだ準備が整っていないようならエディター（Jeditなど）またはワープロを立ち上げてください。
先ず、フォルダー「アトリエ」の中の[index.html]を開きましょう。
そして「坂東太郎」のところを貴方の名前や出生地に適当に書き換えて下さい。
（その時、<BR>や</FONT>等の<>の部分は、消さないで下さい）
<BR>は、「改行して下さい」と言う命令です。
ですから、もし、文章が長くなって改行したい個所があったら、改行したい個所に<BR>を挿入して下さい。
『そうです！ 段落を付けたければ<P>と</P>で囲むでしたね！』。
こうして、一つずつ、NTML文法の名前と機能を覚えていきましょう。
それが終わったら、「保存」して下さい。
次は、[my_profiles]フォルダーの中の[profile.html]の書き換えです。
同じ様にエディターでドンドン修正して下さい。
大した雛形ではありませんが、それでも雛形があると、何となく簡単に出来そうな気がしてきませんか！
このあたりの説明は、【ブレークタイム】の間に、一通り解説書に目を通していただいた後だから、下手な解説は不要ですね。
こうして、無事、自分自身の名前の入ったテスト用のhtml資料が２つ、整いました。
修正作業が全て終了したら、２つのファイルが上手く出来上がっているかどうか、念のためにブラウザで確認しておきましょう。
果たしてどんな風に出来上がっているか、興味津々ですね。
◇3-1-6 『上手く出来たかな。心配だな！』
『上手く出来たかな。心配だな！』
そう思ったら、善は急げ！
そう思ったら、善は急げ！
ブラウザ（Netscape Navigator）を立ちあげて、メニューバーの右端をプルダウンして「ファイルを開く」で、先ほど修正したファイル[index.html]を開いてみて下さい。
こんな時、ディスクトップにブラウザ（Netscape Navigatorなど）のエイリアスを置いておくと、ブラウザのエイリアスの上に[index.html]をドラッグ＆ドロップするだけで簡単に開いてくれます。----これは便利ですよ。
皆さんも一度試してみてください。
どうですか。
[index.html]が現れましたか。
頭で考えていた通り、上手く修正出来ていましたか。----「改行」や、文字の位置は希望通りに仕上がっていましたか。
もし、気に入らない個所があれば、エディターで何度でも気に入るまで書き直して下さい。