ホームページ作成講座

ＨＴＭＬ製作講座

ここではＨＴＭＬというホームページ製作用の言語を用いたホームページの作り方について解説して行きます。（不定期更新）

【１】はじめに'00.4.15
【２】ＨＰアカウントを取得する
【３】ＨＴＭＬとは
【４】ページを作る
　　・背景'00.4.27

【１】はじめに

　ＨＰを作るにあたって、何か特別な物を用意しなければならないのではないか、とお思いの方もいると思うのですが、最低限必要なのはメールアドレスだけです。メールアドレスさえあればＨＰは作れます。他にもＦＴＰとかあれば良いんでしょうが、管理人はスポ愛ＨＰを製作して以来ＦＴＰという物を使った事がないのでよくわかりません。面倒臭そうだし。これについてはomeza氏やYuzy氏、Kozy氏他知っている人に聞いてください。製作にあたって市販のＨＴＭＬ言語辞典などがあると便利かもしれません。『カラー版ＨＴＭＬタグ辞典』（翔泳社、1500円）などが見やすくてわかりやすいと思います。あと、当然ですが、『やる気』も必要です。

メールアドレスですが、これはＨＰのアカウント（ＨＰスペース：土地のようなもの）を入手する時に必要になります。基本的に一つのアカウントにメールアドレス一つが必要です。ＨＰスペースの容量が一杯になり複数メールアドレスが必要になったり、メールアドレスをお持ちでない人は、Hotmailなどで無料メールアドレスを取る事をお勧めします。
（無料メールアドレス・ＨＰスペース等が取れるサイトはこちら）

【２】ＨＰアカウントを取得する

次にＨＰアカウントを取るわけですが、現在様々なサイトでＨＰアカウントを入手する事が出来ます。ＦＴＰが必要なもの、そうでないもの、ＣＧＩ使用可or不可、拡張子によって使えないファイルがあるなど色々な違いがありますので目的によって選んでください。ここでは管理人が使用しているGeocities JapanとTripodについて説明します。

≪Geocities Japan≫
様々な目的別に分けられたアドレス（住所）の中から好きなアドレスを選ぶ方法です。（12ＭＢ）

①Geocities Japanへ行き、好きなコミュニティを選んでクリック。
②『このコミュニティに住む』をクリック。
③空き家情報があるので、どの区域に住むかを選ぶ。
④50件ずつ表示されている中から、好きな番地の家又は数字をクリック。キリの良い番号や覚えやすい番号はすぐなくなってしまうので気をつけよう。
⑤≪ジオシティーズ市民登録≫提供される物や登録方法などが表示される。下の≪同意≫ボタンをクリック。
⑥各種必要事項を書き込んで『登録』。メールアドレス以外は適当に書いても問題ありません。
⑦登録完了の画面が出ればＯＫ。パスワードの書かれたメールが送られて来るのでメールが到着次第『ファイルマネージャー』で作成・編集出来るようになります。

≪Tripod Japan≫
自分で好きなアドレスを作って（ＩＤ名がそのままアドレスになります）そこにＨＰを作る事が出来ます。（12ＭＢ）

①Tripod Japanへ行き、画面右側の『サインアップ』をクリック。
②メールアドレスと各種必要事項を記入。『２.任意のメンバー名』で記入したものはＨＰのアドレスの一部になります。
③『同意』ボタンをクリック。しばらくしてパスワードが書かれたメールが送られてきます。
④パスワードが送られてきたら、『サインアップ』の上にある『ログイン』でＩＤ、パスワードを記入し、また同じ画面に戻るので、今度は画面左側の『作成ホームページ』で作成画面に進む。これでホームページが作成できます。

【３】ＨＴＭＬとは

　さて、ＨＰ容量を手に入れたら、いよいよＨＰを作るわけですが、ＨＰを作るにはＨＴＭＬ言語というプログラム言語を覚えなければなりません。最近ではＨＴＭＬエディタやホームページ作成用のソフトがあるので別に覚えなくても作れますが、丁寧に作成する時や自分好みのＨＰを作りたい時にはやはりＨＴＭＬ言語を覚えておいた方が良いでしょう。覚えるといってもそんなに難しいもんじゃないのでご安心を。徳富でも作れます。簡単です。　まずは骨組みから。ＨＴＭＬで構成されているページには、以下のようなプログラムが記入されています。

=====================================================

＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞明治学院大学スポーツ愛好会＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞

ここにブラウザで表示する内容を書き込みます。

＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

（※実際は半角英数です）
======================================================

ＨＴＭＬで使うプログラム（タグ）は、基本的には開始のタグと終了のタグがあります。 ＜ＨＴＭＬ＞　　＜／ＨＴＭＬ＞ のように、終了タグには必ず『/』を書き入れましょう。終了タグを閉じ忘れると開始タグで記入した効果がそのまま続いてしまい大変な事になってしまいます。気をつけましょう。

プログラムの最初は、まず＜ＨＴＭＬ＞が来ます。ここからの文書がＨＴＭＬ文書である事を宣言し、ＨＴＭＬ文書の終わりには必ず＜／ＨＴＭＬ＞が付きます。

＜ＨＥＡＤ＞から＜／ＨＥＡＤ＞は、このページに関する情報をまとめます。この中でページの名前になるタイトルを＜ＴＩＴＬＥ＞　　＜／ＴＩＴＬＥ＞で囲みます。　

