最初のページを作ろう
戻る

ここでは、最初の１ページを完成させるまでを、順を追って解説していきます。
【１】　まず準備すること
【２】　新規にファイルを作成する　
【３】　文章を修飾する
【４】　画像を挿入する
【５】　ハイパーリンクを設定する

　　　　　　
　【１】　まず準備すること　　戻る
　　これからホームページを作っていくにあたって、準備するものがいくつかあります。
　　まず、自分のパソコンのハードディスクの中に、ホームページ制作専用のフォルダを用意してください。
　　　　例）　ｃ：￥ＨｏｍｅＰａｇｅ　（私の場合は、Ｈ：￥ｍｏｋｉｃｈｉ￥ｃｏｎｔｅｎｔｓ内にこのファイルがあります。）
　　このフォルダの中に、ホームページを構成する全てのファイルを置くことにします。
　　基本的に必要なのは、次の二種類のファイルになります。
　　　　文書ファイル　*.html　*.htm
　　　　画像ファイル　*.gif　　*.jpg　　*.bmp

　　次に、おおまかなページの構造を決めてしまいましょう。これはあとからでも変更は可能です。
　　ここでは、４つの文書ファイルを元にこのページが構成されるものとします。
　　　　目次ファイル　hotall.html
　　　　１ページ目　　h01.html
　　　　２ページ目　　h01.html
　　　　３ページ目　　h01.html
　　ここでは、目次ファイルを出発点として、３つのページにジャンプするものとします。
　　
　　画像ファイルとして準備したのは、次のものです。場合によっては、区切り線やカット、アイコンなどを
　　準備しますが、ページの表示に時間がかかる元になるので、私はあまり画像は多用しません。
　　　　背景画像　bcg.gif
　　　　説明画像　h01.jpg〜　（説明のために画面を切り取った画像ファイルです。）

　【２】　新規にファイルを作成する　　戻る
　　それでは、「Ｈｏｔａｌｌ」を起動して、ｈｔｍｌ文書の制作にかかりましょう。
　　これからの作業を進める上で便利になるように、設定を済ませてしまいましょう。
　　「オプション(O)」→「環境設定(O)」を開いて下さい。設定の必要なのは一ヶ所だけです。



　　「ドキュメントフォルダ(Ｄ)」に、自分のホームページ制作用のフォルダを指定してください。
　　「参照」ボタンを押せば、簡単に設定することができます。これを設定しておくことによって、
　　次回から「ファイル（F）」→「開く(O)」を押したときに必ずこのフォルダを開くようになって便利です。

　　では、新規にファイルを作成してみましょう。
　　「ファイル（F）」→「新規作成(Ｎ)」で新しく作るファイル名を決めてください。
　　初めて作るページであれば、index.htmlとするのが一般的です。
　　次は、「ファイル（F）」→「ドキュメントの設定(Ｄ)」です。



　　「タイトル（Ｔ）」には、このページの題名を入れます。ここで入力した文字は、
　　ｗｗｗブラウザ（NetscapeCommunicatorやInternetExplorer）で読み込んだときに、
　　一番上のバーの部分に表示されます。特に入力しなくてもかまわないのですが、
　　「ブックマーク」登録や「お気に入り」に追加したときの題名になるので、書いておきましょう。
　　ハイパーリンク３ヶ所は、そのページの中に他のページへのリンクがある場合、
　　下線がついて色でそのことを知らせるものです。
　　　　　未読のハイパーリンク　：　まだ押したことがない部分
　　　　　既読のハイパーリンク　：　押してジャンプしたことがある部分
　　背景色を指定する場合は、ここでその色を指定します。
　　色の代わりに画像を背景にしたい場合は、「背景イメージ(I)」で指定します。
　　また、他のページも同様な設定にする場合は、「設定記憶(M)」ボタンを押してください。
　　これ以降のhtml文書に、その設定が引き継がれていきます。

　【３】　文章を修飾する　　戻る
　　では、新規作成した文書に、何か文章を書いてみてください。
　　文章作成については、一般のワープロと同じ要領ですから、説明の必要はないでしょう。

　　今入力した文字を修飾してみましょう。
　　マウスを使って、修飾したい文字の先頭から左クリックして範囲指定してください。
　　画面上部のツールバーを見てみましょう。



