簡単内職アルバイトTOPへ
←back   index   next→
リンクをつくろう 1

さあいよいよ最初の難関にやってきました!リンクを作るにはちょっと頭を使うので覚悟しておいてくださいね・・
リンクというのは別のページに移動したり、全く別のホームページに移動したり、超画期的なシステムですよね。これがなければネットサーフィンなんかもできないわけです。
それにリンクのないホームページはかなり面白味に欠けますので、絶対覚えておいて損はないでしょう。

さて、リンクする為に使うタグは <a href="〇〇">というのを使います。
〇〇にはリンク先のアドレスが入り、閉じるときは </a>というタグを使います。
具体的な使い方はリンクさせたい文章を<a href="〇〇"></a>で挟みます。
例: <a href="〇〇">自己紹介のページ</a>
ではさっそくリンクを作ってみましょう。リンク先の名称はみなさんが自由に決めてもらって構わないですからね。
 
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>
  <body bgcolor="yellow">
   <center><h1>
     <font color="red">ようこそ!私のホームページへ!</font></h1><br>
   <h2>初めてホームページを作ったので応援ヨロシク!</h2></center>
<br>
      <a href="jikosyoukai.html">自己紹介のページ</a>

  </body>
</html>

これでリンクが一つできました。しかし、リンク先の「自己紹介のページ」なんてものは存在しないので、当然移動もできません。つまり新しく作らなければならないのです。
「ゲ!また一つページ作るなんて面倒だ」なんて思ったでしょう。そこで私が変わりに作ってあげました。
まず新しくメモ帳を開いて、下のソース(<html>から</html>まで)をコピペします。そして保存するのですが、ここで注意!
保存するファイル名はさっき指定したリンク先の名前と一致しなければなりません
上の例で言うと、<a href="jikosyoukai.html">と指定したので、今から保存するファイル名を必ず「jikosyoukai.html」と付けます。 それともう一つ、保存先は必ずトップページのファイルが入っているフォルダと同じフォルダに保存して下さい。
<html>
  <head>
    <title>自己紹介のページ</title>
  </head>
  <body bgcolor="lightblue">
   <center><h1>
<font color="red">★自己紹介★</font></h1><br>
<h2>〇〇生まれ〇〇才!特技はホームページ作りです</h2></center>


  </body>
</html>

保存することができたらちゃんと移動するかチェックしてみましょう。トップページを開いて、アンダーラインがついている文字をクリック!
無事に自己紹介のページに移動すれば大成功です!どうです?なんか妙にうれしくないですか?
私が一番最初にリンクを作ったときはかなり感動したのを覚えています。「ああ、自分でプログラム作ったんだな・・」って(^^)

さて、うまく完成したら自己紹介のページからトップに戻るリンクを自分で作ってみましょう。ブラウザに表示されているファイルを編集するにはブラウザの「表示」→「ソース」を選択して編集を始めます。終わったら「上書き保存」 → ブラウザの「更新」ですよ。

次へ