夏休みの宿題にホームページを作ろう

ホームページというのはhtmlというもので作ります。

5.html言語の基本を理解しよう

サイトメーカー「というわけでまずは前回どんな事を書いたのかのおさらいだ!」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
</body>
</html>

ホーム君「こんな訳の分からない文章を完成させたなんて。前回は本当に僕はよく頑張ったよ!」

サイトメーカー「前回の補足を参考にした人は文字化け対策用の文字も入っているはずだね。この中の、<html>とか<title>とか<body>とかのことをタグと言います。タグを使って書かれた文書をhtml文書と言います。ホームページっていうのはhtml言語で作るんですね」

ホーム君「くっはっはっはっは!やはり!やはりかサイトメーカーよ!」

サイトメーカー「な、なんだい、突然?」

ホーム君「突如開始された専門用語の数々!置いていかれる初心者たち!我々初心者に生きる道はあるのか!?次回『炎に包まれたウェブサイト星。革命の狼煙が今あがる!』」

サイトメーカー「そんなアニメの次回予告風に文句を言わないでくれ。大丈夫。別に専門用語は覚え無くてもいいんだ。テストに出るわけじゃないし。参考程度に聞いておいてくれよ」

ホーム君「仕方がないなー。本当にまったく覚えないからなー!」

サイトメーカー「うん。本当に聞くだけでいいんだ。まず、タグの基本。タグというのは『開始タグ』<タグ名>で始まり、『終了タグ』</タグ名>で終わります。前回の文章を見てみると、<html>で始まり、</html>で終わる。<head>で始まり</head>で終わる。<title>で始まり、</title>で終わる。<body>で始まり、</body>で終わる。というように、全てサンドイッチの様に綺麗な型になっています。基本はこのサンドイッチ型(文字化け対策のもののように、中には<meta 〜>のような例外もあります)です」

サイトメーカー「ところが、例えば

<A>
<B>
はじめまして
</A>
</B>

というのは、ダメな例です。タグ(A)の中で、そのタグが閉じる前に新たなタグ(B)が始まったら、タグ(B)が終わってからでないと、最初のタグ(A)を閉じてはならない決まりになっています」

サイトメーカー「ダメな例を、きちんとしたものに直すとすれば、

<A>
<B>
はじめまして
</B>
</A>

このようになります」

ホーム君「はいはーい、先生!もし間違ったタグを書いてしまうとどうなりますか?」

サイトメーカー「サイトの表示がおかしくなったりしますが、あなたのパソコンは壊れません。何度も言います。何度でも言います。ホームページを作ることと、あなたのパソコンが壊れるかどうかは全く関係がありません。もし『最強に間違いまくりなタグ』で作ったホームページを見ても、あたなのパソコンは壊れませんし、もしあなたが『最強に間違いまくりなタグ』でサイトを作っても、誰にも逮捕されることはありません」

サイトメーカー「というか、正直に言いますとインターネットの世界では『間違ったタグで作られたサイト』がたくさんあります。むしろ、正しい文法で作られたサイトの方が少ないくらいです。『失敗だらけの素人でも自由にサイトを作ることが出来る』がゆえに、これだけインターネットの世界が広がったのです。いやー、初心者にもやさしい、って嬉しいですね!」

サイトメーカー「では、具体的な解説。まず、<html>〜</html>。これは『これからhtml言語を書きはじめますよ!〜html言語を書き終えましたよ!』という意味です。なので、基本的にはサイトのページを作る時は<html>で始まり、最後に</html>で終わります」

サイトメーカー「次に<head>〜</head>。headタグの中には、サイトの表にはでない裏情報を書き込みます」

ホーム君「う、裏情報?」

サイトメーカー「と、エッチな事を考えているあなた、そういう意味ではございません。例えば、今回の例で書いたtitleタグは、ウェブページのタイトルを書き込むタグですが、ウェブページには表示されず青いバーの所に文字が表示されましたね。titleタグはそんな形で表に出てきましたが、本当にほとんど表に出てくる機会が無い情報を書き込むこともあります。そのページの更新日時や、そのページの作者のメールアドレス。文字化け対策。そのページがどんなキーワードで検索されてほしいか等など……。これらも、後々解説することになるでしょう。metaタグについては、もっと後になってから説明したいと思います。しばらくは、「文字化け対策用である」と認識してもらって大丈夫です」

