How to make the Homepage

このページではホームページ(＝HP)の作り方を非常に簡単に説明しようと思います。
ひっじょーに簡単なので複雑なことは出来ません。（StylesheetとかJavaScriptとかわかんない(大爆)

もっと複雑なことをしたい場合は
１．HP作製関係の本を読む。
２．他の人に聞くor他のHP作製方法を紹介しているページをみる。
３．HP作製ソフト(所謂HPビルダー)等を使用する。などしてください(^^;

それからもう一つ。このページはWindowsマシンでのホームページ作成法を紹介しています。
mac､UNIXや他のOSでの作成法は僕にはわかりません。あしからず

要するに、僕がこのページ作るのに使った方法を紹介しようというコンテンツです(笑)
あと、内容が適当だったり間違ってたりするのは大目に見ておいてください。一部分かりやすくする為に嘘っぽいこと書いてたりもするし(大爆)
あくまで初心者むけのページですから(^^;;

１．必要なもの
 ２．ページを作る＜その１＞～まずは作ってみよう
３．ページを作る＜その２＞～タグを使ってみよう
４．ページを一般に公開する＜その１＞～webスペースを確保しよう
５．ページを一般に公開する＜その２＞～アップロードしよう

１．必要なもの

ⅰ）インターネットに繋げるパソコン(＝PC)（Windowsマシンね(^_^;
ⅱ）作製する気力、ページのネタなど

以上です。これだけあればOK！　タダでできちゃいます☆

とまぁこれだけではちょっとさみしい(と言うか他の説明の負担が重くなる)ので、もう少し必要なものを。
でも、下に書くものはもしなかったとしても､ネットに繋がったPCがあればすぐに手に入れられるものばかりです♪

a）メモ帳
Windowsマシンに最初からついてる基本的な文章作製アプリケーション。

b）FTPソフト
作ったページを一般公開するのに(大抵)必要です。何を使ってもいいのですが僕は自分のPCに最初から入っていた FFFTPというソフトを使っています。
説明もこのソフトを使った場合についてします。（というか他のはできない
多分使いやすいと思うのでインストールしたい方はどうぞ→☆DownLord☆

c）webスペース
作ったページを置かせてもらう場所のことです。
作ったページは普通は自分のPCに保存したままでは他の人から見れません(見れたらハッキングだって(笑)
ということで、他の人からも見れる場所に作ったページのデータを置かなくては一般公開にならないのです。
そのスペースはレンタルしてくれる会社がたくさんあるので心配することはありません。
レンタルといっても色々で、その名のとおりお金で貸し出しているところもあるし、ページに広告がついてくる(貸し出し料はタダ､会社はその広告料で運営)といった所もあります。
また､レンタルでなくてもインターネットのプロバイダーが契約者にスペースを無料貸し出ししているケースも多いです。
レンタルの方法はレンタルしている会社のHPにいけば分かると思います。
主な会社にyahoo、infoseek、COOL ONLINEなどがあります。｢ウェブスペース｣などで検索すればもっと色々出てくるでしょう。

とりあえずこれだけあればOKです。他にもHPを充実させるために掲示板、カウンター、素材などがあるとベターですが、これは後から紹介しましょう。

２．ページを作る＜その１＞

まずは作ってみよう

ⅰ）まず、メモ帳を開きましょう。
スタートボタンを押してカーソルをプログラム→アクセサリに合わせればメモ帳と出てくると思います。
それをクリックでメモ帳が開けると思います。

ⅱ）次にメモ帳に以下の様に(<html>から</html>まで)書きましょう。
ただし、斜体の部分は半角で書くこと。コピー&ペーストが安全かも

<html>
<head>
<title>
ここにページのタイトルを書きましょう。
半角英数で書くのが好ましいです。
</title>
</head>
<body>
ここにページの本文を書きましょう。
改行する時は<br>と書かないと改行されませんので注意しましょう。
横線を入れたいときは入れたいところに<hr>と打ちます。
半角スペースはたくさん打っても１マス分しかスペースが空きませんのでこれも注意。
文章中に半角の<　>　&は極力使用しないようにしましょう。
これは上で書いた改行などの専用のコマンド（タグ）と間違って認識されてしまい、上手く表示されなかったりするためです。
どうしても表示したい時は例えば<なら<と打つと表示は<となります。こういった特殊フォントの対応一覧はこちらなどにあります。
文字の色や大きさを変えたり､リンクを張ったりするのはページを作る＜その２＞で紹介します。
</body>
</html>

ⅲ）適当な場所に保存します。
場所は適当でいいのですが、専用のフォルダを作ってまとめておくと分かりやすいと思います。
保存する時には半角英数の名前にしましょう。
それから重要なのが保存する際、名前の最後に半角で「.html」(ドット[　.←これ]を忘れずに！)と付け足して保存することです。
これにより、ただの文章のファイルではなくウェブページとして作られたファイルなんだと(正確にはhtmlで書かれた文章)PCが認識してくれるのです。(こういったファイル名の最後の｢.×××｣を拡張子と言います。
拡張子は普通に見るときは見えないように設定されていることが多いです。
保存したけど.htmlって出ないで不安な時はファイルのプロパティを見てみましょう。
HTML Documentとかって出ればOKです。TXT ファイルとかってでちゃったら失敗しているかもです(~_~;)
ここでうっかりそのまま保存しちゃったらアジャパーです(謎)　名前をつけて保存でもして名前を付け直してください。(^_^;)
勿論、表示されているのでしたら[.txt]とかなっている拡張子の部分を書き直してもOKです。
ちなみに拡張子を表示するように設定するには、Windows2000の場合
マイコンピュータ　→　コントロールパネル　→　フォルダオプション　→　[表示]のタブ　→　[登録されているファイルの拡張子は表示しない]のチェックを外して[ＯＫ]
で表示されるようになると思います。うっかり拡張子を変えてしまうとファイルが上手く読めなくなってしまったりするので拡張子を表示しているときは、ファイルの名前を変更するときには気をつけてください。

３．ページを作る＜その２＞

タグを使ってみよう

ページを作る＜１＞でとりあえずページが出来たかと思います。
ここではタグ(<×××>ってやつ)の簡単な説明と､文字の変え方、画像の貼り方、リンクの貼り方を説明したいと思います。
タグとはなんぞや？は面倒臭かったら読み飛ばしちゃっても多分ページは作製できると思います。

ⅰ）タグとはなんぞや？
そもそもHPはhtmlという言語で書かれたデータをInternetExplorer(＝IE)､NetscapeNavigator(＝ネスケ)等のブラウザと呼ばれるアプリケーションが解読して、普段見るようなページとして見せてくれます。ごめん日本語変(^_^;)
要するに

「htmlのデータ」←─(ブラウザと呼ばれるソフト)─→「普段見てるページ」
ってことって書けば分かりやすいかな？
一言で説明するならブラウザとはラプラス逆変換のようなことをしてくれるソフト(核爆)ジョークですよ｡｡わかんない人は気にしないでください(^^;
で、＜１＞でやったのは「htmlのデータ」をそのままメモ帳に書き付けてるという作業(改行を<br>って書いたりしたのはそのため)と、これはhtmlのデータなんだよってラベルをつけた(最後に.htmlって書いた)ということなのです。
タグとhtmlは微妙に定義が違うけど、大体同じの物をさすと思っておけばOKです。(僕もよくわかってない(大爆)

ⅱ）タグを使うにあたって。。
タグは大まかに分けて２種類あります。
１つは<strong>×××</strong>のように間に文字を挟んで使うもの
もう一つは<br>等のように単独で１つの効果を示すものです。
挟んで使うものは見てわかるように<タグ>～～～</タグ>とすれば､～～～の所にタグの効果が現れます。
セットで使うタグは範囲の閉じ忘れに注意です。おしまいを示す方のタグは < の後に / が入ります。
ここで重要なこと。
タグは必ず半角で書きます。全角だとタグと見なされません。スペースも半角です。
これ間違えてるとどうにもならなくなっちゃいます。
そのかわり、大文字小文字はどっちでもOKです。混ざっていても問題ありません。

ⅲ）タグを使ってみよう。
よく使うタグには以下のようなものがあります。ただし、これらのタグはページの本文(<body>と</body>で挟まれた部分)でだけ使えます。(titleとかには駄目です
 フォントタグ
リンクタグ
メールを出すタグ
画像を貼り付けるタグ

フォントタグ
このタグを使うと文字の色や大きさを変えられます。
<font size="5" color="red">大きな赤</font>→→→大きく赤
と言った感じです。
sizeは標準が3で、数字が大きいと文字も大きくなります｡
+1や-2等の符号付数字を入れることもでき、これは元の大きさより１大きく､２小さくを示します。
色は英語の色で書くかカラーコードを使います。
カラーコードは「#000000～#ffffff」で書き､左から2桁ずつ赤､青､緑(RGB)の光の強さを16進数(0,1,2,･･･9,a,b,･･･f)で表しています。
例えばcolor="#ffffff"であれば文字は白く(全部の色の光が強く光る)､color="#ff0000"であれば文字は赤くなります(赤の光だけ強く光る)。
カラーコードで検索すれば表が出てくると思います。こことか･･･

その他文字修飾タグ
<big>１大きく</big> → １大きく
<small>１小さく</small> → １小さく
<i>斜体</i> → 斜体
<b>太字</b> → 太字
<u>下線</u> → 下線
<s>抹消線</s> → ~~抹消線~~
<strong>強調(太字)</strong> → 強調(太字)

<div align="center">文字をページの真ん中に</div> →

文字をページの真ん中に

<div align="left">文字をページの左側に</div> →

文字をページの左側に

<div align="right">文字をページの右側に</div> →

文字をページの右側に

リンクをはるタグ
<a href="http://www.google.co.jp" title="ぐーぐる" target="_self">グーグル</a> → グーグル
title="ぐーぐる"はなくてもOKです。あるとカーソルを合わせたときに[ぐーぐる]と表示されます。
もし､新しくブラウザを開いて、違うウィンドウでページを表示したい時はtarget="_self"をtarget="_blank"と書きます。こんな感じ
target="_self"は書いても書かなくても同じブラウザでページが出てきます。
ここで重要なのはアドレスは最後まで(拡張子まで)、大文字小文字など正確に書くということです。間違っているとページが見つかりません。

自分のページの他のページに飛ぶ場合はURLの代わりにファイルの名前を書くこともできます。（相対パス）
相対パスを使うとUpdateしていなくても、あるいはインターネットに接続していなくても自分のPCの中にデータがあるのならばページに飛ぶことができます。これは相対パスの書かれたファイルからどのように移動すれば目的のファイルにいけるか(つまり相対的な位置関係)を書くからです。そのため、飛びたい先のページ(pageA.html)とリンクのタグを貼り付けたいページ(pageB.html)との位置関係によって書き方が変わってきます。
逆にURLをそのまま書くのは目的地をダイレクトに書くことになるので、その目的地がインターネットに繋がっていないといけない所にあれば、当然インターネットに接続しなければ目的のファイルが開けないのです。
ん～わかりにくいですね。まぁ実際に使ってみればなんとなく感覚がつかめてくると思います。

pageA.htmlがpageB.htmlと同じフォルダ(ディレクトリ、階層)にあるとき
<a href="./pageA.html">pageAへとびます</a>と書きます。
「./」が自分と同じフォルダにあるファイルで「pageA.html」を探せ、と言うことを示しているのです。

pageA.htmlがpageB.htmlの１つ外側のフォルダ(１つ上のディレクトリ､階層)にある時
<a href="../pageA.html">pageAへとびます</a>と書きます。
「../」が１つ外側のフォルダから「pageA.html」を探せ、と言うことを示しているのです。
２つ外側なら「../../」３つ外側なら「../../../」となります。

pageA.htmlがpageB.htmlと同じフォルダの中にある別のフォルダ(pageAetc)の中(１つ下のディレクトリ､階層)にある時
<a href="./pageAetc/pageA.html">pageAへとびます</a>と書きます。
「./pageAetc」がpageAetcに行け､「/」で更にその中へ入って「pageA.html」を探せ、と言うことを示しているのです。(だと思う(^_^;)
２つ下の階層なら./ファイル名１/ファイル名２/pageA.htmlでOK、
また、1つ外側のフォルダにある別のフォルダ(part2)の中に「pageA.html」があったなら
../part2/pageA.htmlと書けばOKなのです。

メールのリンク
<a href="meilto:あなたのメールアドレス">メールください</a>でOK！
でも最近は自動でアドレスを見つけて迷惑メールこと広告メールを送るようなマシンもあったりするので、そのままアドレスを書くことはあまりおすすめできません。よくやる方法に@を＠となどかいておいて、直してくださいなどと注意書きをいれたりします

 画像を貼り付けるタグ
<img src="貼りたい画像のアドレス">で貼れます。
張りたい画像のアドレスはURLでもいいですし、リンクの時のように相対パスを書いてもOKです。
前者でしたら
<img src="../../../../../www.geocities.co.jpCollegeLife-Library/7400/image/new.jpg">→→→

後者ならば
<img src="../image/new.jpg">→→→

ここで.jpgというのはJPEG形式の画像ファイルであることを示す拡張子です。リンクの時もそうですがアドレスには拡張子まで正確に書きましょう。折角貼り付けようとしてもアドレスが間違っていては表示されません。

また、応用としてこんなこともできます。
<a href="../history.html"><IMG SRC="../image/new.jpg"></a>→→→

４．ページを一般に公開する＜その１＞

webスペースを確保しよう

まだ書いていません。

５．ページを一般に公開する＜その２＞