義母の介護の合間に、Web page を開設して、最初、極簡単なものだった私の Web page も、多くの方の暖かいお励ましと ご指導で少しずつ進化してきました。
最近は、Web page 作成ソフトがいろいろあり、ソフトを使っている方が多いようですが、私は、相変わらず HTML文書なるものを書いて 作成しています。
私は気が短く、開くのに重い Web page は好きではありませんから、最初は画像もなるべく入れず、ほとんどテキストだけのページにしていました。
でも、midi音楽はファイルが小さく、アクセスに時間がかからないとの薦めで、midi音楽を取り入れて、それをきっかけに、Web page 作りが楽しくなり、 いろいろ取り入れるようになりました。
CGIによる掲示板、チャットルームを設け、また、java script、java appletを教えて下さる方があって、取り入れてみました。
Web page上だと、どうしてこんなことができるのか、よく分からないのですが、 本当に不思議で、思いがけないいろいろな事ができるものだとただただ感心しています。
私の Web page の作り方について、ご質問をいただきますので、少しずつ書いてみることにしました。
手順と致しましては、
まず、Web page に載せたいことを「スタート」から「プログラム」、その中の「アクセサリー」を選び、「メモ帳」をクリックして、載せたい 文章を書いてから、「My Documents」に保存します。
（私が教えてもらった時は「テキスト文書」で書き、フロッピーに保存していました。）
その表紙になるトップページの内容を書きます。
メモ帳で書いたものに、HTML文書の「タグ」を「直接入力」で入れていき、 テキスト文書を .html または .htm に名前を変えて保存して、それを開いて ブラウザーで見ますと、Web page を見ることができます。
ただ、これでは、みんながアクセスして見ることはできず、FTPでプロバイダーに送って、 初めて Web page は完成します。
「.html」か「.htm」は、プロバイダーによって違うようです。
私の場合は「.htm」です。
１.トップページの作成
まず、トップページを作ってみましょう。
以下は、私の最初のホームページからの抜粋ですが、
背景をクリーム色にして、「自己紹介」と「趣味」のページを持つものにしてあります。
-------------------------------------------------------
<html>
<head>
<title>
ようこそ、幸子のホームページへ
</title>
</head>
<body bgcolor="#fffacd">
<div align="center">
<h1>ようこそ、幸子のホームページへ</h1>
<a href="index-e.htm">To English Page</a>
<br>
<b>開設 1996年10月9日</b>
<br>
<hr>
<h3>ある平凡な主婦のホームページ</h3>
<br>
<table>
<tr><td><a href="profil.htm"><b>自己紹介</b></a></td></tr>
<tr><td><a href="hobby.htm"><b>趣味</b></a></td></tr>
</table>
<br>
</div>
<hr>
<div align="center"> <address>Last updated 96/10/09 by
<a href="mailto:sachiko3@fuchu.or.jp">Sachiko Fujita</a> </address>
</div>
</body>
</html>
--------------------------------------------------------------------
本来なら、上記のように入力していくのですが、ここでは、もっと簡単に、点線内のからまでをコピーして、メモ帳に貼り付ければ作るの に楽です。そして、私の内容を、皆さんに合うように書き換えてください。
例えば、趣味のところはボランティア活動でも結構です。
私のトップページでは背景は画像を使っていますが、
ここでは、男女どちらにもよいようにクリーム色の無地にしてあります。
書き換えたら、「ファイル」から「名前を付けて保存する」を選んで、index .htmと入力して保存してください。
「My Documents」の中にindex .htmというファイルができているはずです。
それをダブルクリックすると、あら不思議、あの訳の分らない記号が、
下記のような、あなたのトップページに変わっています。
index.htm
そして、ブラウザの「表示」から「ソース」をクリックして見てください。元の記号のファイルが現れます。
背景や文字の色を変えたい場合は、このソースを書き換えて、また「ファイル」の「名前を付けて保存する」で、.htmを付けて保存します。
この場合、「このファイルは既に存在します。置き換えますか」と聞いてきますから、「はい」を選びます。
そして、もう一度ファイルを開くと、変更されたものになっています。
HTML文書のタグの説明
わけのわからない記号が並んでいますが、これがHTML文書のタグで、この記号で、いろいろと指示します。
上記を参考に説明します。
タグは直接入力で正確に記入します。
大文字でも小文字でも、それはかまいません。
まず、<html> で始まり
<htmlL>〜</html>
このタグで囲まれたものが、Web pageになります。
<html>
<head>
<title>
タイトル
</title>
</head>
このタイトルは、Web page上には現れませんが、お気に入りで保存する時には自動的に表示されます。
<body background="haamo.gif">
これは、Web page の背景を指示します。
私は、「haamo.gif」という画像を使っています。
この背景の画像は、Web page のフリーの素材から、ダウンロードさせていただきます。
その場合、ページの何処かに素材屋さんへリンクを貼ります。
例の無地の場合は、
<body bgcolor="#fffacd">
#ffffff は白で、#000000 は黒で、その間、256色あり、色の指定ができます。
0は数字のゼロです。
文字の色は、
<font color="#ff0000">
これは、赤の文字です。
色については下記のページから好きな色を選んでください。
色見本
<font size="1">
1 から 7 までで、だんだん大きくなります。
指定しないと黒の文字で、サイズは３です。
</font>
文字の色、サイズの指定をときます。
私のは指定してありません。
<div align="center"></div>
囲われたものは全て中心に位置します。
<h1>
見出しの文字の大きさです。
<h1><h2><h3><h4><h5><h6>
だんだん小さくなります。
</h1>
この大きさの文字の終わりを指します。
<br>
行替えです。
<p>
1行空けを意味します。<br>でも表わせます。
<a href="index-e.htm">To English Page</a>
英語のページへのリンクです。
<b>開設 1996年10月9日</b>
開設した日です。
<strong></strong>
太字を現します。
<hr>
ラインです。
<table>
<tr><td><a href="profil.htm"><b>自己紹介</b></a></td></tr>
<tr>td><a href="hobby.htm"><b>趣味</b></a></td></tr>
</table>
この<table></table>で囲むと
<tr><td><Ａ</b></a>Ｂ</td></tr>
<tr><td><Ｃ</b></a>Ｄ</td></tr>
は Ａ、Ｂ Ｃ、Ｄと箱に入れたように表示されます。 この例ではＡ＝「自己紹介」とＣ＝「趣味」で文字の頭が揃います。
自己紹介、趣味のHTML文書は後で作るとして、ご自分用に変えてみて下さい。
最後の方、「Last updated 96/10/09 by」
ご自分の開設日、または更新日です。
mailto: の後に、ご自分のメールアドレスを書いて下さい。
また、dosやunix、macなどのいろいろなサーバが文字を自動認識するためには、 <head>の後ろに、<META>タグを入れます。
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META>タグを入れないと、サーバー側できちんと認識出来なくなり、 ブラウザー側でcharset の変換ミスになります。
まず、私のを参考に、ここまで書いて、フロッピーに「index」と名前を付けて 保存してください。
そして、また index の後に、.html を付けて、index .htmlとして保存して下さい。
そのファイルを開くと、ホームページができているはずです。
これで、トップページができました。
2.中身のページの作成
まず、その前に、前回では、作成したindex.htmというファイルを「MyDocuments」に保存しましたが、
これから次々と新しいファイルができるので、「My Documents」を開いて、「ファイル」の「新規作成」から「フォル ダ」をクリックします。
すると「新しいフォルダ」という名前のフォルダができ、そのフォルダを青転させて、「名前の変更」で「web page」とします。
そして、「My Documents」にあるindex .htmを、その中にドラッグ＆ドロップ します。フォルダ「web page」を開くと、index .htmがあるはずです。
「自己紹介」のページ作成
下記を例に作成しましょう。下記にアクセスしてください。
http://www.fuchu.or.jp/~sachiko3/syo3/profil.htm
今回は、テキストだけでなく、写真やイラスト画像も入っています。
イラストは、カーソルを合わせて、右クリックすると「名前を付けて画像を 保存」があり、クリックすると保存のフォームが出るので、「My Documents」 にあるフォルダ「web page」に保存してください。
「表示」から「ソース」を見てください。下記がソースです。
------------------------------------------------------------------------
<html>
<head>
<title>
自己紹介
</title>
</head>
<body bgcolor="#ffffe0">
<div align="center">
<font color="#dc143c"><h2>自己紹介</h2></font>
</div>
<br>
<hr color="#008000">
<br>
<div align="center">
<font size="4"><strong>藤田幸子</strong></font><br>
<br>
横浜市栄区の住人<br>
</div>,br> <blockquote>
夫の郷里（広島県）で、夫と共に、７年前脳卒中で倒れ、立つことのできない 姑を「寝たきりにしないで」介護をしています。<br>
ホームページを開設している母校の中学校、大学と、メールによる交流が始ま りました。<br>
</blockquote>
<div align="center">
<img src="kurusima.jpg" alt="来島大橋">
</div>
<img src="tulip.gif" align="right" alt="赤、ピンク、黄色のチューリップ">
<img src="tulip.gif" align="left" alt"赤、ピンク、黄色のチューリップ">
<br>
<br>
<hr color="#008000">
<br>
<div align="center">
<a href="hobby.htm">趣味のページへ</a><br>
<br>
<a href="index.htm"><img src="home.gif" border="0" alt="ホームページへ "></a><br>
</div>
</body>
</html>
------------------------------------------------------------------------------
トップページの場合と同様、<html>で始まり、</html>で終わります。
<html>
<head>
<title>
タイトル
</title>
</head>
タイトルを自己紹介にします。
<body background="?.gif">、壁紙か、 <body bgcolor="#??????">、無地で、背景を決めます。
文字の色は、黒以外を使いたいなら、<font color="#??????">で指定します。
<center>
<h1>自己紹介</h1>
自己紹介のタイトルが中央にきます。
<br>で、行を変えて、
<hr>
ラインで区切ります。
<br>
<p>
自己紹介の本文に<br>のタグを入れながら書いていきます。
最後に<hr>でラインを入れ、その下に、
「趣味」のページに行くようにしたければ
<a href="hobby.htm">次</a>へ、とします。
次に、 <a href="index.htm"><img src="home.gif" border="0" alt="ホームページへ "></a><br>
家のマークをクリックするとトップページへ行くことができます。
<br> を入れないと、続いてしまいます。行を変えたい時は、常に<br> を入れます。
文字の色を指定した時は、</font> で閉じ、
</body>
</html>
画像の追加説明をします。
<img src="tulip.gif" align="right" alt="赤、ピンク、黄色のチューリップ ">
<img src="tulip.gif" align="left" alt"赤、ピンク、黄色のチューリップ">
align="right"は画面の右配置、align="left"は左配置です。
このソースをコピーして、「My Documents」の中の「web page」を開き、 「ファイル」の中の「新規作成」をクリックすると「テキスト文書」があるの で、クリックすると「テキスト文書」というファイルができます。
それをクリックして開き、そこにコピーしたソースを貼り付けます。
それから、内容をご自分に変えて「profil.htm」と名前をつけて保存してくだ さい。
profil.htm と保存したファイルを開くと、自己紹介のページができています。
同じようにして、「趣味」その他のページを作りますが、上記のソースを 趣味のページなら趣味の内容に書き換え、お好きな文字の色やご自分の画像を 入力して、hobby.htmと「名前を付けて保存」します。
このように雛型があると、あとは内容に応じて少しずつ変えていけばよいので す。
3.FTPで送る。
誰もががアクセスできるホームページにするためには、ホームページ設置をプロバイダーと契約します。
開設にあたって、開設料がいくらか必要な場合もありますが、その後はほとんどのプロバイダーで５MBくらいまでは無料です。
プロバイダーから、ホームページアドレス(URL)を確保したら、できたファイルをFTPでプロバイダーに送ります。
その作業をアップロードと言います。
FTPも、フリーの素材屋さんからダウンロードできます。 例えば、窓の杜。
このサイトの「ジャンル別INDEX」から「FTPクライアント」を選び、 フリーソフトなら「FFFTP」というソフトがありますから、 ダウンロードサイト・「ALLESNET」からダウンロードすると、 ショートカットがデスクトップにできています。
FTPの設定は、接続先サーバ名、ユーザー名、パスワード を入力してから、 接続して、index.htmなどのファイルをプロバイダに送ります。
画像も忘れずに送ります。
そして、ブラウザを開き、「アドレス」欄に、あなたのURLを書き込んで、「Enter」キーをクリックすると、 あなたのホームページが現れます。
それを、「お気に入り」「ブックマーク」に登録しておきましょう。
以上が、基本的な Web page の作り方ですが、
ホームページはアップロードして、それで終わりというものではなく、 いつでも更新できますから、技量の向上と情報の充実に合わせて ページを改善したり、新しいページを作成したりして更新していきます。
更新の度に、トップページのLast updated の後に更新日を入力します。
個人のホームページは、初めは簡単なページで開設して、 少しずつ改訂更新していけばよいと思っています。
このテキストだけの基本的な Web page に、あとは、いろいろと付け足していけばよいのです。
アクセス数、訪問者登録、掲示板、チャットは、CGIという少し複雑な技法です。
その他、MIDI音楽、Javascript、Javaappletによるものなどあります。
お分かりにならないことがありましたら、
Sachiko Fujita・迄お知らせ下さい。
