ホームページ作成の手引

Version 1.0 :September 15, 1997
Version 1.5 :March 10, 2000

ＨＴＭＬリファレンス

　エディタやワープロソフトで文章を打ち込むことができれば、ホームページ作
成は容易にできます。

１．ホームページの作成と閲覧


　ホームページの作成とブラウザでの閲覧はパソコン上で行います。

　(1) ファイルの作成と保存

　　(a) メモ帳(Notepad)を用いる場合
　　　　メモ帳を開き、ホームページのための文章を打ち込みます。
　　　　まずは自己紹介から始めましょう。
　　　　
　　　　文章ができたらをファイルを保存します。
　　　　ただし、ファイル名は　index.html　です。
　　　　（ファイル名は半角の英数字、記号を用いて下さい。）
　　　　保存するドライブ、ディレクトリは自由です。

　　　　メモ帳はテキストエディタですからファイル名の拡張子に関わりなく
　　　　テキスト形式で保存されます。
　　　　機能は最小限ですが操作が簡単ですから、慣れないうちはメモ帳を使
　　　　うのが得策です。

　　(b) 一太郎を用いる場合
　　　　一太郎を起動し文章を打ち込みます。内容は(a)と同じです。

　　　　ファイルを保存する場合、
　　　　　　「ファイル」、「名前を付けて保存」を選択し、
　　　　　　「ファイル形式」のボタンでは、「テキスト形式」を選びます。
　　　　　ただし、ファイル名は　index.html　です。半角小文字を用います。
　　　　　保存するドライブ、ディレクトリは自由です。

　　　　　再度読み込む場合は、「HTML文書をテキスト文書として読み込みます」
　　　　　と確認のメッセージが出ます。「確認」ボタンをクリックします。

　　　　　２回目以降の保存は「上書保存」を選択します。

　　(b) Wordを用いる場合
　　　　Wordを起動し文章を打ち込みます。内容は(a)と同じです。

　　　　ファイルを保存する場合、
　　　　　　「ファイル」、「名前を付けて保存」を選択し、
　　　　　　「ファイルの種類」のボタンでは、「テキスト形式」を選びます。
　　　　　ただし、ファイル名は　index.html　です。半角小文字を用います。
　　　　　保存するドライブ、ディレクトリは自由です。

　　　　　テキスト形式で保存する場合、Wordは保存形式について注意を促しま
　　　　　すが、無視し、テキスト形式で保存して下さい。

　　　　　２回目以降の保存は「上書保存」を選択します。
　　　---------------------------------------------------------------------------
　　　注意事項
　　　　★最初のページのファイル名を index.html とする理由
　　　　　　最初のページ（ホームページ）のファイル名はＷｅｂサーバで指定されます。
　　　　　　自分勝手に付けてはいけません。
　　　　　　　富山大学では一般に index.html となっています。
　　　　　　　　・富山大学のホームページのファイル名は index.html です。
　　　　　　　　　　　http://www.toyama-u.ac.jp/
　　　　　　　　　としてアクセスすると、サーバは、
　　　　　　　　　　　http://www.toyama-u.ac.jp/index.html
　　　　　　　　　を見つけ、index.htmlの内容をブラウザに送ります。

　　　　　　　　・私のホームページのファイル名も index.html です。
　　　　　　　　　フルパス指定すると、
　　　　　　　　　　　http://www.eco.toyama-u.ac.jp/~furuta/index.html
　　　　　　　　　です。

　　　　★２ページ目以降のファイル名の付け方
　　　　　複数のページを作成する場合、呼び出す側のページで呼び出されるページの
　　　　　ファイル名を指定しますので、２ページ目以降のファイル名は自由に付ける
　　　　　ことができます。
　　　　　ただし、拡張子はすべて html です。

　　　　★ファイル名を付ける際の一般的注意事項
　　　　　ファイル名には、半角小文字の英数字・記号を使って下さい。
　　　　　　　（パソコンのWindows95では大文字・小文字の区別はありませんが、UNIX
　　　　　　　　系のサーバでは区別されます。ここでは、サーバへ転送することを考
　　　　　　　　えて、小文字で統一しておきます。慣れるまでです。）

　　　　　　　日本語（漢字、全角カタカナ、半角カタカナ）を使わないで下さい。

　　　　　　　漢字やカタカナのファイル名が確実に通用するのはパソコンやワープロだ
　　　　　　　けです。他の機種やシステムと互換性を保つ、文字化けを防止する、とい
　　　　　　　った意味で「半角英数字・記号」を使います。

　　　　★パソコンのみでの練習（インターネット上での公開を全く考えない場合）
　　　　　パソコンのみで練習するのであれば、１ページ目（ホームページ）を含め、名
　　　　　前は自由に付けてかもまいません。
　　　　　　たとえば、１ページ目を、intro.html, hello.html などとできます。
　　　　　　ただし、ブラウザでの閲覧を容易にするために、拡張子は htmlか、
　　　　　　htm(Windows95の場合)にして下さい。
　　　---------------------------------------------------------------------------


