Let's Try Web
ホームページを作ろう

 

■  はじめに 

 

「ホームページはどうやって作るの?」というご質問を時々いただきます。素人の私にとってはかなりプレッシャーを感じる質問ですが、知っている範囲で基本的な部分をまとめてみました。「作りたいけど掲載する情報が無い」という方も多いのですが、そこは心配ご無用!会社や企業などを除く、個人のホームページの多くは趣味や個人情報の世界です。書きたいことを書いて、インターネット上でコミュニケーションをする・・・それで十分なのではないでしょうか。
なお、以下の内容は私のパソコン環境(WINDOWS)をベースに説明していますのでご了承下さい。

また、インターネットへの接続環境が既に整備されていることを前提として説明しています。
個人的な好みで(笑)、ホームページという表現より「Web」という表現を多用していますが、ここではホームページと表現していますので、あしからずご了承ください。

 

  ホームページ制作に必要なもの 

  • WINDOWSの入っているパソコン

  • ホームページの閲覧に必要なブラウザ(IEなど)

  • FTPソフト(HTMLファイルや画像をプロバイダのサーバに送信する時に使用します。詳細は後述)

■  作成手順  

おおまかな作成手順は次のとおりです。

 1 HTMLファイルを作成します

 2 プロバイダのホームページサーバにアップロードします(送信)
 3 URL(ホームページのアドレス)を公開します

 

■  HTMLファイルの作成  

 

HTML」・・・どこかで聞いたことがあるかも知れませんが「HTML」はHyper Text Markup Languageの略で、ホームページを構成する文章、画像、音声等を定義する言語で、ホームページはこのHTML言語で記述されており、文字の大きさや位置、色、画像や音声の貼り付け、他のファイルやホームページとのリンクなどは、すべてこのHTML言語の「タグ」という一種の記号を使って記載されています。
なお、最近では
HTMLファイルを作成する専門のソフト(FrontPage、ホームページビルダー等)が市販されていますし、ワープロソフトのWORDでも、タグといHTMLの記号を気にしないでワープロ感覚でHTMLファイルを作成することができます。しかし、これらのソフトを使用したとしても、必ずタグを直接記述しなければならない場面に遭遇することになりますので、一度はタグの勉強をしておくことをお勧めします。
ここでは、タグの理解を深めるために
WINDOWSのアクセサリに標準で付属している「メモ帳」を使ってHTMLファイルを作成してみます。なお、私は最初はメモ帳でファイルを作成しましたが、現在はFrontPageを使用して作成しています。(笑)

 

1 メモ帳を開きます

「スタート」→「プログラム」→「アクセサリ」から「メモ帳」を開きます。

2 HTMLファイルを書きます

次のサンプルを「メモ帳」に全角英数字又は半角英数字で書きます。
メールアドレスの部分は必ず半角英数字で記入してください。

<HTML>
<HEAD><TITLE>マイホームページ</TITLE></HEAD>
<BODY BGCOLOR=”#00FFFF”><CENTER>楽しいホームページ
</CENTER>
<MARQUEE>私のホームページへようこそ</MARQUEE>
<HR>
<A HREF=”MAILTO:banchan@mti.biglobe.ne.jp”>メールはこちらです</A>
</BODY>
</HTML>

タグの解説
<HTML>と</HTML>などがタグです。
タグは通常1組で記述しますが、中には単独で機能するタグもあります。
</HTML>の「/」部分は組となる最後の方のタグに必ず入り、タグの定義範囲の終わりを示すものです。

上記サンプルで使用している主要なタグの意味は以下のとおりです。

タ          グ

意          味

<HTML>・・・</HTML>

HTMLファイルであることの定義

<BODY BGCOLOR=”#00FFFF”>

ページの背景色を2進法で指定

<HEAD><TITLE>・・・</HEAD></TITLE>

ヘッダとタイトルを定義

<CENTER>・・・</CENTER> 

文字の表示位置を中央に指定

<MARQUEE>・・・</MARQUEE>

指定したテキストが横移動します

<HR>

横に線を引きます

<A HREF=”MAILTO:・・・”>・・・</A>

メール送信用のタグです

 

3 ファイルの保存

次に、今メモ帳で作成したファィルに名前を付けて保存します。
メモ帳の「ファイル」→「名前を付けて保存」をクリックし、ファイル名に「
index.html」と入力し「デスクトップ」に保存してみましょう。