　　基本的に使用するのは、この７つのボタンです。左から順に、次の機能があります。
文字色もきちもきち
大きくするもきちもきち
小さくするもきちもきち
太くするもきちもきち
斜めにするもきち
下線をひくもきち
打ち消し線をひくもきち

　　これらを組み合わせることで、文章表現を豊かにすることができます。
　　ただし、背景の色や画像との兼ね合いを考慮しなければ、読みづらいページになってしまいます。

　　もう一つ覚えておくと便利なのは、書式設定でしょう。一番多用するもの一つだけ述べておきます。
　　「書式(T)」→「行位置揃え(G)」→「中央寄せ(Ｃ)」で、今カーソルのある部分を中央寄せできます。

　　さて、ここまで作った文章ですが、ホームページにアクセスした人にはどのように見えるのでしょう？
　　実際にｗｗｗブラウザ（NetscapeCommunicatorやInternetExplorer）で開いてみましょう。
　　「ファイル(Ｆ)」→「上書き保存(Ｓ)」で現在製作中のhtml文書を保存してください。次に、
　　ｗｗｗブラウザを立ち上げて、htmlファイルを読み込ませてもいいのですが、もっと簡単な方法もあります。
　　「オプション(O)」を開いてください。自分のパソコンに入っているｗｗｗブラウザが表示されますね。
　　ここで選んだｗｗｗブラウザが立ち上がり、その結果を表示してくれます。これを見ながら、自分の好きな
　　ように修正を加えていくわけです。修正をしたら一度上書き保存して、
　　　　　　ＩｎｔｅｒｎｅｔＥｘｐｌｏｒｅｒ　　　　　　なら　「更新」
　　　　　　ＮｅｔｓｃａｐｅＣｏｍｍｕｎｉｃａｔｏｒ　なら　「再読込」
　　のそれぞれのボタンを押してください。修正された結果が表示されます。
　　NetscapeCommunicatorとInternetExplorerでは見栄えに違いがあります。
　　どちらを使っている人にも見栄えがいいように、工夫する必要が有るかも知れませんね。

　【４】　画像を挿入する　　戻る
　　さて、ここまでで文章はできましたが、これだけではなんとなく味気ないですね。
　　ページに彩りを添えるために、カットやイラストを入れてみましょう。

　　【画像ファイルの例】
カット文章の合間に置くカット、イラスト。
ボタン押すと別のページへジャンプする。
アイコン文の先頭に置くワンポイント。
アニメーションＧＩＦ動く画像。アクセントに。
バナー文字を入れて、表札がわりに。
仕切り線標準の仕切り線でもの足りないときに。
背景文字との兼ね合いで雰囲気づくりに。
写真画像が「重い」ので表示に時間がかかります。

　　html文書ファイルと同じフォルダに、画像ファイルを用意してください。
　　私の場合は、Ｈ：￥ｍｏｋｉｃｈｉ￥ｃｏｎｔｅｎｔｓ内にさらに￥ｐｉｃというフォルダを作り、画像は全てそこに
　　入れてあります。同じ種類のファイルの置き場所を統一しておく方が管理がしやすいからです。
　　また、背景だけ替えたい場合など、元々の背景画像bcg.gifを削除して、新しい画像をそこにコピーし、
　　名前をｂｃｇ．ｇｉｆに変更するだけですむ、という便利な点もあります。

　　では、文章の中に画像を貼り付けてみましょう。貼り付けたい場所にカーソルを移動して、
　　「挿入(I)」→「イメージ(I)」を押してください。「ファイル名入力」のボックスが現れますので、
　　「参照」を押して、自分の画像フォルダをしていし、画像ファイルを選びましょう。
　　こうして入力した画像ファイルのプロパティ（設定）は変更することができます。
　　画像の上で左クリックした後に右クリックし、「プロパティ(R)」を押してください。



　　現在は、「幅：１４１，高さ：９４」になっていますね。これが大きすぎると感じたときは、この数字を
　　変えることによって画像の大きさを変えてください。ただし、縮尺を考えないと変形してしまいます。

　　画像の左や右に文を入れたい場合（新聞のレイアウトのように）には、このプロパティ画面の中の
　　「位置揃え(L)」で調節します。また、画像を画面の中央に置きたい場合には、文の修飾と同様に、
　　「書式(T)」→「行位置揃え(G)」→「中央寄せ(Ｃ)」を適用してください。