　(2) ブラウザでの閲覧
　　　作成したＨＴＭＬファイルをブラウザで閲覧します。
　　　ブラウザとして、ここでは、Netscape Navigator と MS Internet Explorer を
　　　想定しています。

　　　閲覧の仕方には二通りあります。

　　　(a) まず、ナビゲータまたはインタ−ネット・エクスプローラを起動させます。
　　　　　続いて、
　　　　　「ファイル」、
　　　　　「オープン」　････　表示は open page, open location, openなど
　　　　　から、
　　　　　「C:\」
　　　　　などと、ＨＴＭＬファイルのあるドライブを指定します。
　　　　　ブラウザはディレクトリのリストを表示します。
　　　　　そこで、
　　　　　開きたいディレクトリをダブルクリック、
　　　　　開きたいＨＴＭＬファイルをダブルクリック、
　　　　　します。

　　　　　ブラウザは、作成したＨＴＭＬファイルを読み込んで表示してくれるはず
　　　　　です。

　　　(b) エクスプローラで開きたいＨＴＭＬファイルをダブルクリックします。
　　　　　ナビゲーター(Netscape Navigator)、または、
　　　　　インタ−ネット・エクスプローラ(Internet Explorer)が起動し、作成した
　　　　　ＨＴＭＬファイルを読み込んで表示してくれるはずです。

　(3) これまでの作業がうまくいけば、後は、ファイル編集、保存、閲覧、という作
　　　業を繰り返すだけです。

　　　　・エディタやブラウザは待機状態にしておきます。
　　　　　（エディタとブラウザを画面上で重なって表示された状態にしておきます。）

　　　　　こうしておけば、エディタからブラウザへ、ブラウザからエディタへの移動
　　　　　はマウスボタンのクリックだけで済みます。

　　　　・修正したファイル（ページ）の再度の読み込みは、
　　　　　　　Navigator では　"Reload"　で行います。
　　　　　　　Internet Explorer  では　"Refresh"　で行います。

２．ＨＴＭＬファイルの書き方

　これまでは、ただ単に文章を打ち込んでそのままブラウザで閲覧しましたので、
皆さんがエディタで打ち込んだテキスト通りには表示されなかったと思います。
　この原因は、ＨＴＭＬコードでは「改行」や「スペース」は無視されるためです。
　そこで以下では、「ＨＴＭＬリファレンス」を用いて、ＨＴＭＬファイルの書き
方について学びましょう。

ＨＴＭＬリファレンス



３．ホ−ムページの公開


　　ホームページを公開するためには、前もってネットワーク管理者から
　ネットワークサーバのＩＤをもらっておく必要があります。
　　申し込むと、ネットワーク管理者はあなたのためにホームページ用ディ
　レクトリを割り当ててくれます。
　　サーバでの各種設定は自ら行う必要があります。
　　　　（サブディレクトリ作成、ファイルのパーミッション変更等）

　　あなたがすべきことは、ホームページ関連のファイルをＷｅｂサーバの指
　　定されたディレクトリに転送することです。

　　これができれば、あなたは自分のページを全世界に公開できます。


　（注意事項）
　　(1) ホームページ関係のファイルを指定されたディレクトリへ転送します。
　　　　その際、ディレクトリの（ツリー）構造を変えないように注意しましょう。

　　　　詳細は、この手引の「リファレンス」の「その他」にある「文書パ
　　　ス」をみて下さい。

　　(2) 必要があれば、転送したファイルのパーミッションを変更します。

　　　　サーバに送ったHTMLファイルやイメージファイルは、不特定多数の
　　　　人がブラウザで閲覧できなければいけませんから、誰に対しても
　　　「読み出し可」の設定になっている必要があります。
　　　　ブラウザで閲覧してみて"Resource access forbidden"(403)の表示
　　　　が出る場合などは「読み出し不可」の設定になっていると思われま
　　　　す。TELNETでファイルのパーミッションを確認し、必要に応じて設
　　　　定を変更します。

４．参考書


　参考書は選択に迷うほど数多く出版されています。書店で実際に内容をみて、
自分に合うものを見つけて下さい。参考のために何冊かあげておきます。

　・渡辺竜生著
　　　『ＨＴＭＬハンドブック』ソフトバンク(1997.5)、1200円+税
　・シーズ　著
　　　『ＨＴＭＬポケットリファレンス』技術評論社. 1,400円+税
　・吉村・家永・鐙著
　　　『インターネット ホームページデザイン エクステンション』翔泳社
　・ローラ・リメイ著　武舎広幸・久野禎子・久野　靖訳
　　　『続・HTML門−新機能,ＣＧＩ,Ｗｅｂの進化−』プレンティスホール出版
　・河西朝雄・河西雄一著
　　　『ホームページの制作』技術評論社,1997. 1,631円+税
　・SoftwareDesign別冊編集部編
　　　『Ｗｅｂクリエイター実践ホットガイド』技術評論社,1997. 1,780円+税x
　・スチュアート・ハリス、ゲイル・キッダー 著： 川添 歩監訳
　　　『HTMLパブリッシング for Netscape』インプレス販売,1997. 3,980円+税
　　　　Netscape Communications社の公式マニュアル。
　　　　Netscape Navigator 4.0 の拡張機能についても紹介あり。
　・ Sachi著：宇野謙吉監修
　　　『初めてのＨＴＭＬ３．２』リブロス(1997.7). 2,750円+税
　・ Kris Jamsa他著：(株)スリーエーシステムズ訳・監修
　　　『Ｗｅｂプログラミング』翔泳社(1997.5). 5,200円+税

