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

ウェブサイトの醍醐味、リンクの方法だ!

7.リンクの作成

サイトメーカー「今回はリンクの方法です。前回説明したように、リンクっていうのは他のサイトに移動するための仕組みの事です。まず、Yahoo! JAPANへのリンクを試しに作ってみましょう」

サイトメーカー「いつも通りYahoo!ジオシティーズからログインしてファイルマネージャのページへ行き、index.htmlファイルを編集しましょう」

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

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

サイトメーカー「これを以下のように書き換えましょう」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
<br>
<a href="http://www.yahoo.co.jp/">やふー</a>
</body>
</html>

サイトメーカー「保存をしたら、自分のアドレスを見てみましょう」

やふーへのリンク

ホーム君「お?『やふー』っていう文字に何やら下線が引かれている!」

サイトメーカー「その『やふー』という文字をクリックしてみましょう」

Yahoo! JAPAN

ホーム君「Yahoo! JAPANへ移動できちゃった!」

サイトメーカー「はい、では戻って、もう一度編集します。今度は以下のように書き換えましょう」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
<br>
<a href="http://www.yahoo.co.jp/">青春</a>
</body>
</html>

サイトメーカー「保存して、再度自分のページを見てみましょう」

青春という文字でリンク

ホーム君「今度は、青春という文字が押せるようになってる!」

サイトメーカー「押してみましょう」

ホーム君「またまたYahoo! JAPANへ移動できちゃった」

サイトメーカー「どうやら、今回出てきた新しいタグ<a href="〜">キーワード</a>でページの移動先を決定するのはキーワードの部分では無く、href="〜"の部分のようです」

サイトメーカー「既に理解しているかもしれませんが、キーワードの部分はどんな文字をいれても、ページの移動先に影響はありません」

サイトメーカー「href="〜"の〜の部分に移動したい先のアドレスを入れることで、そのアドレスへ移動するリンクを作ることが出来ます」

ホーム君「いや、でも、移動したい先のアドレス、例えば今回の http://www.yahoo.co.jp/ は一体どこで知ったの?」

サイトメーカー「はい。普通にサイトを見ていると意外と気づかない人が多いです。そのサイトのアドレスがどこに書かれているか。ここです!」

どこにアドレスが表示されているの?

サイトメーカー「はい。堂々と書かれていますね」

サイトメーカー「さぁ、次は遂に、あなたのサイトのページを増やしてみましょう!」

ホーム君「ついにトップページだけではなく、『僕の必殺技一覧ページ』や『僕の今までの戦いの記録』ページを作れるようになるわけだ!」

サイトメーカー「ホーム君は一体どんな人生を送って来たんですか……。さて、ファイルマネージャのページから、『新規』のボタンを押してみましょう」

新規ボタン

サイトメーカー「はい。ファイル名にはa1.htmlと記入しましょう。実際のhtmlを記入する所には以下のように書きましょう」

<html>
<title>ページ2</title>
</head>
<body>
ページが変わったぞ!
<a href="あなたのサイトのアドレス">トップページ</a>
</body>
</html>

サイトメーカー「はい。『あなたのサイトのアドレス』の部分には、実際にあなたのサイトのアドレスを入力してください(ホーム君の場合 http://island.geocities.jp/xhtml7/ )」

実際の入力例

サイトメーカー「で、保存ボタンを押して、保存をしてしまいましょう」

ホーム君「ん?ファイルマネージャにa1.htmlっていうファイルが新しく出来てるぞ?」

ファイルマネージャにファイルが増えている

サイトメーカー「index.htmlファイルも編集します。いつも編集する時と同じようにindex.htmlファイルの横のボックス(小さい四角)をクリックして編集ボタンを押します」

index.htmlファイルも編集しよう

サイトメーカー「さて、htmlを実際に書くところを以下のように書き直します」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
<br>
<a href="あなたのサイトのアドレスa1.html">次のページ</a>
</body>
</html>

サイトメーカー「『あなたのサイトのアドレス』の部分には実際のあなたのサイトのアドレスを入力してください(ホーム君の場合は http://island.geocities.jp/xhtml7/a1.html となります)。

index.htmlファイル実際の編集例。

サイトメーカー「さて、いつも通り、さくっと保存して、自分のサイトを見てみましょう」

自分のサイトを見てみよう。

サイトメーカー「次のページというリンクをクリックしてみましょう」

ページの遷移に成功。

ホーム君「ひゃっはー!ページが変わったぜ!」

サイトメーカー「はい。見事に変わりました。今度は、変わった後の『トップページ』をクリックしてみましょう」

ホーム君「トップページに戻れた!」

サイトメーカー「さぁ、これで、自由にページを作ってリンクを貼れるようになりましたね。さて、では存在しないページへのリンクを間違って作ってしまうとどうなるのでしょう?index.htmlファイルのソースコードを以下のように書き換えてみてください」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
<br>
<a href="あなたのサイトのアドレスb1.html">存在しないページ</a>
</body>
</html>

サイトメーカー「『あなたのサイトのアドレスa1.html』のところを『あなたのサイトのアドレスb1.html』へ書き変えました(ホーム君の場合はhttp://island.geocities.jp/xhtml7/b1.html)。また、リンク文字を分かりやすく『存在しないページ』にしました」

存在しないページへのリンクを作る。

サイトメーカー「b1.htmlという名前のファイルはまだ作成していないので、存在しないアドレスへのリンクということになってしまいます。さて、あなたのサイトのトップページを見てみましょう」

自分のサイトを見てみよう。

ホーム君「見た目は今までと変わった様子は無いけど……」

サイトメーカー「では、勇気を持ってリンクをクリックしてみます」

ファイルが見付かりません。

ホーム君「エラーページだ」

サイトメーカー「はい。特にあなたのパソコンが壊れる訳でもなく、普通に『ページが見つかりません』ページへ行きました。これは、Yahoo! ジオシティーズ側が用意している『ページが見付かりません』ページですが、他のサイトへのリンクのアドレスを間違えても、同じように『ページが見付かりません』と言うようなページが表示されるだけで、特にパソコンは壊れません。また、リンクのアドレスを間違えても、特に誰にも怒られません。ちなみに、存在しないページにアクセスして出てくるエラーページを『404エラーページ』といいます。404は『ファイルが無いよ』っていうエラーコードです」

ホーム君「よし。これからは自信を持ってリンクアドレスを間違えることが出来るな!」

サイトメーカー「そういえば、今回初めて新しいページを作りましたね。新しいページのページ名をつけるときの決まりを教えましょう」

サイトメーカー「みたいなね。簡単に教えてみたけど、ファイル名をつけるときの規則をもっと詳しく知りたい!って人は他のサイトを参照してみてね」

サイトメーカー「そうそう。htmlファイルは最後に.htmlって付ける決まりだから、「a.aaa.aaa.html」とか、.(ドットマーク)をいっぱい付けるのもダメだぞ。.は.htmlって最後に付けるときだけ使おう」

サイトメーカー「あと、間違ってファイル名に使っちゃいけない文字を使ったからといってパソコンは壊れないし、多分、先ほどの『ファイルが見付かりません』くらいのエラーがでるだけなので、自信を持って間違えよう!」

サイトメーカー「さて、この回までで結構『基本中の基本』は教えたので、そろそろ自分の好きにサイトを作り初めて構いません。次回からは、私も『前回の例のファイル』に縛られずに、自由に『例を示すファイル』を使い捨てで作っていこうと思っています。さて、次回は文字に色をつけようです」

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