サイトメーカー「titleタグにはそのページのタイトルを書き込みます。titleタグというのは重要です。あなたのページが検索サイトでヒットしたとき、そのページのタイトルとして表示されるのが、titleタグで書かれた内容なのです」

サイトメーカー「最後にbodyタグ。これは、実際にウェブサイトに表示される内容を書き込む所です。前回の例では『はじめまして』という言葉がきちんと表示されていましたね。

<html>
<head>
〜
</head>
<body>
〜
</body>
</html>

という形は、基本中の基本です。ぜひ覚えてください」

ホーム君「せんせーい。今日は解説だけですかー?そんなのつまらなーい。やってらんなーい」

サイトメーカー「では、ちょっとだけ新しいことを覚えましょう。それは、改行の方法です。Yahoo!ジオシティーズにログインして、前回の管理ページ(ファイルマネージャページ)まで進んでください」

ファイルマネージャ

ホーム君「くっ……。はぁはぁはぁ……」

サイトメーカー「ど、どうしたんですか、ホーム君?」

ホーム君「前回のやり方どおりにファイルマネージャページに進むだけでも初心者には精神的負担が大きすぎるぜ。なんせ恐ろしいページを何回も──」

サイトメーカー「はいはーい。index.htmlの横のチェックボックス(四角いやつ)をクリックしてチェックマークを確認したら編集ボタンを押します」

ファイルマネージャで編集します。

サイトメーカー「前回に書いたhtml文章が出てきました。これを以下のように書き換えてみましょう」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
どうぞよろしく
</body>
</html>

サイトメーカー「はじめましての文章の後にEnterボタンを押して、『どうぞよろしく』という文章を書き加えました(余裕がある人は前回の補足を参考に文字化け対策用の文字も入れてね)。これで、サイトに表示される文章もこのように表示されるはずです。保存ボタンを押して、前回のように自分のアドレスからチェックしてみましょう」

改行されない

ホーム君「あれ?書き込んだ時とビミョーに違うぞ?

はじめまして
どうぞよろしく

と書き込んだのに、サイトでは

はじめましてどうぞよろしく

になってる。一体なぜ?」

サイトメーカー「実は、改行をするには、文字を次の行に移すタグ、brタグと言うのが必要です。brタグというのは文字化け対策用のmetaタグ同様特殊なタグで、閉じタグが入りません。では、先ほどの編集から以下のように書き直します」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
</body>
</html>

サイトメーカー「それでは、保存してもう一度チェックしてみます」

改行できた。

ホーム君「お。ちゃんと行が変わった」

サイトメーカー「はい、改行できました。めでたい。では、今回はここまで。次回は、「私のサイトは検索されるようになったの?」です(作ったばかりのサイトは検索されるのか?へ続く)」

補足

ページ内容を書き換えても、ちゃんとページが変わらないときは

ページ内容を書き換えても、ネットから確認するとページが変わっていない場合があります。詳しく説明するとキャッシュとか専門用語で説明しないといけなくて、初心者の方がついてこれず、説明しずらいので、解決方法だけ教えます。そのページを見ている状態で更新ボタンを連打してください(何度も更新ボタンを押してください)。

ちなみに、キーボードの「F5」キーを押すのも、更新と同じ意味です。F5キーは、多分キーボードの画面側の方にF1キー〜F12キーくらいまでずらっと並んでいると思いますが、その中のF5キーの事です。

つまり、あなたのサイトの更新したいページを見ながらF5キーを連打すればすべて解決。

「F5キーなんてマニアックなキーは使ったことねぇよ」という方もいると思いますが、「これから使うようにすれば良いじゃない!」と思います。

更新とは「情報を新しくする」という意味です。

つまり、ページを書き換えてもネットの世界では古い情報のままだったりするから、新しい情報になるまで更新ボタンを何度も押そう!というような感じの理解でいいです(正しくは間違っていますが、今はその程度の理解で特に困りません)。

「F5キーなんて、今まで使ったことが無いから、使うの怖い」っていう初心者の人は、以下のページを参考にしてね。

このエントリーをはてなブックマークに追加