無題ドキュメント


●アイデア作り～どんなページにする？　●テキストを用意しよう　 ●HTMLに直してみよう

	ノリコちゃん、自己紹介とは言っても、どんな内容にするか決めた？
	それが、まだあんまり決まってないんだよなぁ。
	じゃあ、いらない紙とえんぴつを持ってきてみて。
	はい。持ってきたよ～。
	そこにどんな内容にしたいか書いてみよう。どんなコーナーを作るか、何ページの構成にするか、どんなイラストや写真を載せるか、レイアウトはどうするか・・・・。

手元にある紙に自分が思い描いているホームページをスケッチしてみましょう。実際にHTMLでレイアウトする際に、とてもわかりやすくなります。ノリコちゃんが描いたスケッチを参考にして、いろいろ思い描いてみましょう。どんなことを書こうか、どんなイラスト・写真を使おうか、伝えたいことを考え、大まかな項目を書き出します。その項目は、そのまま「見出し」にすると良いでしょう。そしてタイトルの色や位置、全体の文字や画像の配置など、レイアウトを描いてみましょう。

	う～ん・・・・、こんな感じになったよ。
	OK！じゃあ、これに添って、次は文章を考えよう。

	ホームページにはある程度情報（文章）があると面白いよね。さっき考えたスケッチにしたがって、文章を書いてみよう。
	作文、苦手なんだよなぁ～・・・。
	大丈夫。思いのままを書けばいいんだよ。そうだ、日記なんかどう？
	うん、多分三日坊主だけど・・・、書いてみるか！
	あとでレイアウトしやすいように、「メモ帳」や「Simple Text」などのエディタ(ワープロ)ソフトに打ち込んで書き出してみよう。そうすると、あとでHTMLを書くときにコピー＆ペーストするだけで簡単にレイアウトできちゃうからね。ソフトの使い方、保存のしかたは「5.いよいよ作ってみよう」で説明したとおりだよ。

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

（もくじ）
トップページ
ノリコの日記
ペットの紹介
メール待ってます

（日記）
○月○日（月曜日）
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっぱい生まれるんだろうな。
○月○日（火曜日）
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。
○月○日（水曜日）
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？病院に行って注射した。痛かった～！でもおかげで今は熱も下がって、ご飯もいっぱい食べれたよ。

（ペットの紹介）
これがうちのゴン太です。
太りぎみだけど、かわいいやつです。
今年で6才。
彼女募集中。
兄弟は親戚のうちにいます。
これでも長男だぞ！

	うーん、こんなんでいいかな？
	上出来上出来！

	パソくん、まだ習ってない事をやってみたいと思ってるんだけど・・。
	な～に？
	スケッチにも書いてあるように、メールを送れるようにしたり、アンケートを取ったり。あ、あと4ページに分けて、リンクさせたり・・・・。
	ノリコちゃんもいろいろ興味が出てきたみたいだね。もちろん、教えてあげるよ！でも基本はさっき教えた簡単なHTMLだから、まず、この文章をHTMLに直してレイアウトしてみようか。
	うん！頑張るぞ～！

HTMLの基本は覚えていますか？

<html>
<head>
<title>タイトル</title>
</head>
<body> 本文が入ります。</body>
</html>

でしたね。
この「本文」の部分に、さっき覚えた要領で、タグを書き入れてみましょう。ただ文章を入れておくだけでももちろん表示はされますが、 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>
 
 
ノリコのホームページへようこそ！！ 
 
 
はじめまして！ノリコです。 
 
名前：ノリコ 
年齢：ヒ・ミ・ツ！ 
性別：女の子で～す 
住んでいる所：東京 
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。 
 
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！ 
何もわからなかったけど、頑張って作りました。ごゆっくりどうぞ！ 
 
 
★もくじ★ 
トップページ 
ノリコの日記 
ペットの紹介 
メール待ってます 
 
 
★日記★ 
○月○日（月曜日） 
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。 
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっぱい生まれるんだろうな。 
 
○月○日（火曜日） 
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。 
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。 
 
○月○日（水曜日） 
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？ 
病院に行って注射した。痛かった～！でもおかげで今は熱も下がって、ご飯もいっぱい食べれたよ。 
 
 
★ペットの紹介★ 
これがうちのゴン太です。 
太りぎみだけど、かわいいやつです。 
今年で6才。 
彼女募集中。 
兄弟は親戚のうちにいます。 
これでも長男だぞ！ 
</center>
</body>
</html>

※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

	よしできた！「保存」、ブラウザで確認・・・と。わ～、ページらしくなったぞ！
	うんうん。いい感じだね。よくわかってきたね。
	この私だって、やればできるんだから～！！
	ははは・・・（汗）

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