パソコンでもワープロでも(ほとんど)できる

やさしいホームページ作り入門

ホームページの作り方第1回:初級編

講習会は7月に予定(1時間)

ホームページとは

最近6月の新聞('97年6月25日付け信濃毎日新聞)に長野市の全小中学校がホームページを8月までに作り一斉に公開する予定という記事がありました。この記事に付属した写真に、信州大学教育学部で長野市のフルネットセンター(マルチメディア事業部)指導でホームページ作りを勉強する小中学校の先生方が載っているので、8月には長野市ホームページ(http://www.city.nagano.nagano.jp)を注目しましょう。

ホームページは個人、会社、学校などの紹介、行事、宣伝などがその内容で、これを大型コンピューターに登録しておいて、ユーザーが自分のパソコンを使ってインターネットと呼ばれる通信網を通して見れるようにしているものです。ホームページには文章だけでなく、イメージ(絵)、サウンド(音)、動画などが入れられますので、楽しいものです。現在大きな企業では、パソコンの作業としてワープロ、表計算、電子メールについでホームページ作りを始めていますので、勉強しておくと便利な技術です。

インターネットとは

インターネット(the Internet)は世界のあらゆるコンピューターを接続できるようにした通信網のことで、ユーザーは近くのインターネット・サービス・プロバイダーと呼ばれる通信業者と契約すれば利用できます。1か月2,000円くらいの料金で、電子メールやホームページのサービスが受けられます。東京や大阪の業者が長野市でもインターネットを使えるように市内に電話を提供しているだけでなく、長野市のAVIS-Net(電算など)やJANIS Network(JA長野県)、松本市のCnet(システム開発)などがありますから、月刊誌「インターネット・マガジン」などの記事や広告で十分検討して選んでください。

パソコンとワープロ機

個人がインターネットのサービスを受けるには、自宅にパソコンが必要で、これにモデムと呼ばれる機器で電話線に接続して、インターネット用アプリケーション・ソフトウェアを使います。パソコン機器を通常ハードウェア(hardware)と呼び、この中でMS-DOSとかWindows 3.1とかWindows 95とかOS/2 WarpとかMacOSとかUNIXとかの基本ソフトウェア(またはオペレーテシング・システムOperating Systemとも呼ぶ)が動き、その上でさらにみなさんおなじみのワープロ・ソフト(Word、AmiPro、etc.)、表計算ソフト(Excel、1-2-3、etc.)などのアプリケーション・ソフトウェアが動き実際の業務ができるようになっています。ソフトウェアおよびアプリケーション・ソフトウェアのことを、単にソフトともいっています。

ホームページ作りには通常パソコンが必要です。専門家はホームページ作り専用のソフトを使い、また絵の作成や音の録音、できあがったホームページ・ファイルのコンピューターへの転送・登録にパソコンを使うためです。ただし、しろうとが作る簡単なホームページの文章部分はパソコンに搭載されているテキスト・エディターでも、ワープロ機でも製作できます。ワープロ機では文章作成後そのメインメニューで補助機能の1つである「MS-DOSファイルへの変換」を使ってパソコンでも読めるファイルに変えて利用します。この作業には、通常のワープロ作業で使うディスケットとは別のディスケットを用意して、MS-DOSファイルを収容できるように補助機能の1つであらかじめ初期化(Initialize)をしておく必要があります。

ホームページの書き方

インターネット上のホームページでは、各ページがHTML言語(HyperText Markup Language)と呼ばれるコンピューター用言語を用いて記述されています。スイス・ジュネーブに本部があるワールド・ワイド・ウェブ・コンソーソアム(World Wide Web Consortium、略称W3C、http://www.w3c.org)で取り決められているもので、現在HTML 3.2が合意されています。注: HTML 4.0が'98年2月に合意されました。

HTMLは、ある規則に従って書かれた文書をいろいろなパソコン上で動くビューワー・ソフトウェア(viewer software)で見られるようにする言語です。ビューワー・ソフトウェアとは、皆さんのパソコンに入っているもので、「ブラウザー」(browser)とも呼び、ネットスケープ・ナビゲーター(Netscape Navigator)、インターネット・エクスプローラー(Internet Explorer)などがあります。

下の「図1: ホームページの見え方」で示すようなページを作りたい場合は、「図2: ホームページの書き方」で示すようなHTML言語で書きます。

図1: ホームページの見え方
The Page Title in English

章立ての大見出し(このページの題名)

ここにイメージを入れます!

章立ての中見出し1.

文字を画面中央に表示します

文字の修飾には太文字、斜体文字などがあります。

下のように箇条書きができます。

章立ての中見出し2.

強制的改行
もできるし、改行と同時に1スペース行

を空けることもできます。下のように画面に横線を引き、画面を上の部分(本文)と下の部分(コメント)に分けることもできます。

Created by Yoshi Mikami on July 1, 1997. Updated on July 3, 1997.

図2: ホームページの書き方 
<HTML>
<HEAD>
<TITLE>The Page Title in English</TITLE>
</HEAD>

<BODY>
<H1>章立ての大見出し(このページの題名)</H1>

<IMG SRC="seikyushu.jpg"> ここにイメージを入れます!

<H3>章立ての中見出し1.</H3>

<CENTER>文字を画面中央に表示します</CENTER>
<P>
文字の修飾には<B>太文字</B>、<I>斜体文字</I>などがあります。
<P>

下のように箇条書きができます。
<UL>
<LI>氏名：三上吉彦
<LI>住所: 長野県長野市
<LI>ホームページ: <A HREF="http://www.threeweb.ad.jp/logos/">世界の言葉のホームペ
ージ</A>へもリンクして飛べます
</UL>

<H3>章立ての中見出し2.</H3>

強制的改行<BR>
もできるし、改行と同時に1スペース行
<P>
を空けることもできます。下のように画面に横線を引き、画面を上の部分(本文)と下の
部分(コメント)に分けることもできます。

<HR>

Created by Yoshi Mikami on July 1, 1997.  Updated on July 3, 1997.

</BODY>
</HTML>

上の図を詳しく見ながら、HTML言語の使い方を学びましょう。HTLM言語で書かれたページは、<HTML>で始まり</HTML>で終ります。その内容は、<HEAD>で始まり</HEAD>で終る導入部分と、<BODY>で始まり</BODY>で終る本体部分とに2分されています。

このようにしてHTMLではすべて< >で囲まれたある意味を持った指令により書き、これをタグ(tag)と呼んでいます。タグには上に述べた<HTML>タグ、<HEAD>タグ、<BODY>タグや、以下に述べるように<TITLE>、<CENTER>、<B>、<I>、<H1>〜<H6>、<UL>、<OL>、<BR>、<P>、<A>、<IMG>、<HR>タグなどがあります。

<HEAD>タグで始まる導入部分にはまず<TITLE>タグが使われていますが、これはこのページをインターネット上で見分けるための表題で、通常ブラーザーでは1番上の画面外に表示されます。<TITLE>と</TITLE>で囲まれるところは、日本語で書いてもいいですが、世界の人々が見ることを考慮してなるべく英語で書きましょう。

次に<BODY>タグで始まる本体部分には、そのページの内容を記述していきます。ページ内容は章立てにすることができて、これには<H1>〜<H6>が使われます。この例では、<H1>と</H1>で囲まれたところ(1つある)が大見出しになっていて、<H3>と</H3>に囲まれたところ(2つある)が中見出しになっていて、それぞれブラーザーで見ると大きな文字と標準の文字が使われていることが分かります。さらに<H5>が小見出しですが、見出しは<H1>から<H6>まで細かく指定できます。

<CENTER>と</CENTER>で囲まれると、そのところはコンピューター画面の中央に配置(センタリング)されます。この指定がないと、文字は画面の左端から配置されます。注: HTML言語を取り決めているW3C(上記)では<CENTER>タグの代りに、<H>タグで<H3 ALIGN=CENTER>、下記の<P>で<P ALIGN=CENTER>のように、各タグの属性(Attribute)として書くように薦めています。センタリングには、<CENTER>タグでも属性ALIGN=CENTERの指定でも、どちらでもいいと思います。

文字の修飾には、<B>タグ(Bold)、<I>タグ(Italics)などが使われます。それぞれ</B>、</I>までに囲まれた文字が太字(ボールド)、斜体(イタリックス)で表示されます。

文書の内容を引き立たせるためによく使われるのが、<UL>タグ(Unordered List)です。<UL>と</UL>の間にリスト項目を<LI>タグ(Listed Item)で書くもので、ブラウザーで見ると各項目が通常黒丸(●)で始まる行として箇条書きされます。<UL>タグと似たものには<OL>タグ(Ordered List)もあり、この場合<OL>と</OL>で囲まれたところの各項目<LI>は、黒丸の代りに、上から順番に番号が付いて箇条書きされます。

各行の強制的な改行には<BR>タグ(Break)を使います。また行変えと共にスペースを1行取るには、新しいパラグラフを作ることと同じですから、<P>タグ(Paragraph)を用います。<P>タグには属性ALIGN=LEFT/CENTER/RIGHTを指定して、テキストの左揃え/中央揃え/右揃えをすることもできます。<BR>タグや<P>ヤグや<LI>タグには、終りを示す</BR>、</P>、</LI>を通常書きませんが、</P>、</LI>は書いてもいい。

HTML文書(ページ)の中のある箇所にリンク状況を書き、そこをマウスでクリックした場合に他のHTML文書(ページ)へ飛んでいって見ることができます。これには<A>タグ(Anker)が使われ、<A HREF="otherpage.html">他のページ</A>のように自分のホームページの中にあるページ、<A HREF="http://www.xxx.or.jp/~myfriend/otherpage.html">他のページ</A>のように他人のホームページ、などへ指定します。

イメージ(絵)を入れる場合は、<IMG>タグ(Image)を用います。実際には<IMG SRC="seikyushu.jpg">のように書き、イメージ・ファイルがどこにあるか(SRCはSource源の略)、どんな名前か(seikyushu.jpg)を付記します。イメージを画面の右側に置く時には属性ALIGNを使い&IMG SRC="seikyushu.jpg" ALIGN=RIGHT>と書き、属性ALIGNを書かないとALIGN=LEFTを書いたと同じで画面の左端にイメージが置かれます。

最後に<HR>タグ(Horizontal Rule)を挙げておきます。これは画面に横線を引いて、画面全体をその上とその下に分けて見やすくするものです。私は、ホームページの各ページの一番下に、製作者名、製作日、その後アップデートした時の日付を英語で書いておくことにしています。

演習

図2の内容をパソコンまたはワープロ機で打ち込み、パソコンのインターネット・ブラウザーで見てみましょう。 HTMLタグを書く時は、全て半角ローマ字を使ってください---全角ローマ字はタグとして認識されません。カタカナは半角カタカナでなく、全角カタカナを使ってください---インターネットでは半角カタカナは文字化けを起こすので使わないというのが原則です。

フランス語・ドイツ語・スペイン語などでホームページ作る際の注意点は、http://www.threeweb.ad.jp/logos/mlweb/weurope.htmlを見てください。

Note: これは1997年8月に長野聖救主教会、'98年5月に長野日仏協会で行なわれた講習会のテキストとして使用されました。

ページのトップ | ホームページ

ホームページの作り方第2回:中級編

講習会は8月に予定(1時間)

ホームページ作りのソフトウェア

前回の基礎編では、ホームページ作りをワープロ機でもできるように、主にパソコンのエディターを使ってHTML言語も習いながら学びました。HTML言語を学ばなくても、「ワープロ感覚で使える」ソフトが多数HTMLエディターまたはホームページ・ソフトとして販売されています。また、ワープロ・ソフトのWord、WordPro、一太郎の最新版では、ワープロ文書を作った後に保管(セーブ)する時に「HTML文書で保管」を選べば、ホームページ用のHTML言語を使った文書に変換してくれます。

上記のソフトを使ってホームページを作る場合にもHTML言語の基礎を知っていると大変便利なので、この中級編でもHTML言語をもう少しおさらいして、またホームページ全体のデザインやイメージ・ファイルの作り方も勉強しましょう。

演習

緑色と白の表紙のパンフレット「長野聖救主教会ごあんない」を見て、これをホームページに直してください。この作業を通してホームページ全体のデザインとこれまで習ったHTML言語のおさらいをしたいと思います。現在このパンフレットは3月に変更になった司祭さんのお名前などを訂正しなければなりませんが、ホームページを作っておけばこちらは簡単に直せます。ホームページは電子出版(Electronic Publishing)と呼ばれるゆえんです。

ホームページ全体のデザイン

イメージ・ファイルの作り方(論理)

ホームページの登録と呼び出し

ホームページの作り方第3回:上級編

講習会は未定(1時間)

HTML言語をもう少し

<A NAME="name">と<TABLE>

ページのトップ | ホームページ

Created by Yoshi Mikami on July 1, 1997. Updated on Apr. 18, 1998.