あくまでメモです。本格的にHPの作り方をサポートするものではありません。
拡張子というのは〜.html、〜.gifなどそのファイルの種類を表す記号です。Windowsの初期設定ではPCで拡張子を表示させない設定になっています。アイコンで区別できるといってもHPを作成するにはやはり表示させておいたほうが便利です。コントロールパネルからフォルダオプションを選び表示タブにある「登録されているファイルの拡張子は表示しない」のチェックをはずしましょう（Windowsのバージョンによって若干設定が異なります）。下の表にいくつかまとめてみました。
| 拡張子 | 種類 | 閲覧 | 備考 |
|---|
| html htm | HP | ブラウザ | HP作成ソフト
テキスト編集ソフト |
| gif jpg(jpeg) | 画像 | ブラウザ
イメージソフト | 編集はペイントソフト |
| mpg(mpeg) wmv | 動画 | Windows Media Player |
|
| ram | 動画 | Real (One) Player |
|
| mov | 動画 | Quicktime |
|
| mid | 音楽 | Windows Media Player等 | midi HP用音楽ファイル
|
| wav | 音声 | Windows Media Player等 |
Windowsの起動音等の形式 |
| mp3 | 音楽 | Windows Media Player等 |
midiよりサイズ大 |
| txt | 文書 | メモ帳等 | サイズが大きいとワードパッド |
| swf | Flash | ブラウザ |
Flashの本体ファイル |
他の人が作った画像を自分のHPやレンタル掲示板で表示させる際、その製作者が画像ファイルを置いてあるHPサーバのURLを直接指定して表示させること。直リンクした掲示板などで画像を見ると製作者のHPで同じ画像を見るのと同じだけの負担が製作者HPのサーバにかかります。特に人気のある素材屋さんの場合は自身のHPへのアクセス数が多い上に直リンクまでされるとサーバへの負担が大きくなり表示が遅くなったりサーバがダウンしたりします。なので一度自分のPCにダウンロードし、自分のHPサーバにアップロードしてから利用するのがマナーです。ただし製作者が直リンクを許可している場合もあるので製作者HPの利用規定をよく確認しましょう。
バナー程度であれば許容範囲といえるかもしれません。
HPを公開するにはまず自分専用のHPスペースを確保することが必要です。画像ファイル等はすべてそこに置き、レンタル掲示板の背景やアイコンもそこの画像ファイルを指定する形にすれば直リンクを避けることもできます。自分専用のスペースはたいていの場合、契約しているプロバイダか無料レンタルサービスを利用します。前者は@nifty、biglobe、so-net、ocnといったインターネット接続業者、後者はジオシティーズ、infoseek、tripodのような広告付きを条件に無料でスペースを貸してくれるサービスのことで、検索エンジン運営会社がやっていることが多いです。HPスペースを借りるということは、プロバイダなどが使用するサーバとよばれる特殊なコンピュータの一定容量をHP用に借りるということです。プロバイダで使い放題系のコースであれば5〜20MB（メガバイト）程度まで無料で貸してくれる場合が多いです（別途申し込みが必要な場合が多い）。まずはプロバイダに確保することをおすすめします。無料サービスを利用する理由としては、複数のHPを持ちたい、プロバイダのほうは家族が別のHPで使っている、プロバイダのほうの使い勝手が悪い（容量やCGI規制）、最初はプロバイダのほうにすべて置いていたが拡張を重ねて容量が増え無料分では足りなくなったがお金を払ってまで容量を増やすのは嫌、人気のあるHPでアクセスが集中するためコンテンツをいくつかのサーバに分散したい、などなどいろいろ考えられます。無料スペース選びのコツとしては、広告が邪魔にならない、容量が多い、障害が少なく夜間でも安定してアクセスできる、自作CGIが使えるといったところですがすべてを満たすサービスはなかなか見つからないもの。あとは各自の利用目的や好みで。また無料サービスでは掲示板等のために画像ファイルだけを置くこと（いわゆる画像倉庫、保管庫）を禁止していることが多いので注意してください。ダミーでもいいから一応HP運営しているふりはしないといけません（笑）。また最近ではブロードバンド＆常時接続が普及し自分でサーバを立ち上げる人も増えています。こういうのを自宅サーバとよんでいます。
自分が作ったHP用のファイルを確保したサーバに転送することをアップロード(アップ、up)といいます。反対にサーバにあるファイルを自分のPCに保存することをダウンロード(DL)といいます。HPを公開するためにはまず自分のPCでHP用のHTMLファイルを作り、それらをサーバに送ってあげなければなりません。我々がネットを通じて見ているHPはすべてサーバにあるファイルです。サーバにアップロードするには大きく2つの方法があります。ひとつはFTPソフトを使う方法です。FTPソフトはファイルをサーバに転送するための専用ソフトでフリーで良質なものもかなり出回っています。なかでも曽田氏が作ったFFFTPは人気があります。またHP作成ソフトにすでにこの機能が含まれている場合もあります。もうひとつはブラウザを使う方法です。こちらはすべての業者で利用できるわけではなく煩わしいFTPソフトの設定をしなくてもいい初心者向けのサービスです。
画像の上にカーソル（マウスの矢印）をもっていきマウスを右クリックしてプロパティを選択します。
そこに表示されているアドレス（URL）というのがその画像のURL（アドレス）です。画像の上で右クリックする習慣をつけるとよいでしょう。それが画像ファイルなのかどうか区別できます。もしそのURLの最後がgifとかjpgになっていればそれは画像ファイルであることがわかります。
練習 次の画像のURLは？
正解(下の行・〜・の間を反転させると…)
・http://www5c.biglobe.ne.jp/~mark/img2861.gif・
URLの前半部分をみるとその画像ファイルがどこのサーバにあるものかがわかります。http://www5c.biglobe.ne.jp/~mark/はうちのHPです。つまり上の画像は自分のサーバにある画像をここで表示させていることを意味します。
もしURLの最後がgifやjpgでなければそれは画像ファイルではなくタグだけで画像のように
見せているか、FlashやJavascriptを使っている可能性があります。
HPで画像を表示する場合、たとえばデジカメから取り込んだままの大きいサイズの画像を何枚も貼り付けると重くてなかなか開けません。そこで枚数制限するか、1枚あたりのサイズを小さくするとか、小さいサイズの画像を並べておいてクリックすると大きい画像が表示されるようにリンクをはるといった工夫が必要です。
断っておきますが<IMG>タグで表示サイズだけを変えるということと同じではありません。<img src="画像URL" hight=100 wedth=120>といった形でたしかに画像の表示だけを大きくしたり小さくしたり指定することができます。しかしそれでは本体の画像ファイル自体の大きさは何も変わっていません。たとえ表示は小さくても重たいのは解消されません。画像ファイルの拡大・縮小にはペイントソフトや画像編集ソフトを使います。Windowsについているペイントでもできます。GIF形式以外(jpeg)ならフリーソフトもあります。私はSmaHeyがお気に入り。
HP用のHTMLはすべてタグとよばれるものでできています。タグにはいろいろな種類があります。文字の大きさや種類に関するもの、リンクをはるためのもの、表をつくるためのもの、画像を表示させるもの…などたくさんあります。詳しくは下の参考ページにあるKinta's PC room かとほほのＷＷＷ入門
をご覧ください。当然ですがこのページだってタグでできています。IE（インターネットエクスプローラ）であれば一番上にある表示からソースを選んでみてください。メモ帳で記号や文字がずらずらと書かれてあるはずです。それらがこのページを表示させるためのタグということになります。具体的にはタグは
<>〜</>という形をとります。たとえば文字の大きさを変えて色を赤にしようと思えば
<font size=5 color="#ff000">赤</font>という形になります。fontタグは文字の大きさや色を変えるためのタグです。実際に表示させてみると赤。ここで注意してほしいのは</font>の部分です。これはフォントサイズ5で色が赤の部分をここで終わりにしますという意味です。タグは必ず最後に</>という形で閉じなくてはいけません。もし私が先ほどのタグを閉じずに続ければ
ずっと赤でFONTサイズ5のまま最後まで続きます。
とくに掲示板などでタグを使うときは閉じ忘れに注意しましょう！
元に戻しますがタグには最初と終わりがあるということはわかっていただけると思います。そしてその間に文字や画像をはさむわけです。こうしたタグの組み合わせでHTMLができています。ちなみに<html>はこれからHTMLを書きますよという宣言、</html>はそれが終わるという宣言です。HTMLを書く以上原則的に最初と最後に必要です。
しかし最近のブラウザでは<html><body><head>のような基本タグは最初と最後ともに省略しても勝手に補って表示してくれます。また段落をつくる<p>のように閉じるのを省略してもよいタグもありいろいろ試してみてください。
HTMLの基本構成は次のようになります。
<html>
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>
上のタグだけで書いたページをつくってみました。これです。
<head>〜</head>内にはタイトル（ブックマーク；お気に入りに入れたときに表示される）やページ全体のスタイルに関する情報を入れます。この部分は本文には直接表示されません。
画面に表示される部分はすべて<body>〜</body>の部分に書きます。また<body>の中に半角スペースを空けて情報を追加すると背景の色や画像を指定することができます。たとえば<body bgcolor="#ffff00">にすると…？
先ほどのページを保存して試してみてください。
IEの場合で説明すると、
1 「これです」の上で右クリックし「対象をファイルに保存」を選ぶ。
2 PCに保存した「kihon.html」をIEで開き上にあるメニューから「表示」→「ソース」を選択。
3 別窓で出てきたメモ帳のファイルをいろいろ書き換えてみる。<>の部分はすべて半角！
4 書き換えたらメモ帳の「ファイル」から「上書き保存」を選択。
5 最後にIEの「更新ボタン」を押す。
これでメモ帳で書き換えた部分がIEに反映されるはずです。あとは3〜5を少しずつ繰り返すのみ！
一度「上書き保存」してしまうとまた書き換えない限り元には戻りませんので注意。
HP作成ソフトを使うとタグを全く知らなくてもワープロソフトで文書をつくる感覚でHTMLファイルを作れます。言い換えればソフトの側で全部タグに置き換えてくれるわけです。代表的なものにホームページビルダーなどがあります（最近これで作ったサイトが多いです）。またWordや一太郎にもHTML作成機能があります。初心者には大変ありがたいものです。ただ限界もあります。余分なタグが増えてしまってファイルが重たくなったり、凝ったHPを作るにはソフトだけでは難しいです。
また作成ソフトを使わずブラウザで文字を入力していくだけでつくれる簡単HPもあります。運営会社が用意した決められたデザイン、決められた枠の中に書き込む方法でその点自由は利きませんが初心者にはいいかもしれません。掲示板に書き込んだものがそのままHPになるという感じです。FTPを使わなくてもいいタイプを用意しているところはこの方法を使えることが多いです(たとえばジオシティーズのファイルマネージャ)。
先ほど説明したタグをテキストでいちから書いていくということです。上級者が凝ったHPを作るとか、ソフトを買うお金がないとか、テキストだけの簡単なページだからソフトなんか使わないといった人はタグをメモ帳などのテキスト編集ソフトで直接書くことになります。作りかけのHTMLファイルをブラウザで開きソースを表示させます。ソースにメモ帳でちょっとずつ書き足しては「上書き保存」し、ブラウザの「更新ボタン」を押して書き足した部分を反映させる。この繰り返しで地道な作業になります。しかし全部メモ帳でなくても、あらかたソフトで作っておいて最後の微調整や凝った仕掛けの部分だけを直接編集するということがよくあります。下の項目で紹介してあるJavascriptやCSS、カウンタの挿入などはHP作成ソフトではやらないほうがよいでしょう。慣れてくるとちょこっとだけ修正したいならソフトを立ち上げる時間を含めると直接メモ帳を使ったほうが早いくらいです。気に入ったページを見つけたらソースを表示させてコピペして保存しておくといいです。あとで自分のページにも活用できるかもしれません。
ほとんどの場合、MIDIという形式のファイルを使っています。最近は著作権がうるさくなり日本音楽著作権協会が管理する曲のMIDIをHPで使うには協会にお金を払わなければならなくなりました。たいして人気もない個人サイトまで取り締まるところまではいってないですが…。抜け穴としてはゲームのBGMはあまり協会で管理していないようです。あとは著作権の切れた昔の曲やオリジナル曲。HPで使えるフリーのMIDIを提供してくれるサイトもたくさんあるので利用するとよいでしょう。下のMIDIはＴＡＭ Ｍｕｓｉｃ Ｆａｃｔｏｒｙよりお借りしました。HPでMIDIを鳴らすにはまずMIDIファイルをサーバにアップロードし、鳴らしたいページにタグを追加します。タグにはIEでしか使えないBGSOUNDタグと動画にも使えるEMBEDタグがあります。個人的にはEMBEDのほうをおすすめします。できれば再生パネルを表示させていつでも音楽を停止できるようにしたほうが親切です。どんなによい音楽でも永遠とかかっていると飽きてくるものです。
一例を示すと
<embed src="tam-y12.mid" width=100 height=30 PANEL="0" REPEAT="FALSE"
AUTOSTART="FALSE">
fontタグでは文字の色、bodyタグでは背景の色、さらにtableタグでは表の中の色も指定できます。先ほどあげた例でいうと
<font size=5 color="#ff000">や<body bgcolor="#ffff00">の部分です。お気づきかと思いますが"#6桁の半角英数字"で色を指定しているわけです。これは16進数で指定する方法です。ではどんな英数字を入れればどんな色になるのかということですが、たとえば三笠ホームページ：色見本のページを見ると実際の色を見ながら確認できます。こういった色見本のサイトが結構ありますので好みに合ったものを探してみてください。もうひとつ直接色の英単語を入力する方法があります。<font size=5 color="red">でも同じように文字が赤くなります。
掲示板はほとんどの場合、カウンタ、チャットなどと同様にCGIというサーバ上で動くプログラムです。そのおかげで投稿した内容がタグに置き換わってすぐに見れるわけです。カキコした内容はCGIが勝手にタグにしてくれるわけですが、なかには投稿の中にあえてタグを使うことが認められているものがあります。文字を大きくしたり、画像を貼り付けたり、スクロールさせたり…といった具合です。使用できるタグはそれぞれの掲示板設定によって異なります。ただしこうした行為はCGIを置いているサーバに負担をかけるのでやりすぎには注意しましょう！こちらのタグをつかって掲示板で楽しもうというページはなかなかよくまとまっていて便利です。多少アレンジを加えてみるのも面白いのでは。
代表的なものをいくつか紹介します。
[1] marqueeタグ
文字や画像をスクロールさせるためのタグです。IEでしか使えません。
もっとも簡単な形は<marquee>左スクロール</marquee>。
タグをつかって掲示板で楽しもうで書かれてあるものは当然普通のHPでもすべて使えます。
[2] CSS
リンクをはってある部分にカーソルあてると色が変わったりスクロールバーの色が変わったり、
いままで使えなかったデザインができたりします。
このページにも
<STYLE type="text/css">
<!--
A{text-decoration : none;}
A:HOVER{color : red;background-color : #f2f4fd;text-decoration : underline overline;}
BODY{font-size : 14px;line-height : 18px;}
BODY{SCROLLBAR-FACE-COLOR: #989898; SCROLLBAR-HIGHLIGHT-COLOR: #444444; SCROLLBAR-SHADOW-COLOR: #444444; SCROLLBAR-ARROW-COLOR: #444444; SCROLLBAR-BASE-COLOR: #444444}
TD{font-size : 14px;line-height : 18px;}
P{font-size : 14px;line-height : 18px;}
DIV{font-size : 14px;line-height : 18px;}
TH{font-size : 14px;line-height : 18px;}
TR{font-size : 14px;line-height : 18px;}
TEXTAREA{font-size : 12px;color : black;border-width : 1px 1px 1px 1px;border-color : black black black black;background-color : #F0F0F0;}
-->
</STYLE>
という形で組み込んでみました。ソース最初の<Head>タグの中です。
[3] アニメーションGIF
gifはjpeg(jpg)と並ぶ静止画像圧縮形式です。jpegは色の数が多くデジカメやスキャナで取り込んだ画像に使われます。gifのほうは使える色は少ないですがファイルサイズが軽くイラストやバナーに向いています。またgif形式の特性としていくつかのgif画像を合わせてアニメーション化して1つのgif画像を作ることができます。gifはUnisisという会社が特許権を取ってしまったため、gif画像（静止画）自体はUnisisに使用料を払っている会社のペイントソフトでなければ作成できません。しかしすでにある
gif画像（静止画）を組み合わせてアニメGIFにすることはフリーソフトでも行うことができます。ですがそれですら規制が厳しくなってきているようです。HPビルダーにはアニメGIF作成機能もついていたはずです。自分で作るのが面倒なら、HP作成ソフトのプレート集を使ったり素材を提供してくれるサイトを探しましょう。Windowsについている「ペイント」はOfficeをインストールすることでgifとjpegで保存することができるようになります。最近はgifに対抗してpngという形式も普及しています。
[4]Javascript
Javaというプログラム言語をHTMLの中で使えるようにしたのがJavascriptです。自分で作るのは大変ですが人様が作ってくれたフリーのJavascriptを自分のHPのソースに埋め込むことはそれほど難しいことではありません。Javascriptでは時刻を表示したり、カーソルを動かすと画像がついてきたり、ボタンを押すと背景色が変わったりといろんな仕掛けに使われます。ソースの中に<Script Language="JavaScript">〜</Script>というタグを埋め込みます。埋め込む場所はそれぞれのスクリプトによって違います。下のページはJavaScript Tips collectionからお借りしたBlack and Witeで少しだけ色を変えて使ってみました。
Black and White
[5] Flash , Shockwave
両方ともマクロメディア社が開発した技術。3Dゲームや映画サイトによく使われます。これらの技術を使ったHPを見るためのPlayerは同社のサイトから無料でDLできますが、最近のブラウザにはすでに組み込まれているものが多いです。Flashは高価なソフトで素人には手がでませんがFlashで作った素材を提供してくれているサイトもあるので、それらを自分のHPで利用できます。ただし重くなるのが欠点です。そのためFlashバージョンとそうでないバージョンの2種類のトップページを用意してあるサイトもあります。何はともあれ体験してみましょう！楽しいですよ！！？
otogai world