　　画像をクリックしたことによって別のページにジャンプ（ハイパーリンク）させることもできます。
　　画像の上で左クリックした後に右クリックし、「ハイパーリンク(H)」を押してジャンプ先を設定してください。
　　ただし、この設定をすると、画像のまわりに縁取り線がついて見栄えが悪くなってしまうことがあります。
　　このような時は「プロパティ」画面の中の「縁取り線(B)」を「なし」にしてしまいましょう。

　　画像の扱いで注意すべきは、その「重さ」です。いろいろな画像を多用したページはカラフルで
　　楽しいものですが、そのぶん表示しきるまでに時間がかかってしまい、イライライさせられてしまいます。
　　特に写真は、画質がきれいであればあるほど、表示に時間がかかります。できるだけ「軽い」ものを
　　選ぶか、減色加工して軽い画像を扱いように心がけたほうがよいでしょう。

　　「Ｈｏｔａｌｌ」には、自分の好きな画像を加工して動く画像（アニメーションＧＩＦ）を作る機能や、
　　表札にあたる画像を作る３Ｄサインボードを作る機能が含まれています。また、それほど凝った
　　仕切り線でなくてもよいのなら、「挿入(I)」→「横線(Y)」ですぐに挿入することが可能です。

　【５】　ハイパーリンクを設定する　　戻る
　　ｈｔｍｌ文書、ホームページの醍醐味はハイパーリンクにあります。
　　ある語句（キーワード）や画像をクリックした時に、他のページへとジャンプさせる機能です。
　　ここでは、この解説ページをつくっているhtml文書をお互いにリンクさせてみます。

１ページ目　ホームページを作ろう　　　 　　　（hotall.html）：　この解説のスタートページ
２ページ目　最初のページを作ろう　　　 　　　（h01.html）：　今読んでいるページ
３ページ目　いろいろな表現の仕方を試そう　 （h02.html）
４ページ目　完成したページを公開しよう　　　（h03.html）

　　現在いるｈ０１．ｈｔｍｌからｈｏｔａｌｌ．ｈｔｍｌへとジャンプさせるようにハイパーリンクを設定してみましょう。。
　　まず、ジャンプさせるための出発点を決めます。これは、文章や語句でも、画像でもかまいません。

文章や語句の場合：　ここからジャンプさせます。
画像の場合　　　　：　

　　二つとも、すでに設定がされていますから、この上にカーソルを持っていけば手のマークになりますね。
　　また、「Ｈｏｔａｌｌ」でもｗｗｗブラウザでも、手のマークになった瞬間、ソフトのウインドゥの下部に
　　ジャンプ先が表示されています。このようにして、あるページから他のページへのジャンプを設定するのです。
　　具体的に設定してみましょう。文章や語句の場合は、その部分を文字修飾と同様に指定して、また画像の
　　場合には画像自体を左クリックしてから、右クリックして「ハイパーリンク(Ｈ)」を選んで下さい。



　　あとは、「リンク先ファイル名(F)」を「参照(R)」を使って指定してやるだけです。
　　ここで、もし他のホームページへのリンクを指定したい場合には、「リンク先ファイル名(F)」の中に
　　「ｈｔｔｐ：／／ｗｗｗ．ｍｏｋｉｃｈｉ．ｃｏｍ」のように、「ｈｔｔｐ：／／」からＵＲＬアドレスを記入します。
　　また、ここに「ｍａｉｌｔｏ：ｍｏｋｉｃｈｉ＠ｗｈｉｔｅ．ｄｉａｍｏｎｄ．ｎｅ．ｊｐ」のように「ｍａｉｌｔｏ：」から続けて
　　メールアドレスを記入すれば、この部分をクリックした瞬間、このページを開いた（読んだ）人が
　　普段使っているメーラー（電子メールソフト）が自動的に起動して、宛先にメールアドレスが入ります。
　　　　　　　　　　　　　　　（実際にクリックしてみてください。↑）
　　後述するラベル機能を使えば、「何ページの何行目にジャンプ」という使い方もできて便利です。


　ここまでで、最初の１ページの制作の解説は終わりです。　
　あなた自身でページを作り、互いにリンクさせてみてください。　

戻る