HPを作ってみよう!

1必要な道具をそろえよう!
2本体を作ってみよう!
3中身を書いてみよう!
4画像を出してみよう!
5他のページに移ろう!

1必要な道具をそろえよう!

 まず、必要な物を集めましょう。
 絶対に必要な物は、エディタとFTPソフトです。
 エディタはHP作成支援機能があった方が楽でしょう。

・エディタ
 まずエディタですが、なんでも構いません。
 文字さえ書けて、保存が出きれば…ですけど。
 例としては「メモ帳」「ワードパット」「秀丸」「ワード」「一太郎」なんかが上げられると思います。
 私が使っているのは「WebEditor」と言うHP作成支援機能付きものですが…
 ここに来ている以上、基本的な使い方は解っているものとします。
 詳しい使い方は後で説明します。

・FTPソフト
 保存したファイルをサーバ上にアップロードしたりする為の物です。
 厳密に言うと、無くてもなんとかなりますがFTPの知識が必要になります。
 どうせだから楽しましょう?
 有名なソフトに「FFFTP」と言うものがあります。
 …実際にヘルプを見た方が速いので、ダウンロードしてヘルプファイルを見てください。
 こちらも、後で説明します。

 トップに戻る


2本体を作ってみよう!

 さて、次はHPを作る際に必要な最初の決まり文句を書きます。
 エディタを開き「タグ」と言われる物を書きこんでいきます。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>簡単なHPの作り方
</BODY>
</HTML>
 まず、上記のように書きこんで、お好きな名前と拡張子「.html」保存してください。
 (メモ帳の場合は、拡張子の指定を「すべてのファイル」にして下さい)
 ここでは仮に「index.html」とします。
 ここで保存したindex.htmlを開けば「簡単なHPの作り方」と表示されるはずです。
 表示されれば成功です、一旦エディタを閉じて次の段階に進みましょう。
 「HTML」の中に「HEAD」と「BODY」がある事、「HEAD」の中に「TITLE」ある事が解りますか?
 タグはこの様に入れ子方式で使用します。
 (HP作成支援機能付きエディタでは、タグがある事が多いのでいれる事は無いかもしれません)
 それぞれのタグの説明は後ほどします。

 トップに戻る


3中身を書いてみよう!

 それでは閉じてしまったhtmlファイルを開いてみましょう。
 メモ帳を開いて、htmlファイルをドラッグ&ドロップでも開きますよ。
 (メモ帳などで普通にhtmlファイルを開こうとすると見つからない場合があります。
 その場合は、保存した時と同じように「すべてのファイル」にすると見つかります)
 開けたでしょうか?開けたら内容を次の様に変えてみましょう。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>簡単なHPの作り方
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>始めてみよう!</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
簡単なHPの作り方<BR>
テキスト文を書いてみよう!<BR>
</BODY>
</HTML>
 さて、実行してみましょう。
 上手く実行できれば背景が黒く、文字が白くなっているはずです。
 それと、ブラウザのウィンドウタイトルが「始めてみよう!」に変わっているはずです。

 ここまでに使ったタグの説明です。
<HTML> htmlファイルを構成する為のタグです
<HEAD> ヘッダーです、あまり気にする必要はありません
<TITLE> ウィンドウ上に表示されるタイトルです
<BODY> 本文を書くところです
このタグでフォントの色、背景の設定が可能です
BGCOLORで背景色を
TEXTで文章を
LINK、VLINKでリンクの色、読みこみ済みリンクの色をそれぞれ設定します
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" >
といった風に表記します。色の指定はRGBの順で十六進数で二桁づつ書きます
<BR> 強制改行です、どんな事があっても改行します

 トップに戻る


4画像を出してみよう!

 ここまで来ると、テキストだけのサイトは作れると思います。
 それだけでも楽しいサイトは作れると思いますが、せっかくだから画像を表示したいと思います。
 用意するのは画像ファイル、拡張子が.jpgもしくは.gifなんかが良いと思います。
 もっとも、.bpmや.pngなども使えますが軽さを考えると上記の二つが良いと思います。
 ここで、「ビットマップしかないよ?」と言う場合は変換する為のソフトがあるので安心してください。
 「Rodin」と言うソフトが変換と一緒にサイズ変更も出来るので良いと思います。
 さて適当な画像を用意してください。ここでは仮に「grhpic.jpg」とします。
 そのファイルを、HTMLファイルとフォルダにいれてください。
 それでは、先ほどのHTMLファイルに<IMG SRC "grhpic.jpg">と入力してください。
 これで画像が表示されるはずです。
 しかし、画像ファイルとHTMLファイルを別々に保存したい事もあると思います。
C: /WINDOWS /HTML
grhpic.jpg index.html
 仮にこのようなフォルダ構造だとします。
 その場合のタグ表記は<IMG SRC "./grhpic.jpg">となります。(./で一つ上のフォルダを参照します)
C: /WINDOWS /HTML /JPEG
index.html grhpic.jpg
 逆にこのように下のフォルダにある場合は、<IMG SRC "jpeg/grhpic.jpg">となります
 ここから下は、今まで使っていないけれどホームページを見やすくするために使うタグです
<CENTER> このタグで囲んである物をブラウザ中央に表示します
<DIV> 実際は<DIV ALIGN="XXX">(XXXの中はleft,center,rightどれか)と書きます
それぞれ、左そろえ、中そろえ、右そろえとなっています
<HR> 水平線を引きます
<FONT> 実際は<font size="A" color="#XXYYZZ">と書きます。
Aの中身は1から7もしくは+か-でも大丈夫です
XXYYZZで色を決めます。中身はXXで赤、YYで緑、ZZで青を十六進数で指定します
タグの中の文字を指定した形で表示します
(<BODY>の追加) BACKGROUND="(画像ファイル)"と言うパラメータを加えると、
背景一面その画像になります
トップに戻る

5他のページに移ろう!