ここで重要なことはファイル名と拡張子を必ず半角英数字で記載することと拡張子を「.html」(又は「.htm」)とすることです。
ファイルが保存できたらメモ帳を終了します。

 

4 今作成したホームページファイルを見てみましょう

保存ができたら、今作成したホームページファイルを見てみましょう。
デスクトップにある作成したファイルのアイコンをクリックします。
どうですか?ブラウザが自動的に起動して今作成した内容が表示されましたか?
無事に表示されれば、まずはめでたく
HTMLファイルは完成です。

 

5 ソースを見てみましょう

ブラウザで開いた状態のまま、プラウザの「表示」→「ソースを表示」をクリックしてみましょう。
今度はメモ帳が自動的に開いて先ほど記入したタグも表示されていると思います。
これを使用すると、ホームページがどんなタグを使用して記述されているか見ることができます。
気に入ったホームページのデザインを参考にしたい時に便利ですので覚えておきましょう。

 

6 いろんなタグを使う

タグには大変たくさんの種類があります。画像を入れたり、BGMを鳴らしたり、リンクをさせたりいろんなタグを使って楽しいホームページを制作してみて下さい。
タグについてはここでは解説しきれませんので最寄りの本屋さんで適当な解説書を入手することをお勧めします。(笑)
なお、タグにはブラウザの種類によって使用できないものもありますので注意が必要です。

 

7 ブラウザの表現力の違いについて

現在の代表的なブラウザはIENNで、HTMLファイルを読み込んで表現する機能は同じですが、前述のようにIEが読めてもNNが読めないタグがあったり、逆にNNが読めてもIEが読めないタグがあり、標準としているフォントのサイズも異なるなどホームページを表現するにはたくさんの問題を抱えています。このため、「このホームページはIEで(又はNNで)見てください」という指定をしているページが沢山あります。
そういう意味では、同じブラウザというソフトでも全く違うものと解釈した方がよいと思います。

 

8 アドバイス

制作にあたって大切と思われるポイントをいくつか述べてみます。

  • 必要以上に重いホームページにしないこと
    画像を多用しすぎるとファイルの大きな重いホームページになってしまいます。結果としてアクセスしてから表示されるまでの時間が必要になり、待ちきれないで見ないで他に移動してしまったり、通信料がかかったりという結果になりますので、閲覧する人のことを考えて必要以上に重いホームページは避けましょう。

  • index.htmlというファイル名
    ホームページはリンクや画像を含めたくさんのファイルで構成されますが、一番最初に表示させるトップページには必ず「index.html」というファイル名を付けましょう。(理由は後述)

  • 大文字と小文字を正確に区別しましょう
    WINDOWSは使い易いように英数字の大文字と小文字を区別しないで読み込む環境となっていますが、多くのプロバイダのホームページサーバはUNIXマシンなので大文字と小文字を区別します。このため、自分のパソコン(WINDOWS環境)でテストして問題がなくてもプロバイダのサーバに送り込んだとたんにリンクが作動しなくなることがあります。リンクのファイル名を記述する時には大文字と小文字を区分して正確に記述する事が重要です。また、ファイル名に日本語は厳禁です。

  • 設計してから制作しましょう
    制作作業に入る前に、ファイル構成や内容の設計をしておくと、効率よくホームページが作成できす。

 

■ ホームページサーバへのアップロード 

 

さて、めでたくホームページファイルが完成したら、次はプロバイダのサーバへのアップロード(送信)です。

1 ホームページ開設の申し込み

 

多くのプロバイダは基本料金の中に、一定の容量(私の加入するBIGLOBEは10MBまで無料)のホームページ開設が可能ですが、開設システムはプロバイダによって異なります。
プロバイダのサービスを確認してホームページ開設の申し込みをしましょう。
開設申し込みが完了すると、ホームページの開設に必要な「ホームページID」「ホームページパスワード」「ホームページを設置するサーバ名」などの情報が通知されます。
これは、HTMLファイルや画像ファイルをサーバに送信する際に重要な情報になりますので記録して保存しておきます。

 

2 FTPソフトを準備しましょう

 

