せんせい

はじめてホームページを作る人向け。1時間で→のようなホームページが出来上がる。これを作って、後から改造していけば自分だけのホームページが出来るとうわけ。

ここで会ったが100年目、損はさせないから騙されたと思って1時間で作ってみてくれ。


1時間で出来る

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

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

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

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

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

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

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

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

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

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

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

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

HTMLを入力しよう

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

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

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

タグは全部半角英数字で入力すること。
<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> : 改行する。



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

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


壁紙入れよう!


初心者

せんせい、できました〜。でも文字が出てるだけですよ。もうちょっとカッコよくなりませんか?

せんせい

いいじゃん、これで。

よくありません!はずかしくて、誰にも見せれないじゃないですか!

せんせい

壁紙とウェルカム画像も入れとくか。

←の壁紙の上で右クリックしてから名前をつけて画像を保存を選択。保存のウィンドウが出てくるので先に作っておいた「img」フォルダの中に保存すること。はファイル名は「back.gif」。他の壁紙はこちら


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

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

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

</body>
</html>

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

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

welcome

←の画像の上で右クリック→名前をつけて画像を保存 を選択します。保存のウィンドウが出てくるので先に作っておいた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>

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

初心者

おー、すごい!ホームページっぽいですね!

せんせい

うむ、壁紙とウェルカム画像を入れただけだがな。

いいじゃないですか!人が喜んでるのに!

せんせい

次いくぞ。