ホームページ作成講座 -入門編-第2講

第2講では実際にホームページを作り始めます。読者の皆さんも「メモ帳」を立ち上げて、解説通りに作りながら読み進めていく事をオススメします。第1講をまだお読みでない方は、先に第1講をお読みください。

とりあえず作ってみよう

	じゃあまず「フォルダ」を作ってみよう
	「フォルダ」？何それ？ホームページと関係あるのか？
	ホームページを作るには沢山のファイルが必要になるんだ何でもかんでも「マイドキュメント」等にまとめて入れちゃうとごちゃごちゃになってわからなくなってしまうぞ
	へえ・・・そうなんだ・・・今まで全部「マイドキュメント」に保存しちゃってたぜ

ホームページを作っていくと、ファイルが沢山できるので、非常に分かり辛くなってしまいます。従って、ホームページ用の「フォルダ」を新規作成し、そこに保存していく事をオススメします。

それではフォルダの作り方を説明しましょう。まず、「エクスプローラ」を立ち上げましょう。このリンクをクリックしても開かれない場合は、「スタート」→「すべてのプログラム(P)」→「アクセサリ」→「エクスプローラ」で開きましょう。どこでも良いですが、ここでは「マイドキュメント」というところに「HP」というフォルダを作成します。「マイドキュメント」を開いて、右クリックし「新規作成(W)」→「フォルダ(F)」を選択しましょう。( ) 「新しいフォルダ」という名前のフォルダが追加されるはずです。「新しいフォルダ」という名前の上でゆっくり2回左クリックをして名前を変更できる状態にし、「HP」に変更してください。これでホームページ作成用のフォルダが出来ました。作ったファイルは、このフォルダの中に保存していきましょう。

	よーし！出来たぜ「HP」フォルダ次は何をするんだ？
	じゃあ実際に作ってみようまずは「メモ帳」を立ち上げてくれ
	よし、開いたぜ
	まず、基本中の基本を書いてみよう <html><head><title>テストページ</title></head><body>テストです。</body></html> と書いてごらん
	面倒だからコピペしようっと
	おいおいそれじゃあ上達しないぜちゃんと自分の手でキーボードを叩く事で覚えるんだから
	そうなのか・・・わかった

実際にHTMLを書いてみましょう。「メモ帳」を立ち上げてください。「スタート」→「すべてのプログラム(P)」→「アクセサリ」→「メモ帳」で開けます。立ち上げたら、まず下の文章を書いてください。

<html><head><title>テストページ</title></head><body>テストです。</body></html>

信じられないかもしれませんが、これだけでもう立派な「HTML文書」です。

	よし一生懸命書いたぜホラ見てくれよ
	やったなサトシ！凄いぞ！！・・・ってこれくらいで喜んでいてはダメだ次はこれを保存するんだ
	保存・・・？保存ってゲームとかにあるセーブみたいなもの？
	そうだなセーブのことだ
	それじゃあまだこのままじゃセーブされていないって事かどうやってセーブするの？
	簡単なんだえーと・・・

では、保存してみましょう。「ファイル(F)」→「名前を付けて保存(A)」で、保存ができます。保存する場所は先ほど作った「HP」フォルダにしましょう。「ファイル名(N)」は何でも構いませんが、とりあえずこの講座では「test.htm」とすることにします(「」は要りません)。「ファイルの種類(T)」や「文字コード(E)」はそのままで問題ありません。「保存(S)」をクリックすれば、保存完了です。( )

「エクスプローラ」で「HP」フォルダを開き、今作った「test.htm」がある事を確認しましょう。「test.htm」をブラウザで開きます。ブラウザとは、今このページを見るのに使っているソフトウェア(「InternetExplorer」等)の事です。通常は、拡張子が「htm」「html」のものは自動的にブラウザで開かれますので、普通にダブルクリックで開いて問題ありません。ブラウザで開かれないという方は「test.htm」の上で右クリックし「プロパティ(R)」を選択し、「プログラム」の「変更(C)」ボタンをクリックしてブラウザを選びましょう。開いたら、「テストです。」と表示されている事を確認してください。

	よし！保存できたぜ！
	それじゃあ今作ったファイルを見てみよう「エクスプローラ」で「HP」フォルダを開いてごらん
	うん―――――― あ！今作った「test.htm」がある！
	成功だなそれをダブルクリックして開いてごらん
	うぉぉぉぉぉぉぉぉ！！！！すご！！！！！！！・・・って、「テストです。」って表示されるだけじゃん！！
	そりゃそうだ
	これだったら HTMLで書かなくてもいいんじゃないの？
	でもほら「タイトルバー」に「テストページ」って表示されてるだろ
	あホントだ
	<title>～</title> を <head> と </head> の間に書くとタイトルとして扱われるんだ <body> と </body> の間には本文を書くんだ
	へえ・・・でもこれだけ？
	まあ今回は練習だ
	ちぇ・・・無理して損したぜ
	おいおい・・・これからたくさん HTMLで書かないと出来ない事を教えるから期待して待て！