次にHTMLファイルや画像ファイルをプロバイダのサーバに送信します。
常時接続できる環境の場合は自分のパソコンをサーバにしてしまうことも可能ですが、一般的な個人ユーザーには常時接続環境を構築することが困難です。そこでHTMLファイルや画像ファイルを常時インターネットに接続されているプロバイダのサーバに送信して、自分のホームページが閲覧できるようにする訳です。
送信にはファイルをサーバに送受信するFTPソフトが必要になります。WINDOWSHTMLファイルエディタにはFTP機能が付属していますが、使い易いものではないと思いますので専門のFTPソフトを雑誌の付録や「窓の杜」などからダウンロードして入手することをお勧めします。

 

3 プロバイダのサーバへの送信

 

さて、いよいよHTMLファイルや画像ファイルをプロバイダのサーバへ送信します。
まず、FTPソフトを起動して、自分に割り当てられたサーバに接続します。この時にホームページ加入手続きで入手した「ホームページID」「ホームページパスワード」「ホームページを設置するサーバ名」を入力することが必要です。ログオン(接続が完了)すると一般的なFTPソフトは自分のパソコンのデイレクトリとプロバイダのサーバのディレクトリが同じ画面に表示されますので、送信したいファイルをクリッリすること等により選択したファイルがプロバイダのサーバに自動的に送信されます。
ここでは、FTPソフトによって操作方法が違いますので、詳しく述べませんが、入手したFTPソフトのヘルプなどを見ながら作業を進めて下さい。
なお、送信方法には「ASCII」「バイナリ」「自動」など送信するファイルの種類がテキストか、画像か等によって送信モードを選択することが必要になりますが、一般的には「自動」を選択して問題がないと思います。
また、プロバイダのホームページ容量は開設申し込みの時に通知されますが、容量以上のファイルを送信しようとしてもサーバが受け付けません。画像などを必要以上に多用する場合は注意が必要です。
多くの場合はファイルの整理の都合上、サーバにフォルダを作成してアップロードすることになりますが、ファイルや画像のリンクの指定を「○○○/×××」のように正確に指定しないと、ファイルがないと認識されてしまいリンクが作動しません。リンクを作る時にはこのフォルダの指定も重要になります。
例えば「○○○/×××」というリンクファイルの記述がindex.htmlというファイルにあるとした場合、「index.htmlというファイルと同じ階層にある○○○というフォルダの中の×××というファイルを参照しなさい」するという意味になります

 

■ URLの公開 

 
さて、これでサーバへのファイル送信が完了です。早速、ブラウザに自分のホームページのURLを入力してみましょう。私のURLは「http://www2s.biglobe.ne.jp/banchan/」です。「www2s.biglobe.ne.jp」はホームページを設置したプロバイダのサーバ名、「/banchan/」は、プロバイダのサーバの中のディレクトリをさしbanchanというディレクトリのファイルを読み込みなさいという命令になります。
ここで重要なことは、ブラウザはデイレクトリを指定された場合は、自動的にそのディレクトリの中にある「index.html」というファイルを読み込むということです。HTMLファイルの作成のところで、トップページには「index.html」というファイル名を付けることが重要と説明したのはブラウザのこの機能によるものです。
さて、自分のホームページが正確に表示されましたでしょうか?
 無事にが表示されたら次は宣伝です。「YAHOO JAPAN」などのほか、たくさんのホームページ検索システムがあり、無料でホームページのURLを登録したり検索できるシステムになっていますので、自分のURLを登録して公開しましょう。
 

■ ステップアップのために 

 
ホームページの多くには、アクセス件数を自動的にカウントする「アクセスカウンタ」、訪問者が自由に書き込みできる「掲示板」、画像が動く「GIFアニメーション」、「JAVA」等の動きのあるものがたくさんあり、一層楽しいものにしています。これらは、HTMLのタグだけでは表現することができませんので、専門書を購入して勉強したり、専門のプログラムをダウンロードして貼り付けたりという手法が必要になります。これらのソフトを公開したり作成方法を解説しているサイトがたくさんありますので、慣れてきたら徐々に勉強して一層楽しいホームページにして下さい。
ちなみに、アクセスカウンタは一般的にはSSICGIというプログラムが、掲示板にはCGIというプログラムが使用されていますが、プロバイダの中にはそれらの使用を禁止しているプロバイダもありますので注意が必要です。(許可されないプロバイダの場合でも他サイトへのリンクによりレンタルカウンタや掲示板を使用することが可能ですので念のため)
 

■ あとがき 

 
以上で初歩のホームページ製作講座は終了です。
 

If you need  other contents then please click Home↓

| Home |


Copyright©2001,Banchan. All right reserved.
mailto:banchan@mti.biglobe.ne.jp