ホームページはワープロで作ることができる

  インターネットで色々なホームページを開いてみていると、自分も自前のホームページを作ってみたい
  と思うのは自然の成り行きでしょう。しかし、どうやれば作れるのかと手引き書などを読んでみてもな
  かなか理解できず、いやになって結局は投げ出してしまうことになりやすいものです。

  しかし、最近の「一太郎」や「ワード」のようなワープロソフトには、作成したワープロ文書をホーム
  ページ用のHTML文書に変換してくれる、たいへん便利な機能が付加されていますから、インターネ
  ット対応機能を持つパソコンと、ワープロ文書を作る力があれば、誰でもホームページを作ることがで
  きるでしょう。たとえば、みなさんに学んでいただく次のような見本のホームページも、基本はワープ
  ロで作ったものなのです。


作成するホームページの見本



私の趣味

私の趣味の一つは園芸です。我が家の庭には山茶花、椿、木瓜、木
蓮、山吹、レンギョウ、エニシダ、ウツギ、リラ、皐月や躑躅、紫
陽花、芙蓉、槿(むくげ)などが、それぞれの季節に合わせて、色
とりどりに咲き乱れます。

その他、ツワブキ、鈴蘭、紫蘭、スミレ、バラ、菊、ユリなど、庭
に花のない時期はありません。私は6匹の飼ネコとともに、そうし
た庭を眺めて過ごすのが大好きです。

みなさん、是非いちど遊びにいらっしゃいませんか。


Webブラウザ

  インターネットの爆発的な普及を可能にしたのは WWW  (World Wide Web「世界中にはりめぐらされ
  た蜘蛛の巣)」という名前で知られるハイパーテキスト形式の情報検索・参照システム、そこで使用さ
  れる言語のHTML、HTML文書をコンピュータの画面に表示させる Webブラウザの提供です。

  Webブラウザで最初に有名になったのは MOSAIC というソフトですが、最近は、Netscape NavigatorInternet Explorer などの方がよく知られているようです。ホームページをこれらのブラウザで見る
  ためには、HTML文書に変換してWebページにしなければなりません。

