1時間でHTMLを使ってホームページを作ろう！

拡張子を見えるようにする

WINDOWS XPの場合：
スタート → マイコンピュータを開く。

WINDOWS 98/2000の場合：
デスクトップからマイコンピュータを開く。

上部メニューからツール → フォルダオプション → 表示を選択。詳細設定で「登録されているファイルの拡張子は表示しない」のチェックをはずす。

このチェックを外さないと拡張子が見えないので注意。拡張子とは、ファイル名の後にくる「.txt」や「.html」のこと。WINDOWSは、拡張子を見て何のファイルか識別している。

フォルダとファイルを用意する。

まずデスクトップにフォルダを新しく作る。フォルダの作り方はデスクトップの何も無いところで「右クリック→新規作成→フォルダ」で作る。名前はわかりやすいように「hp」と名前をつけとこう。

※ファイル名は何でもいいけど全角文字（日本語とかＡＢＣとか）ではなく半角英数字を小文字で（abc123）でつけること。サーバ側にアップした時にトラブルになるので注意。

次に作ったフォルダの中に「img」という名前のフォルダを作る。画像は整理しやすいように、全部ここに入れるようにする。

「hp」フォルダの中で右クリック→新規作成→テキストドキュメント(テキスト文章)を選ぶ。新しく作ったファイルは「新規テキストドキュメント」という名前になっているので「index.html」に変更。名前の変更は「右クリック→名前の変更」で出来るぞ。

＊「index.html」は最初に表示させたいページに必ずつけるようにすること。フォルダの中でindex.htmlという名前がついているページが最初に表示されるぞ。

HTMLを入力しよう

次にスタート→プログラム→アクセサリ→メモ帳を開き、さっき作ったindex.htmlをドラッグ＆ドロップしてみる。中身はまだ何もない白紙の状態。

↓のようにメモ帳に打ち込んでみる。

<>で囲まれた部分をタグと呼ぶ。

タグは全部半角英数字で入力すること。
<html>○半角　＜ｈｔｍｌ＞×全角

<html>
<head>
<title>私のページ</title>
</head>
<body>

初めてホームページを作ってみた。
<br>

</body>
</html>

HTML タグメモ	ここで使った<br>以外のタグは、ページ作成に必ず必要です。 <html> </html>　：　「HTMLですよ」という宣言。 <head> </head> ：　ホームページの情報を間に埋め込む。 <title> </title>　：　ページのタイトル。ブラウザの上に表示される。 <body> </body> ：　この間にホームページ内容を書く。 <p> </p>: 段落。文章ですと、意味付ける。 <br>　：　改行する。

HTML
タグメモ

ここで使った<br>以外のタグは、ページ作成に必ず必要です。
<html> </html>　：　「HTMLですよ」という宣言。
<head> </head> ：　ホームページの情報を間に埋め込む。
<title> </title>　：　ページのタイトル。ブラウザの上に表示される。
<body> </body> ：　この間にホームページ内容を書く。
<p> </p>: 段落。文章ですと、意味付ける。
<br>　：　改行する。

打ち終わったらファイル上書き保存しよう。これで記念すべき、1ページが出来たわけだ。さっそくindex.htmlをクリック（ダブルクリック）してみよう。さっき打ちこんだ文字がホームページとしてブラウザーに表示されてれば大成功。

※ブラウザーとは閲覧するための道具。つまりホームページを見るソフトのことだ。ほとんどの人はIE（インターネットエクスプローラー：左上にeのマークがある画面）でホームページを見ているはず。

壁紙入れよう！

	せんせい、できました～。でも文字が出てるだけですよ。もうちょっとカッコよくなりませんか？
	いいじゃん、これで。
	よくありません！はずかしくて、誰にも見せれないじゃないですか！
	壁紙とウェルカム画像も入れとくか。
	←の壁紙の上で右クリックしてから名前をつけて画像を保存を選択。保存のウィンドウが出てくるので先に作っておいた「img」フォルダの中に保存すること。はファイル名は「back.gif」。他の壁紙はこちら。

もう一度メモ帳に「index.html」をドロップして↓の赤文字部分を追加してみよう。

<html>
<head>
<title>私のページ</title>
</head>
<body background="img/back.gif">

初めてホームページを作ってみた。
<br>

</body>
</html>

画像が上手く表示できない人はこちら

ウェルカム画像を入れよう！

←の画像の上で右クリック→名前をつけて画像を保存を選択します。保存のウィンドウが出てくるので先に作っておいたimgフォルダの中に保存します。必ずimgフォルダの中に保存してください。ファイル名は「welcome.gif」です。

<html>
<head>
<title>私のページ</title>
</head>
<body background="img/back.gif">

<img src="img/welcome.gif"
 width="210" height="88" alt="welcome">
<br><br>

初めてホームページを作ってみた。<br>

</body>
</html>

入力したら保存して、また開いて確認しよう。
画像が上手く表示できない人はこちら

	おー、すごい！ホームページっぽいですね！
	うむ、壁紙とウェルカム画像を入れただけだがな。
	いいじゃないですか！人が喜んでるのに！
	次いくぞ。

1時間で作る2へ