無題ドキュメント


●テンプレート（ひな型）を使って　「HTML」に挑戦！　●ブラウザで表示の確認　 ●こんな事もできる！

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<body>
ノリコのホームページへようこそ！！ 
 
 
はじめまして！ノリコです。 
 
名前：ノリコ 
年齢：ヒ・ミ・ツ！ 
性別：女の子で～す 
住んでいる所：東京 
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。 
 
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！何もわからなかったけど、頑張って作りました～！ 
</body>
</html>

	さあいよいよホームページを作るよ！
	わ～い！わくわく。
	上のHTMLを見てみて。このテンプレートを使ってホームページを作るよ。今まで見たことないタグがあるよね。
	うん。<br>ってなに？
	もちろんそれぞれ意味はあるんだよ。でもそれはあとでゆっくり説明するとして、まずは内容を書き換えてみよう。
	はーい。

★Windowsをお使いの方はまず、以下の手順を行ってください。
「マイコンピュータ」をダブルクリックして開き、「表示(V）」をクリックして、さらに「オプション(O)」（または「フォルダオプション(O)」）をクリックします。すると、ウィンドウが開くので、「表示」というタブをクリックします。すると、「登録されているファイルの拡張子は表示しない(E)」と言う項目があるのでその横の四角（チェックボックス）のチェックがはずれるまでクリックして下さい。チェックがはずれた状態で「適用(A)」をクリックして、「OK」を押します。

まず、上のタグの<html>から</html>を全て選択してコピーします（編集メニューから「コピー」を選びます）。Windowsの方は「メモ帳」、Macの方は「Simple Text」などのソフトを開き、貼りつけます（Windowsでは編集メニューから「貼り付け」、Macは編集メニューから「ペースト」を選びます）。さあ、それではあなたの好きなように内容を変えてみましょう。（黒字の部分を変更します）

では、「ノリコ」とある部分をあなたの名前に変えてみましょう。次に、名前や年齢、性別などをあなたに合わせて変えてみましょう。そして「みなさんはじめまして～」の文章を、自分の好きな自己紹介文にに変えてみましょう。

そして「ファイル」メニューから「保存」(または「名前を付けて保存」を選びます。その際新しく「homepage」という名前のフォルダを作ってください(デスクトップに作ると覚えやすいでしょう)。作成したファイルはその中に保存しますが、ファイル名を必ず「index.html」にします。もしフォーマットを選ぶようになっていたら、「テキスト形式」「テキストのみ」または「HTML形式」を選んでください。

	保存できたかな？
	うんできたよ。
	ちゃんと「index.html」のindexとhtmlの間に「.（ピリオド）」は入ってる？
	入ってるよ。なんで？そんなに大切なの？
	そうだよ。ピリオド以降の「.html」の部分は「拡張子(かくちょうし)」と言って、とっても大事な意味があるんだよ。「.html」は「HTMLファイルです」と言う意味があるし、さっきのタグの中にあった「girl.gif」の「.gif」は「gif形式の画像ファイルですよ」って言う意味があるから、必ず名前の最後に決まった拡張子をつけることになってるんだよ。まあ、「gif」に関してはあとでゆっくり説明するから、「大事」ってことだけ覚えておいてね。
	うん。

	どんなページになったかブラウザで確認してみよう。ブラウザは立ち上がってるよね。（いまこれ見てるもんね）
	うん。立ち上がってるよ。
	じゃあ、上の「ファイル」メニューから「開く」を選んで、自分がさっき保存した「index.html」を捜して開いてみよう。
	えーと・・、「homepage」フォルダの中の、「index.html」・・はい、開いたよ！
	うまく表示できたかな？
	わぁ！私のページができた！

（上のタグを表示させると・・・↓クリックしてみよう）

	じゃあ、簡単にタグの勉強をしてみよう。これでいろいろアレンジができるよ。
	はーい！

改行します。（HTML上での改行は無視されます） 
改行します。（段落に分ける時に使います。）
文字をボールド（太字）にします。 
文字をイタリック（斜体）にします。 
<center>中揃え（中央揃え）にします。（文字以外にも有効です） </center> 
文字の大きさを変えます。サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6
サイズ7

上のタグを見てみて。これらにはさっき説明したように、ちゃんと意味があるんだよ。これをブラウザで表示すると、こうなるよ。
　
　

改行します。（HTML上での改行は無視されます）
改行します。（段落に分ける時に使います。）

文字をボールド（太字）にします。
文字をイタリック（斜体）にします。

中揃え（中央揃え）にします。（文字以外にも有効です）
文字の大きさを変えます。サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6
サイズ7

	わ！ほんとだ！変化が出てる！わかりやすいね。
	このタグをさっきの自己紹介のページにアレンジしてみよう。でもちょっとここでもルールがあるよ。

★タグを書くときのルール

●外側から規則正しく囲まれるようにタグを書き入れましょう。
「はじめまして！ノリコです。」では、タグの間にタグが入っているのがわかります。順序をめちゃくちゃにしないように気をつけましょう。

●大文字、小文字の区別をはっきりと！
そして、大文字、小文字は別々に認識されますから、なるべく小文字で記入、保存時にファイル名をつけるときも小文字でつけるように気をつけましょう。小文字でファイル名をつけたのに、大文字でタグを書いても正しく認識されません。

★それでは、自由にタグを書き入れて、変化をつけてみましょう。

できたよ～。ほら。
　
　

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<body>
<center>
ノリコのホームページへようこそ！！ 
 
 
はじめまして！ノリコです。 
 
名前：ノリコ 
年齢：ヒ・ミ・ツ！ 
性別：女の子で～す 
住んでいる所：東京 
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。 
 
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！何もわからなかったけど、頑張って作りました～！ 
</center>
</body>
</html>

できた？じゃあ変更したら、さっきの要領で保存して、ブラウザで確認してみよう。
　
　

（上のタグを表示させると・・・↓クリックしてみよう）