Chapter3：リンクで繋いでみよう

■リンクするファイルを作りましょう

Chapter2では簡単なファイルを作りました。今回はまず同じようにして新しいファイルを作ります。それをハイパーリンクで繋ぐ方法を覚えましょう。では早速前回と同じようにファイルを作ります。ただ今回は少し違った方法でファイルを作ってみますね。

こちらでは例としてファイルの作成方法をいくつか紹介していますがファイルの作成方法自体はどのような方法でも結構です。 ファイルの作り方などの基本的な操作は購入したパソコンの説明書程度のものにもいくつか書かれていると思います。

まず前回作ったindex.htmlを保存したディレクトリを開きます。説明と同じように作ってあるなら"www"という中に入っていると思います。このディレクトリの何も無い所でマウスの右ボタンをクリックしてください。そうするとポップアップでメニューが出てきます。ここにはファイルを新規に作成する項目があり先にはいろいろ並んでいると思います。この中から新しいテキスト文書を製作する項目を選択してクリックして下さい。

これで新しいテキストファイルができましたね。ディレクトリの中は前回作成したindex.htmlと今作成したテキストファイルの二つになっていると思います。このテキストファイルの名前を変更します。とりあえず今回は"contents.html"に変更します。

できましたか？これをクリックして開いてください。ブラウザが起動してファイルが開いたら成功です。

一連の操作がよく解らない人はこちらの付録を参考にしてみてください。
>> 超初心者向け：新しいディレクトリやファイルの作り方。

でもこのままでは中身が空っぽで真っ白ですね。そこで前回の復習を兼ねる意味も含めてファイルを再編集した時に使った方法で簡単な内容を記入してみましょう。準備が出来たらさっそく下のタグと文章を記入してください。

■contents.html - 偽テキストエディタ
ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　
<html>
<head>
<title>リンク</title>
</head>
<body>
<p>リンクの練習です</p>
</body>
</html>

できましたか？
きちんと入力できた事を確認したらファイルを保存してブラウザで表示される内容を確かめてみましょう。下のような感じで表示されていたら成功です。

■リンク - Immediatery Explosion -
ファイア(F)　爆発(E)　消失(V)　ヘブン(H)　>>

リンクの練習です

うまくできたらひとまずブラウザとテキストエディタを終了してください。

■ファイルをリンクさせてみましょう

ではさっそくファイルをリンクしてみましょう。
まず既存のindex.htmlを編集する準備をしてください。準備ができたら下を参照しながらファイルを編集してください。今回も赤い文字の部分を追加します。少しくらい時間が掛かってもいいので間違えないように正確に。

あ。入力する前に少し注意を書いておきます。前回もタグ自体には全角文字は使えませんという事を書きましたよね。今回はタグの中に前回には無かった空白の部分があります。この空白も半角で入力します。タグの中では特殊な場合を除くと文字も空白も全て半角文字なんだと覚えておくと良いでしょう。では入力してみてください。

■偽テキストエディタ
ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　
<html>
<head>
<title>編集後</title>
</head>
<body>
<p>がんばる</p>
<p>がんばれ</p>
<p><a href="contents.html">コンテンツへ</a></p>
</body>
</html>

きちんと編集できたらファイルを保存してブラウザで表示を確認してみてください。下のような感じになっていればひとまず成功です。

■編集後 - Immediatery Explosion -
ファイア(F)　爆発(E)　消失(V)　ヘブン(H)　>>

がんばる

がんばれ

コンテンツへ

さていよいよ実験です。編集後に表示しているファイルの中に現れたコンテンツへという部分をドキドキしながらクリックしてみてください。

どうですか？表示されましたか？

■リンクは世界中のあらゆるファイルをつなぎます

リンクを作る時の基本的な書き方を覚えましょう

ここで少しタグについて触れたいと思います。先程ファイルからファイルへのリンクを作る時に

<p><a href="contents.html">コンテンツへ</a></p>

という部分を追加しました。

この中で<p>ほにゃらら</p>という部分は今までにも出てきましたね。HTMLシートの内部では<p>〜</p>で囲まれた部分は「これで一つの段落ですよ」という事を意味しています。なんとなくでも良いので覚えておいてくださいね。

そうすると残るのは

<a href="contents.html">コンテンツへ</a>

の部分だけになりますね。実はこの一連の部分がリンクに関する記述なんですね。短いでしょ。

これをもっとも簡単に説明すると

<a href="ファイル指定">クリックする文字列や画像</a>

という事になります。これさえ覚えればリンクの基本はおっけーです。

ここでついでにもう一つお約束を覚えておきましょう。タグと言うのはほとんどの場合<p>内容</p>や<a>内容</a>といったように内容をサンドイッチする形になります。要するにで2つで1組になるんですね。一般的には最初の方を開始タグと言い最後のタグを終了タグと言います。これは日本語で文章を書く時のかぎかっこみたいな物だと思えば理解しやすいと思います。 "<p>" が "「" で "</p>" が "」" みたいな感じです。 終了タグには"/"が付く事も覚えておいてくださいね。

■練習してみよう

先程編集したページのリンクをクリックすると今回新しく作ったページが表示されますね。そして今このファイルには「リンクの練習です」っていう文字だけでリンクの部分はありませんね。では今度はこのファイルに「インデックスへ」という文字をクリックすると元のファイルに戻るリンクを作ってみてください。先程書いた事を読み直しながらでも良いのでとりあえず少し自分で考えてみてくださいね。

どうでしょうか？無事出来ましたか？
うまく出来なくて困ってしまった人もいるかもしれませんが気にする必要はありません。最初はみんなうまくいかない事が多いのです。では今回の答えを再度簡単な解説付きで書いてみますね。

書き方の基本は先程も書きましたが下のとおりです。

<a href="ファイル指定">クリックする文字列や画像</a>

そして今回は「インデックスへ」という文字をクリックすると"index.html"へつながるリンクを作る訳ですから正解は下記のようになります。

<a href="index.html">インデックスへ</a>

上記が一応答えですね。もっと良いのは下のような書き方でしょうか。

<p><a href="index.html">インデックスへ</a></p>

これだと今まで覚えてきた内容が反映されていて良い感じかなと思います。

■これでリンクの基本は終了です

どうでしたか？今回は少し書き方のルールを交えてお話しました。基本的な事なので覚えておくときっとあとで役に立つと思います。でも「ややこしいよう」と感じたら完全に暗記する必要はぜんぜんありません。今はとりあえず「ふーん。そうなんだ」くらいでも大丈夫です。一度に覚えるのは大変ですものね。ゆっくりとまいりましょう。

表紙へ
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送