|
|
●ホームページってどうやってできてるの？ ●「タグ」ってなに？ ●「HTML」の決まりごと |
 |
 |
じゃあ初めに、ホームページの仕組みを調べてみようか。 |
 |
うん。
|
|
まずこの「つくってみようホームページ」がどんな風にできているのか見てみよう。
|
|
どうやって調べるの〜？
|
|
皆さんが今見ている「つくってみようホームページ」。このページがどんな風に作られているのか見てみましょう。皆さんが使っている「ブラウザ」（いまこのページを見ているソフトです）の画面上のメニュー「表示」から「ソース表示」「ソース」または「ページのソース」を選んでください。すると、下のような訳のわからない文字がいっぱい出てきたはずです。
これはこのページを作り出している「HTML」というプログラムです。それぞれのページによってもちろん内容は違ってきます。「ブラウザ」はこの「HTML」を読み込んで理解し、皆さんが見やすいように表示をします。言わば建物の「設計図」や音楽の「楽譜」のようなものです。設計図や楽譜が間違って書かれているとおかしな建物や音楽になってしまうように、「HTML」も間違って書いてしまうと、ブラウザは違うことを表示してしまったり、うまく表示できなかったりします。 |
|
この「HTML」が書いてあるファイルの事を「HTMLファイル」って言うんだけど、それを「サーバ」に置くことによって、世界中の人が見れるようになるんだ。 |
|
「サーバ」？？？
|
|
うん。ぼくみたいな家庭用パソコンの中に置いておいても、誰も見ることははできないんだよ。世界に繋がってるパソコンに置かなくちゃいけない。それが「サーバ」。
|
|
へえ〜、「サーバ」って偉いパソコンなんだ。 |
|
ま、まあね。（笑）その「サーバ」、実はノリコちゃんはもう持ってるんだよ。 |
|
え？そんな偉いパソコン、知らないよ！？ |
|
さっき、ユーザホームページサービスに申し込んだでしょ？それによってSpinNetが持っている「サーバ」の中の一部を貸してもらえたんだ。 |
|
わ〜、やった〜！ |
|
使えるのは「50MB」分だよ。ピンと来ないかも知れないけど、これだけあれば十分いろんなページを作って置いておくことができるんだよ。 |
|
皆さんももう、ユーザホームページサービスに申し込んでいただけましたよね？これで、あなたの「サーバ」が用意されました。そこに、「HTMLファイル」を置くことによって、全世界に公開することになるのです。もう、世界への第一歩は踏み出しましたよ！ サーバーに置かれた「HTMLファイル」に、世界からいろいろな人がインターネットを通じてアクセスします。そしてその人がホームページアドレスを入力して「あなたのサーバーにある○○というHTMLファイルを見せて！」と要求すると、ブラウザはその中の「HTML」を読み込んで、自分のパソコン上に表示します。そう「HTML」は世界の共通語、「サーバ」は世界への窓口なのです。 |
 |
|
<html> |
|
上の文を見てみて。これは「HTML」の基本の形だよ。 |
|
ふ〜ん。「<>」で括られた単語がいくつもあるね。 |
|
そう。この「<>」で括られた部分を「タグ」って言うんだ。この「タグ」がブラウザにいろいろな指示を出してるんだよ。
|
|
これをブラウザで表示するとどうなるの？ |
|
下のようになるんだよ。不思議でしょ？これでも立派なホームページなんだよ。 |
|
でも何だか寂しいね。 |
|
まあまあ、そういわないで。この基本型にどんどん「タグ」を付け足して、カッコイイページを作るんだから。 |
|
うん。どこに付け足すの？ |
|
じゃあ上の「HTML」の基本型の簡単な意味を説明するね。
|
| 1番上の<html>は「ここからがHTMLですよ」と言う意味です。一番下の</html>が「ここまでがHTMLですよ」と言うことになります。気づいた方もいるかも知れませんが、</html>のように/が最初につくタグは「これで終わり」と言う意味です。<>から</>に囲まれた部分にその指示が適用されます。
2番目の<head>から</head>は「このページの情報」です。通常「タイトル」が入ります。<title>から</title>の間に入れます。これはブラウザで表示した際、ウインドウの上のタイトル部分に表示されるものです。次の<body>から</body>の間に「本文（内容）」が入ります。ここにいろいろな「タグ」や文章などを付け足して内容を増やしていきます。 これをブラウザで表示させると、下のようになります。（クリックしてください）
|
|
|
|
じゃあ、この「タイトル」や「本文」の部分に自分の好きな事を書けばいいんだね？ |
|
うん。よくわかったね。でもその前にちょっとした決まり事があるから説明するね。 |
|
これから「タイトル」や「本文」の部分に自分の好きな事を書いていきますが、いくつかルールがあります。 ●「タグ」は必ず半角英数字で！ ●「半角カタカナ」（下図参照）は使わない！ （半角カナはうまく表示されなかったり、トラブルを引き起こす可能性があるので、使えません。） ●「機種依存文字」（下図参照）は使わない！（違うシステムを使っているパソコンではうまく表示されません。）
|
|
よし、ルールもわかったし、意味も分かったぞ！ |
|
これで、いよいよホームペー作りに取りかかれるね。 |
|
うん！・・・あれ？でもどうやって「HTMLファイル」を作るの？ |
|
そうだね。これから用意したテンプレート（ひな型）をアレンジしてオリジナルのページを作ってみよう。
|
 |
 |