HTML(Hyper Text Markup Language Webページを作成するのに必要なHTMLですが、これは、ホームページなどを構成するデータにそれ ぞれの役割(表題、文節、映像、リンク先等)が分かるように付けておく荷札(タグ)のようなもので す。Webブラウザはこれらのデータを受け取り、それぞれのタグにしたがって処理をし、処理結果を画 面に提示します。 HTMLは決して難しい言語ではありませんが、はじめからこれをすべて覚えてしまおうとすれば、や はり色々と苦労します。前述したように、最初からタグ付きで文書を入力しなくても、最近のワープロ にはテキスト文書をHTML文書に変換する機能があるのですから、それを活用することから始めれば よいのです。 いろいろと前置きを述べましたが 何はともあれ作ってみよう というのがこの入門篇の趣旨です から、 早速ワープロを使ったホームページの作成に取りかかることにしましょう。なお、使用するパソ コンやワープロソフトのバージョンなどが違ったりすると、必ずしも同じようになるとはかぎりません ので、そのことは予めおことわりしておきます。 ワープロを起動させる ここでは、ワープロとして Word97 を使い、見本に示すようなホームページの素材になるテキストデー タを作ってみましょう。先ず Word97 を起動させて、下の図に示すように[ファイル]をクリックして から、次に[新規作成]を選んでください。
もし Word文書を作るだけであれば、下図のように[新しい文書]を選べばよいのですが、ホームページ の下書きを作るのなら[Webページ]を選択する方がよいでしょう。なぜなら Word文書で凝った下書き を作っても、HTML文書に持ち込めない形式がいくつかあるからです。これについては後述します。
[Webページ] を選んで作業を行う場合にも、[新規作成]のときは以下の図で示すように順次操作してく ださい。見本のホームページは、「私のホームページ」という表題は普通の Word文書で作り、少し厄介 な方法を使ってHTML文書の中に組みこみましたが、それ以外は[Webページ]を選択して下書きを作 りました。以前のバージョンとは違い「画像まわりの書式設定」もできるなど便利になっています。

このようにして Word が起動したら、いよいよホームページ用のデータ入力です。見本は少し控えめに してありますが、一般にホームページといえば、たいへん美しいスタイルの表題、たとえば英語表現で WELCOME TO MY HOMEPAGE とか、日本語で 〜ようこそ私のホームページへ〜 などといった言葉が色 鮮やかな飾り文字で描かれています。したがって、最初にそこから着手したいと思うのは人情でしょう が、これはかなり厄介な手順が必要ですから、今回はそれは後回しにして、見本の構成順序にしたがっ てごく普通に作っていくことにしましょう。
水平線(line)の挿入 見本のホームページは以下のような順序で構成されています。 (1)水平線1 (2)表題 (3)水平線2 (4)画像 (5)説明の文章 (6)水平線2

←見本を見たい人はここをクリックしなさい

  Webページ作成モードの Word で、ツールバーの [挿入] をクリックして現れるダイアログボックスで
 [水平線]を選択すると、Word が用意しているいくつかの横線が提示されます。その中で気に入ったも
  のを選んで[OK]ボタンをクリックすると、その絵が Word 画面に挿入されます。



文字データとして作る表題 表題を画像化して色々と装飾するのであれば、ワードアートと呼ばれるアプリケーションを使う方法が あります。しかし、これは[Webページ]を選択した場合には使うことができません。見本の表題はワ ードアートで作ってから特別なやりかたでHTMLにもちこみましたが、その方法については入門が終 わって初級段階に入ったところで詳しく説明しましょう。 表題を画像で作れば色々と飾り立てることができますが、前述したようにこれはかなり厄介です。そこ でここでは文字で「私のホームページ」と入力しておきましょう。文字を大きくしたり、文字に色を付 けたりすることができますので、とりあえずは次の画面を参照して好みの大きさや色を指定してくださ い。このようにして作られる表題は文字として取り扱われますから、出来栄えを見て後から簡単に修正 できるいう利点があります。
画像の挿入の前に、説明文のタイトル「私の趣味」を[中央揃え]で入力しておきましょう。文字サイ ズについては、説明文の入力のところで取り扱います。 画像の挿入 画像の挿入はツールバーで[挿入]を選び、ダイアログボックスの中の[図]をクリックしてから、さ らに[クリップアート]を選び、提示された画像の中から好きなものを文書の中に取り込むことができ ます。 その他、お絵描きソフトを使って自分でイラストを作ったり、スキャナーで好きな絵や写真を取り込ん だり、デジタル・カメラで写した写真をホームページに掲載することなどができますが、それには色ん な道具が必要ですし、手続きもかなり面倒ですから、これはもう少し上達してからにしましょう。 したがって、ここではクリップアートの中に収められているイラスト画像を使う方法を説明します。次 の図を参考にしてください。

クリップアートの画像を Word画面に取り込むと、びっくりするほど大きな画像になります。これはク リップアートの画像が「ビップマット」様式で作られているからですが、これは次図のように先ず画像 面をクリックして画像枠(ハンドル)を表出させ、枠上の黒点をカーソルで動かすことにより好みのサ イズに変えることができます。 Word文書のどの位置に画像を置くかは、ツールバーの [中央揃え] [右揃え] [左揃え]のボタンをク リックすることで決められます。見本のホームページの場合は[左揃え]で処理してあります。
画像まわりでの説明文の書式設定 このように画像の位置が決められても、ただそれだけでは、説明文は画像を挟んだ上下にしか入力でき ません。右側の空白部に文章を書き込むために画像を[左揃え]で挿入したのですから、是非それを可 能にしたいものです。最初からHTMLで記述するのであれば、これはそれほど厄介なものではないの ですが、Word97 にその機能が備わっているのですから、現時点ではそれを利用して、結果を目で確か めながら作業を進めていくことにしましょう。 先ず、下図のように画像がハンドルで囲まれた状態で、ツールバーの[書式]をクリックし、ダイアロ グボックスの[図]を選択します。
次に、画像ダイアログボックスの[文字列の折り返し]から[右揃え]を選びクリックします。画像と 文字列との間にどの程度の間隔を取ればよいかは適宜に判断してください。
すべての設定が終わって[OK]ボタンをクリックすれば、説明文を画像の右側に入力することが可能に なります。
文字フォントとサイズ 文字サイズは、メニューバーの[書式]で[フォント]を選び、ダイアログボックスでフォントとサイ ズを指定します。フォントは「MS 明朝」を選びます。予め「MS 明朝」になっている場合が多いの ですが、もし変化しているようなら、以下のような手続きでフォントとサイズを設定してください。
先ず、書式の対象となる文字列として、説明文表題の「私の趣味」の1文字分位前にマウスのカーソル を置いてクリックします。するとその1行分の文字列が図のように反転表示されます。これは、処理対 象となる文字列が選択されたことを意味します。次に、前述したようにして文字のフォントとサイズを 指定(この場合のサイズは14を指定)すればよいわけです。なお、文字列の反転状態は、画像や文字列 が前部にない空白部をクリックすれば解除されます。 以上の操作が終われば文字サイズを9にして、画像の右側に見本と同じように説明文を入力してくださ い。ワープロでは 10.5 のような文字サイズがありますが、Webページの文字サイズにはそうした端数 がありませんから、普通のワープロで作った下書きをHTML形式に変換すると、文字サイズが少し違 ったものになります。 説明文の入力が終われば、画像の下端から2行ほど空けて水平線を挿入します。これで、見本と同じ内 容のホームページができたはずです。
Webページを覗いてみる ワープロで作った文書がWebページではどんな風に表示されるか、それを確かめる方法は幾通りかあり ますが、ここでは、次図のように [Webページプレビュー] の機能を利用することにします。
[Webページプレビュー] を選択すると、次図のように「文書の保存」が必要になりますので、指示どおり に[OK]をクリックしてください。
次に、データの保存先[フォルダー]ですが、ここでは各自のフロッピーディスクを指示することにし ます。個人で所有するパソコンであればハードディスクの [My Documents] か、特別にホームページ 用のフォルダーを指定してもよいのですが、皆が共用するパソコンですから、それぞれのフロッピーを 保存先にしてください。指定の手順は図に示すとおりです。ファイル名は Myhome.html とします。
このようにすると、しばらくすると自動的に Webブラウザが開いて、HTML形式に変換されたホーム ページが表示されます。使用パソコンのシステム構成の都合で Netscape Navigator がブラウザに決めら れていると、表示が見本と違ったレイアウトになっているはずですが、その場合はプレビューを中止して ください(画面最上部右端の [×] ボタンをクリックする)。 画面が再び Word に戻ったら今度は Word それ自体を閉じてください。それから最初のメニューに戻っ て、Internet Explorer を選びます。以下、次の各図で示すようにして Myhome.html を呼び出しましょ う。なお Internet Explorer が開かれると、先ず椙山女学園大学のホームページが現れますが、これは無 視して作業を進めてください。見本を真似て作った皆さんのホームページが表示されます。 ひょっとすると、説明文の終わりの方がバラの花の画像の下に回り込んで行ずれをしていたり、最後の水 平線が中央揃えになっていなかったりしているかもしれません。これは、画像の大きさが見本と違ってい たり、ブラウザの画面サイズと文字フォントのサイズが見本と同じでなかったりするからです。これらを 調整するのは、皆さんにはまだ無理ですから、今のところは先生に直してもらいましょう。詳しいことは 次の段階で学ぶことにします。

以下の図で示すように先ず[参照]をクリックして、ファイルをフォルダーから呼び出すという方法もあ ります。保存されたファイルの種類が多くなると、ファイル名をいちいち正確に覚えておくことが大変で すから、こうした方法が役に立つようになるでしょう。

これで入門篇は終了です。まだまだ不十分なところだらけのものですが、とのかくあなたのホームページ を作る手がかりが、ワープロを使ってある程度まで可能になったわけです。次の初級篇では、これを土台 にしてもう少し手のこんだものを作ってみましょう。

表紙に戻る