５．各種アプリケーションのホームページ編集機能


　一太郎Ver8 や Microsoft Office97、Lotus Super Office97 など最近のアプリケー
ションではインターネット機能が強化されています。
　ホームページ編集機能が標準装備され、HTMLファイル、イメージ、表の作成も容易に
できます。

　(1) 一太郎 Ver10
　　　一太郎Ver7ではIBMホームページ・ビルダー(Ver 1.2)が添付されていました。
　　　一太郎Ver8ではホームページ作成機能はビルトインされました。
　　　一太郎Ver10ではホームページ作成機能が強化されています。
　　　詳細は、一太郎のマニュアル『一太郎ダイジェスト』の「ホームページを作る」
　　　をご覧下さい。

　　　イメージファイルは一太郎８のディレクトリ（Just\ｲﾒｰｼﾞ）にあります。

　(2) Microsoft Office2000
　　　　Office2000では、Ｗｅｂ機能がビルトインされ、インターネットが利用しや
　　　すくなっています。

　　　　Word：
　　　　　　普通の文章を打ち込む要領でHTMLファイルを作成・編集できます。
　　　　　　保存するときに、「HTML形式で保存」を選択すればよい。

　　　　Excel：
　　　　　　データやグラフをHTML形式で保存できます。
　　　　　　保存するときに、「HTML形式で保存」を選択すればよい。

　　　　PowerPoint：
　　　　　　ホームページに張る絵図を作成・編集できます。
　　　　　　保存するときに、「HTML形式で保存」を選択すればよい。

　　　　Access：
　　　　　　HTML,IDC/HTX,ASPなど、異なる形式のページ対応。
　　　　　　保存するときに、「HTML形式で保存」を選択すればよい。

　　　　イメージファイルは、ＭＳオフィスのディレクトリ
　　　　　　 clipart
　　　　にあります。


　(3) Lotus Super Office
　　　　Lotus Super Officeでは、Ｗｅｂ機能がビルトインされています。
　　　　ファイルをHTML形式でディスクに保存したり、サーバ上のHTMLファイルを
　　　　直接開いて編集できます。

　　　　WordPro：
　　　　　　普通の文章を打ち込む要領でHTMLファイルを作成・編集できます。
　　　　　　ディスクへ保存するときは、「ファイル」、「名前を付けて保存」
　　　　　　を選択します。「ファイルの種類」は「HTML」です。

　　　　Approach：データをHTML形式で保存できます。
　　　　　　　　　　
　　　　Freelance：
　　　　　　ホームページに張る絵図を作成・編集したり、手の込んだページフレ
　　　　　　ームも作成できます。
　　　　　　保存するときに、「ファイル」、「インターネット」「Ｗｅｂページ
　　　　　　として保存」を選択。

　　　　1-2-3：
　　　　　　データやグラフをHTML形式で保存できます。
　　　　　　保存するときに、「ファイル」、「インターネット」「Ｗｅｂページ
　　　　　　として保存」を選択。範囲の選択などオプションが幾つかあります。
　　　　　　最後に「HTMLファイルに保存」を選択します。

　　　　イメージファイルは、ロータスのディレクトリ
　　　　　　lotus\wordpro\graphics
　　　　にあります。

　(4) Netscape Communicator Ver_7
　　　 Communicator ver.4.7 は Navigator 4.72 を含むほか Page Composer という
　　　ホームページ作成・編集機能なども標準装備しています。


　各種アプリケーションのホームページ編集機能は、いわば定型的なことを簡単な操作
でこなすことに長けていますが、複雑なことや最新のテクニックは想定していません。
したがって、本格的・最新のテクニックを含むホームページを作ろうとすれば、やはり
自分でHTMLファイルを直接編集せざるを得ません。
　こうしたことから、アプリケーションのホームページ編集機能を活用して「材料」や
「部品」を作って基本的なページ編集を行い、「組立」(細かい編集)は自分でするのが
最善の方法といえましょう。
　自分で編集できれば、思い通りの結果がでるまで、修正を加えることができます。

６．まとめ

　ホームページの作成・編集と閲覧はパソコン上で行います。

　パソコン上でホームページの作成・編集と閲覧を行い、ページが思い通りに表示され
ることを確認してからサーバにＨＴＭＬファイルを転送しましょう。

　また、Netscape Navigator ばかりでなく Internet Explorerでもテストを行い、どの
ブラウザでも正しく表示されることも確認して下さい。

　ファイル転送はＦＴＰで、またサーバの操作はＴＥＬＮＥＴで行います。

　参考書等を読んで勉強し、Java、JavaScript、CGIなども使ってみましょう。

《戻る》