ホームページの内容（目に見える部分）は＜ＢＯＤＹ＞から始めます。ここにホームページを構成する各種の要素が含まれます。ページ内容の終わりは＜／ＢＯＤＹ＞で閉じます。

注）ＨＴＭＬタグは半角英数で記入しましょう！そうしないとタグとして機能しません。

＜ＨＴＭＬ＞　～　＜／ＨＴＭＬ＞ ＨＴＭＬ文書を宣言

＜ＨＥＡＤ＞　～　＜／ＨＥＡＤ＞ ページに関する情報を書き込む

＜ＴＩＴＬＥ＞　～　＜／ＴＩＴＬＥ＞ ホームページタイトル名を書き込む

＜ＢＯＤＹ＞　～　＜／ＢＯＤＹ＞ ホームページの内容タグを書き込む

【４】ページを作る

【３】でおおまかなページの仕組は理解できたかと思うので次はページを構成する様々な要素について紹介して行こうと思います。

≪背景≫
背景に関する記述は、＜ＨＥＡＤ＞＜／ＨＥＡＤ＞のあとの＜ＢＯＤＹ＞の中に全てまとめて記入します。

＜BODY BGCOLOR="(色名)">＞～＜/BODY＞ 背景の色を設定

＜BODY TEXT="(色名)">＞～＜/BODY＞ 文字の色を設定

＜BODY LINK="(色名)">＞～＜/BODY＞ リンクの色を設定

＜BODY ALINK="(色名)">＞～＜/BODY＞ リンクの読込中の色を設定

＜BODY VLINK="(色名)">＞～＜/BODY＞ 既に訪れたリンクの色を設定

＜BODY BACKGROUND="(画像ファイル名.拡張子)"＞～＜/BODY＞ 画像を背景に設定

＜BODY BGPROPERTIES=FIXED>～＜/BODY＞ 背景画像を固定

（例）
＜ＢＯＤＹ　ＢＧＣＯＬＯＲ＝”ｂｌａｃｋ”　ＴＥＸＴ＝”ｇｌａｙ”　ＬＩＮＫ＝”ｙｅｌｌｏｗ”＞　～　＜／ＢＯＤＹ＞
このように複数の要素を併記する事も可能です。

◆色の表示については、
＜BODY BGCOLOR=red＞
のように色名を英語で記入する場合と、
＜ＢＯＤＹＢＧＣＯＬＯＲ＝”＃ＦＦ００００”＞
のようにRRGGBB方式と呼ばれる色名を６桁の数字（２桁ずつ１６進数、右から赤・青・緑の色の度合で色を指定）で表示する方法があります。どちらで記入しても変わりはないので好きな方法でどうぞ。

◆ここでの文字の色の設定は、基本となる文字の色の決定を行います。いま御覧になっているページは＜ＢＯＤＹ　ＴＥＸＴ＝”ｗｈｉｔｅ”＞で白に指定しているので白い文字になっていますが、所々に他の色で書かれた文字があると思います。これは＜ＦＯＮＴ　ＣＯＬＯＲ＝”（色名）”＞でその色を指定している為です。

◆画像を背景に使用したいときは、(　)内に使用したい画像のファイル名を入れます。画像をホームページ内で使う時は、
①使いたい画像を見つけたら、マウスの右クリックで［名前をつけて画像を保存］を選び、その画像ファイルを、自分のパソコンの中のフォルダに取り込む。
②ジオシティーズもしくはTripodの『ファイルのアップロード』で使いたいファイルを参照し、アップロードする。これで画像が使えるようになります。背景については後ほど詳しく説明します。

例）＜ＢＯＤＹ　ＢＡＣＫＧＲＯＵＮＤ＝”ｈａｉｋｅｉ.ｇｉｆ”＞

◆『拡張子』とは、ドットを挟んでファイル名の後ろにある、ファイルを識別する為の文字の事を指します。基本的な拡張子には以下のようなものが存在します。
［.html(htm)］
［.gif］［.jpg］画像ファイル
［.avi］［.mpeg］［.mov］映像ファイル
［.mid］［.mp3］［.wav］音楽ファイル
［.txt］テキストファイル
［.exe］
［.zip］［.lzh］圧縮ファイル

＜ＨＴＭＬ＞　～　＜／ＨＴＭＬ＞	ＨＴＭＬ文書を宣言
＜ＨＥＡＤ＞　～　＜／ＨＥＡＤ＞	ページに関する情報を書き込む
＜ＴＩＴＬＥ＞　～　＜／ＴＩＴＬＥ＞	ホームページタイトル名を書き込む
＜ＢＯＤＹ＞　～　＜／ＢＯＤＹ＞	ホームページの内容タグを書き込む

＜BODY BGCOLOR="(色名)">＞～＜/BODY＞	背景の色を設定
＜BODY TEXT="(色名)">＞～＜/BODY＞	文字の色を設定
＜BODY LINK="(色名)">＞～＜/BODY＞	リンクの色を設定
＜BODY ALINK="(色名)">＞～＜/BODY＞	リンクの読込中の色を設定
＜BODY VLINK="(色名)">＞～＜/BODY＞	既に訪れたリンクの色を設定
＜BODY BACKGROUND="(画像ファイル名.拡張子)"＞～＜/BODY＞	画像を背景に設定
＜BODY BGPROPERTIES=FIXED>～＜/BODY＞	背景画像を固定